Header effect (only when scrolling down)

Hi Stilecatalini,

The question seems to be asked as well on this thread:

Best regards,
Nikko

Hi Stilecatalini,

I see, please try to add this code in functions.php of your child theme:

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 put this CSS code in Quick CSS:

#top #header.header-scrolled .header_bg {
  background-color: rgba(20, 21, 23, 0.3);
  backdrop-filter: blur(8px);
}

just adjust the properties as you see fit.

Best regards,
Nikko

Hi Stilecatalini,

I install and activated a plugin called WPCode – Insert Headers and Footers + Custom Code Snippets – WordPress Code Manager on your site and added the PHP code there, then added this in Quick CSS:

@media only screen and (max-width: 989px) {
  #top #header.header-scrolled .header_bg {
    background-color: rgba(20, 21, 23, 0.3);
    backdrop-filter: blur(8px);
  }
}

Please review your site.

Best regards,
Nikko

Hi Stilecatalini,

I have posted screenshot links in private content.
The first one is when the page is not scrolled and the second one is when the page is scrolled.

Best regards,
Nikko

Hi Stilecatalini,

Unfortunately, at the moment I don’t have a working solution, but I’ll post here if I can make one.

Best regards,
Nikko

Hi Stilecatalini,

Please try Guenni007’s solution on this thread: https://kriesi.at/support/topic/only-have-header-show-when-user-scrolls-up/

Best regards,
Nikko