Docs

[Eric]

Hi I am trying to make my nav bar go solid as you scroll. I see hundreds of people with the same question and I have added your suggestions to the css and javascript and I have only found one CSS edit that works, but I can’t find any javascript edits that will make it go solid as you scroll down.

This is the CSS edit that made the nav bar transparent, would you be able to offer some advice on the JQuery to use?

body .x-navbar {
background-color: rgba(41,37,37, 0.0) !important;
}

body.x-navbar-fixed-top-active .x-navbar-wrap {
position: fixed;
z-index: 10000;
width: 100%;
}

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

.x-navbar.alt-color {
background-color: #333333;
}

[Eric]

This reply has been marked as private.

[Rad]

Hi there,

Thanks for posting in.

Please replace your provided CSS with this,

.x-navbar {
    background: transparent !important;
    transition: 0.2s all linear;
}
.x-navbar.x-navbar-fixed-top {
    transition: 0.2s all linear;
    background: rgba(41,37,37, 0.9) !important;
}

Then add this code to Admin > Appearance > Customizer > Custom > Javascript

jQuery ( function($) {

$(window).scroll( function() {

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

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

} else {

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

}

} );

} );

Hope this helps.

[Eric]

Hi! This kind of worked. It made the nav bar white but it does transition to #333333 when you scroll down. How do we fix the white part?

Thanks.

[Thai]

Hi There,

Try adding the following CSS under Customizer > Custom > CSS:

header.masthead.masthead-inline {
    position: absolute;
    width: 100%;
}

Hope it helps 🙂

[Eric]

Yes!

Thank you!

[Eric]

Hi one last little thing. How can I make the mobile nav button transparent as well?

[Thai]

Hi There,

Please add the following CSS:

a.x-btn-navbar {
    background-color: transparent !important;
    box-shadow: none !important;
}

Hope it helps 🙂

[Eric]

Nevermind. I got it!

[Eric]

Thanks! 🙂

[Thai]

You’re very welcome 🙂

[Author]

Posts