Docs

[TheDude]

Hi there,
I’m developing on local – so I can’t provide login details

On the homepage I have a transparant menu and when I scroll down, it turns white.
So far so good but I have a problem with the other pages.
The menu is transparant but when scrolling down, they stay transparant (it doesn’t change color to white)
Any idea how to fix this?

Cheers

I have this in the global css

.x-navbar {
position:absolute;
width:100%;
height: 60px;
background-color:transparent !important;
box-shadow: none;
border: 0;
}
body.x-navbar-fixed-top-active .x-navbar-wrap {
height: auto;
}

.x-navbar-wrap {
height: auto !important;
}

.x-navbar {
background-color:transparent;
border:0;
box-shadow:none;
position: fixed;
width:100%;
}

.x-navbar-solid {
background-color:white;
}

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

and this in the global javascript

jQuery(function($) {
$(window).scroll(function(){
if($(window).scrollTop() >50) {
$(‘.x-navbar’).addClass(“x-navbar-solid”);
}else {
$(‘.x-navbar’).removeClass(“x-navbar-solid”);
}
});
});

jQuery(function($) {
$(window).scroll(function (event) {
var scroll = $(window).scrollTop();
if(scroll==0){
$(‘.x-navbar’).removeClass(‘x-navbar-fixed-top’);
}
});
});

jQuery(function($){
$(‘.smooth-scroll’).click(function(e){
e.preventDefault();

$(‘html,body’).animate({
scrollTop: $(‘#’ + $(this).attr(‘href’).split(“#”).slice(-1)[0] ).offset().top – $(‘.x-navbar’).height()
},700 ,’swing’);
});
});

[Paul R]

Hi,

You can add this under Custom > Edit global CSS in the Customizer.

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

Hope that helps.

[TheDude]

Ooh yeah baby….it works!!!!

Thanks

[Friech]

You’re more than welcome, glad we could help.

Cheers!

[Author]

Posts