Docs

[King J]

Hey Guys,

I am trying to have my navigation start transparent at top of the page and then when one begins to scroll it turns non transparent. I tried many codes by searching this forum but nothing works. I am using the latest version of Integrity with visual composer. How do I achieve this effect?

Thanks in advance.

[King J]

This reply has been marked as private.

[King J]

In addition, I am using revolution slider and the top portion behind the nav is solid. The pictures in revolution slider do not stretch to the top of the browser?

[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-fixed-top.transparent-navbar{
background-color:transaparent;
}
.x-navbar-fixed-top.white{
background-color:rgba(255,255,255,0.3);
}
.page-id-129 div#x-content-band-1 {
    margin-top: -60px !important;
}
}

Hope it helps.

[King J]

Hey guys,

It worked in reverse. When the navbar is on top it should be transparent. When it starts to scroll it should be solid. With the code that you have given me, The navbar is solid on top and transparent when you scroll. Any other suggestions?

[King J]

Hey Guys,

I found a code that finally worked. The only problem is that it does not revert back to transparent when someone goes back to the top of the page. Any suggestions?
Thanks in advance.

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

.x-navbar.x-navbar-fixed-top {
background-color: #141414;
height: 60px;
}

.x-navbar.x-navbar-fixed-top .x-brand {
width: 400px;
}

.x-navbar.x-navbar-fixed-top .x-nav > li > a {
padding-top: 30px !important;
}

[Christopher]

Hi there,

Please implement the code so we can see the issue you’re referring to.

Thanks.

[Author]

Posts