Site logo

Archived topic

Primary Nav Menu Color Mobile vs Desktop

7 replies · Started by Kevin Wabiszewski on January 19, 2019

Viewing posts 1–8 of 8

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?

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 :)

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

What about the actual menu item colors?

Keep them the same as what you have?

Let me know :)

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

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 :)

Worked great thank you!

No problem :)

This archived topic is closed to new replies.