[Resolved] Mobile Menu Issues

[Rachel]

I can’t use the mobile menu function because the header bar goes white and the logo and menu is no longer visible. So instead I am using the regular header for mobile but the drop down menu is too hard to read on the mobile version against the background image. I’d like to add some sort of overlay to add a background colour as an overlay but when I add it, it also applies to the desktop view.
How can I add this just to the mobile view?

Either that or get the mobile header working so the icons and menu is visible. Again just for mobile view.

[David]

Hi there,

try adding this CSS:

@media (max-width: 768px) {
    .main-navigation, .main-navigation ul ul {
        background-color: #fff !important;
    }
    .main-navigation .main-nav ul li a, .menu-toggle,
    .main-navigation .mobile-bar-items a {
        color: #000 !important;
    }
}

[Rachel]

That’s great, thanks!

[David]

You’re welcome

[Author]

Posts