[Resolved] Primary Nav Menu Color Mobile vs Desktop

[Kevin Wabiszewski]

Hello, in the customizer I’m trying to make it so the primary navigation background is red with white font on desktop, then a white background for mobile like how it is now, but when I click on the desktop icon in the customizer and change the color it seems to override the mobile settings. Is there a way to fix this?

[Leo]

Hi there,

I’m not quite sure what you mean.

There are no mobile specific settings for the Colors module currently.

If you are referring to the toggle at the bottom right corner of the customizer, they are actually just WP built-in preview feature.

Can you use the customizer setting to set up what you want on desktop, then I can give you some CSS to change it on mobile?

Let me know if I understood this correctly 🙂

[Kevin Wabiszewski]

Hey Leo, I appreciate that. Here is a screenshot of what I hope it looks like on mobile https://snag.gy/3R4Coc.jpg

[Leo]

What about the actual menu item colors?

Keep them the same as what you have?

Let me know 🙂

[Kevin Wabiszewski]

Yeah that would be fine I can always change the colors later!

[Leo]

Give this CSS a shot:

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

Let me know 🙂

[Kevin Wabiszewski]

Worked great thank you!

[Leo]

No problem 🙂

[Author]

Posts