Change header colour on scroll

Support
#1

Hi there I am building a site at the moment here

I have tried everything to get the header to change to a different colour when scrolling down. No code from other support topics seems to work. Is there anyone that could help me with this? I think it is some javascript and CSS that I need to use, but after trying a few different codes I am still not sure how to go about this.

If anyone has some time to help I would really appreciate it.

Mike

#2

Hi Mike,

To make it change to a different color.

Add this in Theme Options > JS

jQuery(function($) {
$(window).scroll(function (event) {
    var scroll = $(window).scrollTop();
    if(scroll ==0){
       $('.x-navbar').removeClass('x-navbar-fixed-top');
    }
});
});

Then add this in Theme Options > CSS

@media (min-width: 979px) {
.home .x-navbar {
     background: #2c3e50 !important;
}
}

Hope that helps

#3

Thanks for your reply, I have done as you said and it has done nothing except change the background colour to a dark blue.

#4

Hi,

Sorry, the code should be

@media (min-width: 979px) {
.home .x-navbar.x-navbar-fixed-top {
     background: #2c3e50 !important;
}
}

Thanks

#5

That is perfect! Thanks a lot.

Just lastly, is it possible to get the header to show a different color when the next section comes up?

So in other words delaying the scroll so it shows at a certain time.

Thanks

#6

Hi,

You can change zero in the js code I provided to a number of when you would like the color to change.

eg.

jQuery(function($) {
$(window).scroll(function (event) {
    var scroll = $(window).scrollTop();
    if(scroll >=500){
       $('.x-navbar').removeClass('x-navbar-fixed-top');
    }
});
});
#7

Hi,

I used this code and header colour changed on scroll on the homepage. How to make this change effective on all pages?

Thanks

#8

Hi There,

To apply your CSS globally, remove .home from your provided code.

Thanks!

#9

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