Docs

[nlwebdesign]

Website: https://nlwebdesign.com

I have the header transparent currently on the homepage only, which is what I want. However, I need the fixed header on scroll to change the background to black. Only on the homepage.

Please help.

[Rad]

Hi there,

Thanks for writing in.

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

jQuery( function($){

$(window).scroll( function() {

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

$('.home .x-navbar').css({ backgroundColor : '#000' });

} else {

$('.home .x-navbar').css({ backgroundColor : 'transparent' });

}

} );

} );

Then please remove this existing CSS

.home .x-navbar {
    background: transparent !important;
}

and change this existing CSS

@media (min-width:979px){
.home .masthead.masthead-inline {
    position: absolute;
    width: 100%;
}

.home .x-navbar {
    background: transparent !important;
}
}

to this

@media (min-width:979px){
.home .masthead.masthead-inline {
    position: absolute;
    width: 100%;
}
}

In summary, you have added this CSS twice and they should be removed. Else, the above code will not work.

.home .x-navbar {
    background: transparent !important;
}

Then last, let’s add easing/fade effect by adding this CSS.

.x-topbar, .x-navbar {
    -webkit-transition: all 1s;
    transition: all 1s;
}

Cheers!

[nlwebdesign]

Looks Great! Thank you.

[nlwebdesign]

Wait! Now the page loads with the header background black instead of transparent. It’s only supposed to change once it scrolls. If I scroll and then go back to the top it becomes transparent, but it’s supposed to load the page starting as transparent.

Make sense?

[Christopher]

Hi there,

Please add this code :

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

Remove extra curly bracket from following code :

.hs-responsive-embed-youtube iframe {

position: absolute;

width: 100%!important;

height: 100%!important;

}
}

Close curly bracket for following code :

.x-nav #menu-item-1927 a {
    padding-top: 20px;

Hope it helps.

[nlwebdesign]

Yes, Thank you. Looks good.

[Joao]

Glad to hear it 🙂

[Author]

Posts