Change the background-color of the header when user is scrolling

Support
#1

Hello,

How can I change the background-color of the header when user is scrolling?

Thanks,
Antoine

#2

Hi Antoine,

Thanks for reaching out.

Please check this related thread https://theme.co/apex/forum/t/transparent-fixed-navbar-with-opaque-header-on-scroll-issue-on-mobile/28797/9.

You probably just need this part if it’s just changing to a different color and applicable for desktop and mobile

    .x-navbar.x-navbar-fixed-top {
       background-color: #823822;
    }

Please add it to your Theme Options > CSS

Hope this helps.

#3

Thank you for the explation. I tried with following code and the header background remains transparent all the time though:

.x-navbar.x-navbar-fixed-top {
    background-color: transparent;
}

.x-navbar {
    background-color: rgba(0, 0, 0, 0.8);
}

I did not figure out how to make the changes without adding !important …

#4

Hello Antoine,

Would you mind providing the URL of the site in question so that we can check it?

Thank you.

#5

Sorry for the late response. Here is the website:
https://modele-site-restaurant.neowebsite.io/4/

#6

Hello Antoine,

Please add this code in the Global JS so that Rad’s suggestion will work:

(function($){

$(window).scroll(function() {    
    var scroll = $(window).scrollTop();

    if (scroll >= 500) {
        $(".x-navbar").addClass("x-navbar-fixed-top");
    } else {
        $(".x-navbar").removeClass("x-navbar-fixed-top");
    }
});

})(jQuery);

Hope this helps.

#7

Hello,

Thanks for the suggestion. I still do not manage to get it work though. Would you mind checking it? Here are my credentials.

Thanks,
Antoine

#8

Hi Antoine,

Please change your css code from this

.x-navbar.x-navbar-fixed-top {
    background-color: transparent;
}

.x-navbar {
    background-color: rgba(0, 0, 0, 0.8);
}

to this

.x-navbar.x-navbar-fixed-top {
     background-color: rgba(0, 0, 0, 0.8);
}

.x-navbar {
    background-color:transparent;
}

Thanks

#9

Thank you.

#10

You are most welcome!

#11

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.