Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • January 7, 2016 at 6:57 pm #561439
    AirstreamCoach

    Hi! Is it possible to modify the opacity of the sticky header? thanks!

    January 7, 2016 at 7:04 pm #561445
    Yigit

    Hey AirstreamCoach!

    Please choose to display Glassy transparent header and then add following code to Quick CSS in Enfold theme options under General Styling tab

    #header.av_header_glassy {
    background-color: rgba(0,0,0,0.5);
}

    0,0,0 is RGB value of the color and 0.5 is opacity level

    Best regards,
    Yigit

    January 7, 2016 at 7:11 pm #561449
    AirstreamCoach

    Hi Yigit! Wow… thanks for your super speedy reply! This works great for altering the opacity of the glassy header but what we are actually looking for is when you scroll and it turns to sticky header (ours goes to solid black) if that opacity can be modified as well? Sorry if my question was unclear. thank you for your help! Jen

    January 7, 2016 at 7:19 pm #561454
    Yigit

    Hey!

    My bad :)
    Please use following code in that case

    #header.header-scrolled { background: black; }

    If that does not help, please post the link to your website

    Best regards,
    Yigit

    January 7, 2016 at 7:40 pm #561469
    AirstreamCoach

    Again, super speedy, thanks! Actually we do already have a solid black sticky header (which appears on scrolling down off the transparent glassy header) but are wondering if that solid black can be modified in opacity. My site url is shared below. THANKS!

    January 8, 2016 at 12:55 am #561686
    Yigit

    Hey!

    Please add following code to Functions.php file in Appearance > Editor

    function transparent_header_scroll(){
?>
<script>
jQuery(window).scroll(function(){
if(jQuery(this).scrollTop() > 100) jQuery('#header').addClass('headerbgc');
if(jQuery(this).scrollTop() < 100) jQuery('#header').removeClass('headerbgc');
});
</script>
<?php
}
add_action('wp_footer', 'transparent_header_scroll');

    and then add following code to Quick CSS 

    .headerbgc { background: black !important; }

    Best regards,
    Yigit

    January 8, 2016 at 5:04 am #561814
    AirstreamCoach

    Excellent. Thank you, very much!

    January 8, 2016 at 3:42 pm #562028
    Yigit

    Hi!

    You are welcome, glad we could help!
    Enjoy your weekend!

    Best regards,
    Yigit

    January 8, 2016 at 5:02 pm #562108
    AirstreamCoach

    Same to you!

  • Author
    Posts
Viewing 9 posts - 1 through 9 (of 9 total)
  • The topic ‘Sticky Header Opacity’ is closed to new replies.