Are you a GenerateCustomer?

Do you have an active GP Premium or GenerateBlocks Pro license key?

Create a GenerateSupport account for GeneratePress and GenerateBlocks support in one dedicated place.

Create an account
Already have a GenerateSupport account? Login

Just browsing?

Feel free to browse the forums. Support for our free versions is provided on (GeneratePress, GenerateBlocks).

Want to become a premium user? Learn more below.

header background different on mobile

  • I selected a header background color under Customize > Colors > Header > Background. It is showing the color I selected on my desktop. But when I look at the site on my phone, it is showing a different background color.

    Thank you in advance.

  • Hi Zen,

    When you have the Mobile Header active, which your site does, the color of the Mobile Header will follow the Primary Navigation color.

    If you want a different BG color for your Mobile Header, you can use a CSS like this for instance:

    nav#mobile-header {
        background-color: #ff0000;

    You can add this through Appearance > Customize > Additional CSS.

  • Hi Fernando,

    Thank you.

    I think I discovered the problem. It appears it wasn’t the css because even with the additional css, the problem was still there. It looks like the problem occurs when viewing the site on my phone using Samsung Internet (and my phone is using dark mode). Apparently, the browser automatically darkens lighter sites. In order to view it properly, I can click “light theme sites” when I am on the site, or I can change a setting on the browser that which will prevent the browser from darkening sites.

    I pulled up the site on my phone with Google Chrome and with Adblock Browser and this issue did not exist with either of those browsers– the site looked the same as on desktop without having to adjust any settings.

    Any suggestions on what to do so that people don’t have to adjust browser settings to view the site properly? The only thing I’m coming up with is to use a light logo with a dark background for mobile.

  • I see. If it’s your browser altering the colors, it may be impossible to override that. But, we can try with custom CSS. Example:

    nav#mobile-header {
        background-color: #ff0000 !important;
  • Thank you. That did not work. I looked at mobile browser usage statistics and the samsung mobile browser, while third most popular, is less than 5%. I’ll probably use a different color logo for mobile.

    Thank you for your help.

  • I see. It seems we can’t override it then. It’s weird that a browser would do that anyway.

    You’re welcome, Zen!

Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.