[Support request] Menu item background color mobiles

[Bill]

I don’t see how to change the background color of a primary menu item that has an effect when viewed using the mobile preview. In mobile view when the menu item are displayed vertically they have a transparent background. The menu background only seems to affect the menu strip at the top of the window. Any ideas? Thanks, Bill

[Bill]

I am using the Mellow theme if that is significant.

[Bill]

This seems to target the right element.

.main-navigation li {
background-color: #0e0e0e;
}

But applying within @media (max-width: 800px) seems to only target the tablet view. How do I target mobiles only?

[David]

Hi there,

you can reduce the 800px to a smaller value eg. 600px.

[Bill]

Thanks – got it. The the preview window Table must be set to 800px, 799px works well. Is this a bug in the Colours module or a theme quirk? Everything else in terms of setting colours seems to work OK.

[David]

Glad to hear that.
This only happens when a Merged Header Element is being used – the navigation colors in the elements site header tab overwrite those in the Customizer. The current options are:

1. Set the Merge to Desktop only.
2. Use some CSS

[Bill]

Got it – Thank you.

[David]

You’re welcome

[Author]

Posts