[Resolved] changing mobile header BG colour

[Timothy]

Hi Team,

Need help on changing the bg colour when I enable the mobile header.

I have a white logo with a dark bg colour in my header. However, when I enable the mobile header the BG colour turns into white. Is there any workaround that I can use so that my header bg and mobile header would be the same.

just like this site that i came across

thanks

[Leo]

Hi Tim,

Thanks for opening a topic 🙂

Any chance you can link me to the site quickly?

[Timothy]

I added the link on my first post.

Let me know if you were able to see it.

Thanks,
Tim

[Leo]

Yup I can.

Are you only wanting to change the mobile header color or the navigation color when it opens up as well?

Let me know 🙂

[Timothy]

I’m fine with navigation colour, just the mobile header colour so that the logo will appear.. 🙂

[Timothy]

btw if you could also change the word Menu and icon into white so that it will show when the mobile header bg is dark.. :))

[Leo]

Try this CSS:

@media (max-width: 768px) {
    .mobile-header-navigation {
        background-color: #383736;
    }
    .main-navigation .main-nav ul li a {
        background-color: #ffffff;
    }
    button.menu-toggle,
    button.menu-toggle:hover,
    button.menu-toggle:focus {
        color: #ffffff;
    }
}

Adding CSS: https://docs.generatepress.com/article/adding-css/

[Timothy]

THANK YOU LEO!!!! YOU’RE AWESOME……..

[Leo]

Glad I could help 🙂

[Timothy]

hi Leo,I just recently notice that the hamburger logo color change when active.

plus the sub category bg color also change..

[Tom]

I just adjusted Leo’s CSS above – can you try again?

[Timothy]

As always Awesome Tom.

One last thing. I added the social icon floating on the right on my main nav. but i having issue with their bg colour as well and i decided to not show it while in mobile view. is that possible.

Many thanks..

[Justin]

I just stumbled across this and it fixed my problem except for one detail, the search button is not affected. I’ve tried several things to change the color of the search button, but can’t seem to get it right. Any idea what I need to do?

[Leo]

Can you link me to the site in question?

Feel free to open a new topic if you want to use the private URL field.

[Author]

Posts