Creating transparent navbar

[april]

Hello, I would like to make my navigation bar on my home page transparent over the main image, and then with a white background once you scroll past that main image.

The homepage is here techpilotlabs.com

Thanks!

[nabeel]

Hi there,

Thank you for reaching out to us. This can be done via custom scripting, first add the following code in the Theme Options > CSS:

.home .masthead .x-navbar {
    background-color: transparent ;
}

.home .masthead + div {
  margin-top: -91px !important;
}

Then add the following code in the Theme Options > JS:

jQuery(document).ready(function($){
	$(window).scroll(function(){
		if ($(this).scrollTop() > 91) {
			$('.home .x-navbar').css("background-color", "#fff");
		} else {
			$('.home .x-navbar').css("background-color", "transparent");
		}
	});
});

Don’t forget to clear your browser’s cache after adding the code. Let us know how this goes!

[UnReal33]

Great job! Thanks a lot !

[Prasant]

You are most welcome.

[april]

Thank you!

How can I change the text of the menu items to white, while the nav bar is transparent, and then keep them the same gray they currently are when the navbar changes to white?

[nabeel]

Hi again,

To change the menu items color for the transparent Navbar just replace the previous script with the following code:

jQuery(document).ready(function($){
	$(window).scroll(function(){
		if ($(this).scrollTop() > 91) {
			$('.home .x-navbar').css("background-color", "#fff");
			$('.home .x-nav > li > a').css("color", "#58595b");
		} else {
			$('.home .x-navbar').css("background-color", "transparent");
			$('.home .x-nav > li > a').css("color", "#fff");
		}
	});
});

Don’t forget to clear your browser’s cache after adding the code. Let us know how this goes!