Docs

[gwickham]

Hi,

1.) I am wondering if it is possible to have my header fully transparent for the background picture on my home screen, but turn solid (or like 80% solid) after I scroll down past first background picture? 2.) Also, is it possible to make the line under the header fully transparent as well? Thanks! http://www.movementvault.com

[Christopher]

Hi there,

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

@media (min-width:979px){
.x-navbar.x-navbar-fixed-top.solid {
    background-color: rgba(0,0,0,0.8);
}
}
.x-navbar {
    border: none;
    box-shadow: none;
}

Please add following code in Customize -> Custom -> Global 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("solid");
		} else {
			$('.x-navbar-fixed-top').removeClass("solid").addClass("transparent-navbar");
		}
	});
});

Hope that helps.

[gwickham]

Christoper you are the man! Thanks!

Regarding the second code. Is there a way I can adjust the setting as to when the solid menu bar appears when I scroll down the page? Say not have it appear right away when I scroll down, but have it appear half way down the page? Also am I able to change the color of the bar when it appears?

[Friech]

Hi There,

Try increasing that scrollTop() > 50 value on the JS code given.

Yes, on the given CSS code above change this background-color: rgba(0,0,0,0.8); with your desired color rgba value.

Thanks.

[Author]

Posts