Docs

[mondobongomoses]

Hello, I was able to set the Nav bar to transparent, but I would love have it change to black with white text when I start scrolling down. How would I go about doing that?

http://dev-iconicontent.pantheon.io

Thanks in advance for your help! Your awesome support is a major reason why I keep building sites for my clients in X.

[Rupok]

Hi there,

Thanks for writing in That’s already discussed on several threads. You can follow this – https://community.theme.co/forums/topic/navbar-color-change-on-scroll/#post-274570 or will find lot of similar threads. So I’d suggest you to search on forum firs to find the answer. If you can’t find, we’re always here to assist you.

Cheers!

[mondobongomoses]

Hello, thank you for that link! I read that one, and these others:
– https://community.theme.co/forums/topic/transparent-nav-transition-one-page-nav/
– https://community.theme.co/forums/topic/transparent-headernavbar-only-when-on-top-of-page/
– https://community.theme.co/forums/topic/how-to-make-background-of-nav-bar-see-through-then-solid-upon-scroll-down/

and I feel like I am SO close! I am able to get the bar to change to black, but I would like to have the links in the nav turn white.

I also would like to turn the nav on (http://dev-iconicontent.pantheonsite.io/contact-connect/) turn to black with the white logo/link text.

If there is another thread that shows how to do this, would you please link it? My search has not been fruitful :(.

If no threads for that exist, can you help? I’ll link my login credentials below so you can see my code.

Thanks!

[mondobongomoses]

This reply has been marked as private.

[Thai]

Hi There,

Please remove your custom JS & CSS, then add the following CSS under Customizer > Custom > CSS:

.x-nav-black {
  background-color: #000 !important;
}
.x-navbar.x-nav-black .desktop .x-nav > li > a,
.x-navbar.x-nav-black .x-brand {
    color: #fff;
}

And add the following JS under Customizer > Custom > Javascript:

jQuery(document).ready(function($){
	$('.x-navbar').css("background-color", "transparent");
	var rev_height = $(".x-slider-container").height();
	$(window).scroll(function(){
		if ($(this).scrollTop() > rev_height) {
			
			$('.x-navbar').addClass('x-nav-black');
		} else {
			$('.x-navbar').removeClass('x-nav-black');
		}
	});
});

Hope it helps 🙂

[mondobongomoses]

Hi Thai! That was very helpful! Thank you! Although it has brought up a few more hopefully small issues you can help me with.

http://dev-iconicontent.pantheonsite.io/blog/
– On this blog page – the nav doesn’t stick at the top like on the other pages. How do I fix that?

http://dev-iconicontent.pantheonsite.io/contact-connect/
– on this contact-connect page, when on mobile, as soon as I scroll, the expanded mobile nav turns black, unlike the other pages. how do I fix that? I would like it to stay white, like the other pages on mobile.

Thanks again for your great support!

[Christopher]

Hi there,

#1 Please update theme and cornerstone, as this may fix the issue.

#2 Please find this code :

.x-nav-black {
    background-color: #000 !important;
}

And update it to :

@media (min-width:979px){
.x-nav-black {
    background-color: #000 !important;
}
}

Hope it helps.

[mondobongomoses]

Chris, you seriously rule! Thank you!

[mondobongomoses]

Sorry to complicate things… I realize I may not actually need a slider, and have set the image as a background.

Is there a way to bump the image up to make it appear behind the clear nav, and have the nav turn black like it currently does upon scrolling down? I hope that makes sense!

[Christopher]

Hi there,

Glad we could help you.
Please add this :

@media (min-width:979px){
.home #x-section-1 {
    margin-top: -100px !important;
}
}

Hope it helps.

[Author]

Posts