Topic: header background different on mobile

zen_moves
November 15, 2023 at 5:53 pm

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.
Fernando
November 15, 2023 at 6:11 pm
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.
zen_moves
November 15, 2023 at 8:55 pm

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.
Fernando
November 15, 2023 at 9:31 pm
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;
}
```
zen_moves
November 15, 2023 at 9:51 pm

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.
Fernando
November 15, 2023 at 9:54 pm

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.

Are you a GenerateCustomer?

Just browsing?

header background different on mobile