Mobile Header Background Color

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

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

Worked!

Awesome :)