Nav Menu background color change from dark to light

The default nave menu turns into a dark background after scroll. I would like to change this to a light color after scroll. Any help would be appreciated.

Hi,

Please add the css code below using custom css plugin to change the nav bar when the page scrolled:

.site-header.header-scrolled {
    background-color: orange;
}

Hey this code worked great but I forgot about the drop down menu. When you hover on the menu the drop down is still dark. What code would fix that?

Hi there,

Here is the CSS code to change the sub-menu background color:

.site-header.header-scrolled ul li:hover > ul {
    background: orange;
}

This code is almost what i’m looking for, how can i make it work only on mobile and not also on the “normal” site?

Hi @gdeboer,

Add this CSS code please:

.slicknav_nav {
    background-color: orange;
}
.slicknav_nav .sub-menu {
    background-color: red !important;
}

Regards,
Awan

sorry maybe i was not clear enough in my question. i want not that my menu get other colours but when i scroll my site down on a phone, the header is changing from black to white, but then my logo and menu almost disappear. so i need the css code like this one:

.site-header.header-scrolled {
    background-color: orange;
}

but then only working on the phone view and not on the normal view

Hi @gdeboer,

The .slicknav_nav is the CSS rule for mobile display, whereas the .site-header.header-scrolled is for desktop/normal view.

Both code snippet in above should works for the mobile and desktop screen.
Can you share your site URL here? maybe I need to check your site directly.

Regards,
Awan

mijnkerk.baptistensteenwijk.nl/testversie

the problem is on all mobile pages with the exception of the homepage

Hi @gdeboer,

My apologize, I still can’t understand enough about your questions. Did you mean that you want the top bar in mobile screen (logo, site title and menu button) to always displayed when you scroll the page? if yes, you can use the CSS code below:

#masthead.site-header.header-scrolled{
    position: fixed !important;
    background-color: orange;
}

Or use this if you want the top bar keep displayed for non homepage:

body:not(.home) #masthead.site-header.header-scrolled{
    position: fixed !important;
    background-color: orange;
}

Regards,
Awan

when you go on a phone to http://mijnkerk.baptistensteenwijk.nl/testversie/samenkomst/ you see when you scroll a little that the background of the header is changing from black to white, but then the logo and the menu almost disappears, that’s the problem ;).

On the pc version it also change from black to white but then also the logo and menu change from color, that’s okay.

so a brief summary: how can I prevent that on the mobile version the background color change from black to white.

I hope you now understand what I mean :wink:

I see… Try add this CSS code please:

.site-header.header-scrolled {
    position: fixed !important;
}
.slicknav_menu .slicknav_menutxt {
    color: black;
}

then replace your custom CSS code:

@media only screen and (min-width:1025px){
  .header-scrolled .site-branding a{
    display: inline-block;
    width: 370px;
    height: 70px;
    background-image: url('http://mijnkerk.baptistensteenwijk.nl/testversie/wp-content/uploads/2017/04/logo450x80.png');
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center;
  }
  
  .header-scrolled .site-branding a img{
    display: none;  
  }  
}

with this:

.site-header.header-scrolled .site-branding a {
    background-image: url(http://mijnkerk.baptistensteenwijk.nl/testversie/wp-content/uploads/2017/04/logo450x80.png);
    background-size: 100%;
    background-repeat: no-repeat;
    display: inline-block;
}
.site-header.header-scrolled .site-branding a img {
    visibility: hidden;
}

It almost solved the problems.

but,
On the homepage the background stays black.
and on all pages the slicknav_menutxt is now also black on the black background.

Hi,

please add this:

.site-header.has-header.header-scrolled{
    background-color: rgba(255, 255, 255, 0.9);
}

and from my last code in above, please replace this:

.slicknav_menu .slicknav_menutxt {
    color: black;
}

with this:

.site-header .slicknav_menu .slicknav_menutxt {
    color: white;
}
.site-header.header-scrolled .slicknav_menu .slicknav_menutxt {
    color: black;
}

Regards,
Awan

Thanks this fix is great!