Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
  • #1198018

    Hello Guys,

    I found a few solutions to change the header background-color on Scroll. But there is always a shrinking header set.
    I dont want and I dont have a shrinked header, but I want to change the Color.

    At the Moment I set my Background-color with

    #header #header_main{
        width: 100%;
        max-width: none;
    	background-color: rgba(0,0,0,0.5);

    On Scroll I want the change the Color to:

    background-color: rgba(0,0,0,0.2);

    Thanks for the Help and Regards


    Hey Vangone,

    Thanks for the details. I can’t see your header shrinking on my end though, I’m guessing that you managed to find a solution?

    Best regards,



    no we didnt find the solution, we just changed the header back to what we want it to be, but toe Background-color when I scroll, is still not what I want it to be.



    because you have no shrinking header you can use a little scroll event to have that .
    Then: is it realy the header that is your selector. On most cases the header_bg will do that. Because i do not see your staging site – it is hard to say something concrete.
    Try: ( and adjust the 50px offset to your needs and the colors)
    This will come to your child-theme functions.php:

    function header_background_change(){
    (function($) {
        $(".header_bg").css("background-color", "green");  // see else setting - just to have the right start when no scroll has happend
          $(window).scroll(function() { 
            if ($(document).scrollTop() > 50) { // your wanted scroll distance 
              $(".header_bg").css("background-color", "red");
            } else {
              $(".header_bg").css("background-color", "green"); 
    add_action('wp_footer', 'header_background_change');


    @guenni007 Thanks for your help :)

    Best regards,

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.