Different Header Color

Shopify Discussion

Topic summary

A new Shopify store owner is experiencing inconsistent header background colors: white on desktop and black on mobile. They attempted to fix this by adding CSS code to Assets --> base.css, but the issue persists.

Troubleshooting attempts:

  • Initial CSS code applied to base.css did not resolve the problem
  • A suggested solution was tried but also failed to work

Proposed solution:
Another user (devcoders) provided a more structured CSS approach:

  • Navigate to Online Store → Theme → Edit code
  • Locate assets/base.css file
  • Add provided CSS code at the bottom, which includes:
    • Separate definitions for desktop and mobile views
    • Proper selector targeting for .header-wrapper.color-background-1.gradient
    • Media query for screens with max-width of 989px

Current status: The discussion remains open with no confirmation yet on whether the latest solution resolved the header color inconsistency issue.

Summarized with AI on November 7. AI used: claude-sonnet-4-5-20250929.
2

I applied your solution, but issue still persist.

Regards

shipiyfy_answer.png
shipiyfy_answer.png828×628 86.6 KB