[Resolved] Primary Navigation Background Color for Mobile

[Georgi]

It worked actually. In the hassle, I didn’t notice thae color was set to white.

I have put it this way:

@media (max-width:768px){
/* Mobile header bar */
    nav#mobile-header {
        background-color: white;
    }

nav#mobile-header .menu-bar-items span.gp-icon svg {
    fill:black;
}

Does it look good?

[Elvin]

Mind the syntax to be sure it doesn’t mess up the other CSS. 🙂

The one you’ve shared seems to be missing a } to close the @media rule.

@media (max-width:768px){
/* Mobile header bar */
    nav#mobile-header {
        background-color: white;
    }

    nav#mobile-header .menu-bar-items span.gp-icon svg {
        fill:black;
    }
}

But yeah, aside from the syntax issue, it looks good. 😀

[Georgi]

Thanks man, you’re awesome!

Actually I found later that there is an option in the customizer to set the background color for the offcanvas menu so I removed the manual CSS for that since its redundant (sorry). Since discovering this I realized its possible to add CSS to the existing @media rule so its more tidy:

@media (max-width: 768px) {
    .main-navigation.has-branding .inside-navigation.grid-container {
        flex-wrap: nowrap;
        background-color: white;
    }

    nav#mobile-header .menu-bar-items span.gp-icon svg {
        fill:black;
    }
}

So all good 🙂

[Elvin]

Nice one. No problem. Let us know if you need further help. 😀

[Chris]

Hello, I am having a similar issue:

1) Mobile menu background color I can get to change within inspect element but not by adding the CSS to the customizer. Could use some help with the CSS on this.

2) My sticky menu has a clear background (inherited from my merged header) but I am not having any luck with the background color to white on sticky.

Appreciate the help.
Websitewannabe.com

Thanks

[Ying]

Hi Chris,

Can you open a new topic as this topic is already closed 1 year ago?

Let me know!

[Author]

Posts