Docs

[Steve C]

Hi guys,

I honestly didn’t want to bother you with this but I’m driving myself mad looking through various forum answers and trying them all…

Would you mind having a look for me and advising on what code works? I’d like a fixed navbar that becomes opaque with a white background when you scroll down the page.

I’ll attach URL in private msg next.

Many thanks,

Steve

[Steve C]

This reply has been marked as private.

[Lely]

Hello Steve,

Please add this custom Javascript on Appearance > Customize > Custom > Edit Global Javascript:

jQuery ( function($) {

$(window).scroll( function() {

if ( $(this).scrollTop() > 90 ) {

$('.x-navbar').addClass( 'x-navbar-fixed-top' );

} else {

$('.x-navbar').removeClass( 'x-navbar-fixed-top' );

}

});
});

On this line if ( $(this).scrollTop() > 90 ) { 90 is the scroll value where the white opaque background will appear. Adjust it accordingly.

Then add this CSS on Appearance > Customize > Custom > Edit Global CSS:

.x-navbar.x-navbar-fixed-top {
    transition: 0.2s all linear;
    background: rgba(255,255,255,.8) !important;
}

Hope this helps.

[Steve C]

Hi Lely,

That’s great, the only problem is that when I now scroll back to the top of the page the navbar doesn’t revert to it’s previous state?

Many thanks,

Steve

[Joao]

Hi There,

Would you mind providing us with login credentials so we can take a closer look? To do this, you can make a post with the following info:

– Link to your site
– WordPress Admin username / password

Don’t forget to select Set as private reply. This ensures your information is only visible to our staff.

Thanks!

[Steve C]

This reply has been marked as private.

[Joao]

Hi There,

I have updated (and saved by mistaked, ops!) your CSS to:

.x-navbar.x-navbar-fixed-top {
    transition: 0.2s all linear;
    background: rgba(255,255,255,.8) !important;
}

.home .x-main {
  margin-top: -100px;
}

And your Custom javascript to:

jQuery ( function($) {

$(window).scroll( function() {

if ( $(this).scrollTop() > 90 ) {

$('.x-navbar').addClass( 'x-navbar-fixed-top' );

} else {

$('.x-navbar').removeClass( 'x-navbar-fixed-top' );

}

});
});

And now it works fine.

Hope it helps

Joao

[Author]

Posts