Docs

[ZerotoOne]

hey there I’d like to make the grey line in my navbar to disappear on scroll
http://prntscr.com/dxazxd

my page is http://www.zerotoone.de

[ZerotoOne]

This reply has been marked as private.

[Joao]

Please update your Appereance > customizer > Custom > Javascript to:

jQuery(document).ready(function($){
	$('.x-navbar-fixed-top, .x-navbar').css("background-color", "transparent");
	var rev_height = $("#inici").height(); 
	$(window).scroll(function(){
		if ($(this).scrollTop() > rev_height) {
			$('.x-navbar, .x-navbar-fixed-top').attr('style','background-color: rgba(46,46,46,0.8) !important');
		} else {
			$('.x-navbar, .x-navbar-fixed-top').attr('style','background-color: transparent !important; border: 0;');
		}
	});
});

Hope it helps

Joao

[ZerotoOne]

thank you, but it is now the other way round, the line is displayed on scroll and disappeares when you are on the top of the page

[Jade]

Hi there,

Please try this:

jQuery(document).ready(function($){
	$('.x-navbar-fixed-top, .x-navbar').css("background-color", "transparent");
	var rev_height = $("#inici").height(); 
	$(window).scroll(function(){
		if ($(this).scrollTop() > rev_height) {
			$('.x-navbar, .x-navbar-fixed-top').attr('style','background-color: rgba(46,46,46,0.8) !important; border: 0;');
		} else {
			$('.x-navbar, .x-navbar-fixed-top').attr('style','background-color: transparent !important; ');
		}
	});
});

Hope this helps.

[ZerotoOne]

thank you this is good. 🙂 but could you please have a look at the site and confirm what I see? it looks like the grey line changes its color, once you scroll back to the top :/ can you see how it kind of flashes?

[Rue Nel]

Hello There,

Thanks for updating in! To get rid of the flashing border in your navbar, please remove this line from your custom css

.x-navbar {
    transition: 0.5s all linear;
}

Hope this helps. Kindly let us know.

[ZerotoOne]

thank you, is there a way to get rid of the flashing border, without missing the transition effect of the navbars color?

[Lely]

Hi There,

We have to remove the bottom border then.
Please update this custom CSS:

body .x-navbar {
    border-bottom: 0.5px solid rgba(255,255,255,0.1);
 }

With this:

body .x-navbar {
    border-bottom: none !important;
}

Hope this helps.

[Author]

Posts