Transparant navbar with solid color when scrolling

Support
#1

Hi,
trying to make a transparent navbar when on top of the homepage (so the background image/slider is visible full screen) and then changing it to a solid colour (white in my case) when user starts scrolling down the page.
I found the code for a transparent navbar in topics before and I used this code:

Custom > CSS in the Customizer.

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

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

body.home .x-navbar-solid {
background-color:white;
transition: background-color 0.5s ease;
}

custom > javascript in the customizer

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

Transparent navbar is working fine, but only at the HOME page, what do I have to change to have it on all pages? Or what do I have to add to have it on some pages?

But the code for the color when scrolling down is not working at all.
What’s wrong?

This is my side: https://gomarx.de/

Thank you so much and all the best
Kerstin

Can you change header style as you scroll down page?
Transparant header overlaying first section
#2

Hi There,

Please update your custom CSS to this:

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

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

body .x-navbar-solid {
background-color:white !important;
transition: background-color 0.5s ease;
}

Let us know how it goes!

#3

Hi Thai,

it works perfect! Thank you so much!!!
All the best Kerstin

#4

On behalf of my colleague, you’re welcome. Cheers! :slight_smile:

#5

Hi,

one more question to this topic:

doesn’t look good on iPhone and iPad,
can you send me the code to hide this function on these devices ?

THANKS!!!

#6

Hi There,

Please replace the code provided by Thai with:

@media(min-width: 969px ) {

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

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

body .x-navbar-solid {
background-color:white !important;
transition: background-color 0.5s ease;
}}

Hope it helps

#7

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.