[Resolved] Mobile Header Background Color

[David]

Hi,

My mobile header background is appearing Black — when I have a color code specified (red) … Desktop works Fine (red)

See screen shot:

Mobile:
https://cl.ly/576e2805962e

Desktop:
https://cl.ly/071c409dc426

Please advise –

Thank you,

David

[Leo]

Hi there,

The mobile header color actually inherits the settings under Colors > Primary Navigation.

Give this CSS a shot if you want the mobile header color to be different than the menu item colors on mobile:

@media (max-width: 768px) {
    #mobile-header {
        background-color: #cc0000;
    }
    .main-navigation .main-nav ul li a {
        background-color: #0a0a0a;
    }
}

Adding CSS: https://docs.generatepress.com/article/adding-css/

Let me know 🙂

[David]

Hi,

Actually I’m trying to use the same exact color as the desktop version, so I thought it would simply reflect on mobile without any needed CSS code, but I see it is taking the background color from the NAV bar.

I’ll try your CSS code.

thanks,
Dave

[David]

Worked!

[Leo]

Awesome 🙂

[Author]

Posts