Viewing 9 posts - 1 through 9 (of 9 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');


    Thanks for your help :)

    Best regards,


    Hi there, I tryed this and it does absolutley nothing. Do you have an idea for what reason?
    Would realy like to have such a function.

    Best regards and enjoy yourday!



    Where did you add the script? We tried to login to the dashboard but the account info above seems to be invalid. Please check the login credentials or provide another admin account.

    Best regards,


    Hey Ismael, thx for asking – got the script working. The effect was hidden by #header_main witch was backtground #fff



    and think of the time when this is posted – some events are deprecated now – so maybe it has to be now: $(window).on( 'scroll' ,function() {
    sometimes it is better to have : .bind('scroll', function() {

Viewing 9 posts - 1 through 9 (of 9 total)
  • You must be logged in to reply to this topic.