Docs

[HighTechDad]

Hello,

I’m trying to accomplish a similar effect to what is seen on this page: http://www.dealer.com/products/advertising/

The top bar navigation is initially transparent but as you scroll past the initial image/slider, the menu become solid (like black or another color).

Is this possible with X and which Options (e.g., Integrity, Ethos, etc.) would you recommend for this?

What would be some CSS I could try for this effect?

Thanks as always.

[Christopher]

Hi there,

Please add following code in Customize -> Custom -> JavaScript :

jQuery(document).ready(function($){
			$('.x-navbar-fixed-top').addClass("transparent-navbar");
	$(window).scroll(function(){
		if ($(this).scrollTop() > 50) {
			$('.x-navbar-fixed-top').removeClass("transparent-navbar").addClass("white");
		} else {
			$('.x-navbar-fixed-top').removeClass("white").addClass("transparent-navbar");
		}
	});
});

Please add following code in Customize -> Custom -> CSS :

@media (min-width:979px){

.white{
background-color:#fff !important;

}
.transparent-navbar{
background-color:transparent !important;
}

}

Hope it helps.

[HighTechDad]

Thank you for this! I will test it out. What theme option/config would you recommend to get as close as possible to the dealer.com site?

[Rupok]

Hi there,

You can navigate the various demos here – http://theme.co/x/

Then use the tutorial for demo content https://community.theme.co/kb/demo-content/ to import the look you want.

Cheers!

[Author]

Posts