Docs

[Timmy]

Hi!

I just can’t figure it out. I want my navbar font to change color when scrolling, no problem with that but it doesn’t change back the original color when scrolling all the way up again.

My CSS-code right now is:

.x-navbar .x-nav-wrap.desktop li a span {
    color: #fff;
}

.x-navbar.x-navbar-fixed-top .x-nav-wrap.desktop li a span {
    color: #2b2b2b;
}

URL: http://timanity.se/

Thanks in advance!
Timmy

[Christopher]

Hi there,

Please remove CSS and add this code in Custom -> JavaScript :

jQuery(document).ready(function($){
	$(window).scroll(function(){
		if ($(this).scrollTop() > 50) {
			$('.x-navbar li a').css("color","#2b2b2b");
		} else {
			$('.x-navbar li a').css("color","#fff");
		}
	});
});

Hope that helps.

[Timmy]

Thank you soo much!! 🙂

[Christopher]

You’re welcome.

[Timmy]

Kind of helped me!

But the problem now is that when the page loads up it looks like this:

When I scroll down it’s good:

And when I scroll up again, same thing it looks perfect:

So why isn’t the links white when the page loads up?

[Christopher]

Please update JS code to :

jQuery(document).ready(function($){
	$(window).scroll(function(){
		if ($(this).scrollTop() > 50) {
			$('.x-navbar.x-navbar-fixed-top li a span').css("color","#2b2b2b");
		} else {
			$('.x-navbar.x-navbar-fixed-top li a span').css("color","#fff");
		}
	});
});

Add this CSS as well :

.x-navbar li a span{
color:#fff;
}

Hope it helps.

[Timmy]

Awesome! Thank you soo much!! 😀

[Rupok]

You are welcome!

Glad that it helped. Feel free to let us know if you face any other issue. We’ll be happy to assist you.

Thanks for using X.

Cheers!

[Timmy]

Hello again!

is it possible to have this on only one page? 🙂

[Joao]

Hi There,

Yes it is.

Would you mind letting us know which page you would like to achieve this effect?

If it is your home page try using this code instead:

jQuery(document).ready(function($){
	$(window).scroll(function(){
		if ($(this).scrollTop() > 50) {
			$('.home .x-navbar.x-navbar-fixed-top li a span').css("color","#2b2b2b");
		} else {
			$('.home.x-navbar.x-navbar-fixed-top li a span').css("color","#fff");
		}
	});
});

Let us know how it goes.

Thanks

Joao

[Timmy]

.page-id-53 is the one I want to achieve it on 🙂

[Joao]

Hi There,

Try this instead:

jQuery(document).ready(function($){
	$(window).scroll(function(){
		if ($(this).scrollTop() > 50) {
			$('.page-id-53 .x-navbar.x-navbar-fixed-top li a span').css("color","#2b2b2b");
		} else {
			$('.page-id-53 .x-navbar.x-navbar-fixed-top li a span').css("color","#fff");
		}
	});
});

Hope that helps

Joao

[Timmy]

Yes! Awesome! Thank you! 🙂

[Nico]

Happy to hear that.

Feel free to ask us again

Thanks.

[Timmy]

Hi again!

I have a drop-down menu and the links inside doesn’t show on the home page. P.S Is there a way to make the navbar not transparent when you click on the drop-down menu on mobile?

http://timanity.se/

[Author]

Posts