Tagged: 

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • May 22, 2023 at 9:00 pm #1408199
    heinerpompeiner

    Hi,
    I tried to get a transparent header for my site on mobile devices, that acts exactly like it does on the desktop version of my site (see url below).
    I used this code from the forum:
    @media only screen and (max-width: 990px) {
    #top #wrap_all .av_header_transparency, .av_header_transparency #advanced_menu_toggle {
    background: transparent!important;
    position: absolute!important;
    }}

    now i have a transparent header on my phone, but the logo is grey, not white (the white one is the transparency logo).
    I want the header to be transparent and the logo to be white and when I scroll down the header should stick to the top of the screen and turn white, while the logo turns grey (exactly like in the desktop version)
    How can I do that?

    Thank you very much!

    May 24, 2023 at 4:47 am #1408369
    Nikko

    Hi heinerpompeiner,

    Please try to add this code in your in your child theme’s functions.php:
    If you don’t use a child theme yet, then you can use a plugin to insert this PHP code/snippet like WPCode – Insert Headers and Footers + Custom Code Snippets:

    function add_custom_script(){
?>
<script>
(function($){
    $(window).scroll(function() {    
    var scroll = $(window).scrollTop();

    if (scroll >= 50) {
        $("#header").addClass("header-scrolled");
    } else {
        $("#header").removeClass("header-scrolled");
    }
});
})(jQuery);
</script>
<?php
}
add_action('wp_footer', 'add_custom_script');

    Then in Enfold > General Styling > Quick CSS, add this CSS code:

    @media only screen and (max-width:767px) {
  #top .header_bg {
    background-color: transparent;
    opacity: 0;
    filter: alpha(opacity=0);
  }

  #top #header.header-scrolled .header_bg {
    background-color: white;
    opacity: 1;
    filter: alpha(opacity=100);
  }

  .responsive #top #header.header-scrolled .logo img.alternate,
  .responsive #top #header .logo > a > img {
    opacity: 0;
  }

  .responsive #top #header .logo img.alternate,
  .responsive #top #header.header-scrolled .logo > a > img {
    display: block;
    opacity: 1;
  }
}

    Hope it helps.

    Best regards,
    Nikko

    May 25, 2023 at 5:51 pm #1408569
    heinerpompeiner

    Thank you!

    It almost works! I installed the child theme and inserted your code. Now the logo has the right color. The only thing is that I want the menu to always stay on the screen when scrolling down, like it does in the desktop version. On my Phone it is white and turns grey with a white background bar when I scroll down (which is good), but it disappears because it scrolls up with the rest of the page. You can only see it on the “Work” page. (see url below). Is there an easy way to fix this?

    Thank you very much!

    May 26, 2023 at 6:48 am #1408634
    Nikko

    Hi heinerpompeiner,

    Please remove the CSS code I gave and replace it with:

    @media only screen and (max-width:767px) {
  .responsive #top #wrap_all #header {
    position: fixed;
  }

  #top .header_bg {
    background-color: transparent;
    opacity: 0;
    filter: alpha(opacity=0);
  }

  #top #header.header-scrolled .header_bg {
    background-color: white;
    opacity: 1;
    filter: alpha(opacity=100);
  }

  .responsive #top #header.header-scrolled .logo img.alternate,
  .responsive #top #header .logo > a > img {
    opacity: 0;
  }

  .responsive #top #header .logo img.alternate,
  .responsive #top #header.header-scrolled .logo > a > img {
    display: block;
    opacity: 1;
  }
}

    Best regards,
    Nikko

    May 26, 2023 at 3:03 pm #1408694
    heinerpompeiner

    Thank you very much!
    It’s almost perfect now!
    I added
    .header_color:not(.av_header_transparency) .av-hamburger-inner, .header_color:not(.av_header_transparency) .av-hamburger-inner::before, .header_color:not(.av_header_transparency) .av-hamburger-inner::after {
    background-color: #808080 !important;
    }
    to make the burger menu grey while scrolling. (otherwise it would be invisible)
    The only thing that is left is that now the x symbol to close the flyout menu also turns grey when scrolling.
    So in fact it’s invisible, which is not too bad because you can also close the menu by just clicking next to it.

    Is there an easy way to let the x stay white?

    Thanks again!

    May 27, 2023 at 2:47 am #1408732
    Nikko

    Hi heinerpompeiner,

    Please try to add this CSS code after the code you have posted:

    #top #header.header-scrolled .av-hamburger-inner, 
#top #header.header-scrolled .av-hamburger-inner::before, 
#top #header.header-scrolled .av-hamburger-inner::after {
    background-color: #fff !important;
}

    Hope it helps :)

    Best regards,
    Nikko

    May 27, 2023 at 8:27 pm #1408816
    heinerpompeiner

    Thank you very much! Now the x is white while scrolling, but the burger menu also turns white/invisible. I just changed the color of the slideout menu to a lighter grey, so the grey x is still visible. I think I can live with that. Thanks again!

    May 28, 2023 at 11:36 am #1408849
    Rikard

    Hi,

    Great, I’m glad that Nikko could help you out. Please let us know if you should need any further help on the topic, or if we can close it.

    Best regards,
    Rikard

    May 29, 2023 at 11:16 am #1408925
    heinerpompeiner

    Thank you very much for your help!

    I think you can close the Thread!

    May 29, 2023 at 3:10 pm #1408943
    Nikko

    Hi heinerpompeiner,

    I’m glad that we could help you :)
    Thanks for using Enfold and have a great day!

    Best regards,
    Nikko

  • Author
    Posts
Viewing 10 posts - 1 through 10 (of 10 total)
  • The topic ‘Logo color with transparent header on mobile devices’ is closed to new replies.