Mobile Brand Header button background colour not right?

Development
,

AI-generated summary

A user, soraiden, reported an issue with the mobile brand header button background color not displaying correctly, showing a different color on mobile compared to desktop. Jack51 shared a similar concern about the multiple “hamburgers” on mobile, suggesting it would be better to disable it for simplicity.

soraiden agreed to disable it temporarily. Johani identified the cause as custom CSS in the theme’s common section and provided a solution to either move the rule to the desktop section or modify it to target desktop views only. soraiden expressed gratitude for the solution.

1

My desktop version still looks stellar, but my mobile version has recently started displaying in this way. I know this was in the works for a future update, so it’s probably intentional. Is there a way to set my desktop background as one color and my mobile as another?

Desktop:

Screen Shot 2020-12-20 at 11.20.57 PM
Screen Shot 2020-12-20 at 11.20.57 PM1440×622 171 KB

Mobile:

IMG_7144.PNG
IMG_7144.PNG1125×2436 194 KB

2

I don’t have the color issue that you do on your left, but the multiple “hamburgers” isn’t ideal..

I would almost rather have it disabled from the mobile version. Granted, I’m a fan of absolute simplicity on mobile devices where every pixel counts.

3

Agreed. I might just disable it for now. Two hamburgers is looking very strange.

4

This is caused by some custom CSS you have in your theme. You have this in your light theme in the common section.

header.b-header {
  background-color: #378899;
}

The common stylesheet applies to both desktop and mobile. Either move that rule to the desktop section or change it to look like this.

.desktop-view header.b-header {
  background-color: #378899;
}
5

Ahhh, thank you!! Not all heroes wear capes. :raised_hands: