Docs

[dabbevdbrand]

Hi guys,

Because of my video header I’d like my navbar to be transparant so I only see the menu items and the logo, when scrolling down id like it to reappear again in my color of choosing.

Could you please help?

http://www.duizenddingen-hosting.nl/cut/

[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){
.x-navbar.x-navbar-fixed-top.white {
    background-color: #fff !important;
}

Hope that helps.

[dabbevdbrand]

thanks, it doesnt help though 🙁

css is now:

.x-navbar {
background-color: transparent !important;
border: 0;
}
.x-logobar{
background-color: transparent !important;
}
.masthead {
height:0px;

}
@media (min-width:979px){
..x-navbar.x-navbar-fixed-top.white {
background-color: #fff !important;
}

[Christopher]

Hi there,

Please add JS code, clear cache and check again.

Thanks.

[dabbevdbrand]

I did that, it didnt work 🙂

[Thai]

Hi There,

There are some syntax errors in your custom JS:

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 replace the code above with this:

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");
		}
	});
});

After that add the following CSS also:

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

Hope it helps 🙂

[dabbevdbrand]

Thanks this worked perfectly

two more questions:

1. how do I change the color of the navbar?

2. can I add a second logo that will appear on the navbar when I scroll? I want the same logo but then maybe in black so it becomes is visable when scrolling, now its white on white.

Thanks!

[Nabeel A]

Hi again,

Please replace the above jQuery script with this one:

jQuery(document).ready(function($){
	$('.x-navbar-fixed-top').addClass("transparent-navbar");
    var original_logo_src = $(".x-navbar .x-brand.img img").attr("src");
	$(window).scroll(function(){
		if ($(this).scrollTop() > 50) {
			$('.x-navbar-fixed-top').removeClass("transparent-navbar").addClass("white");
            $(".x-navbar.white .x-brand.img img").attr("src", "http://path/to/new/blackLogo.png");
                        
		} else {
			$('.x-navbar-fixed-top').removeClass("white").addClass("transparent-navbar");
            $(".x-navbar .x-brand.img img").attr("src", original_logo_src);
		}
	});
});

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

[dabbevdbrand]

Thanks it works now! Can you tell me how to change the navbar color?

[Nabeel A]

Hi again,

You can use this code:

.x-navbar {
    background-color: rgba(255,255,255,0.5) !important;
}

Let us know how this goes!

[Author]

Posts