This worked too, thank you very much!
Unfortunately i can only mark one reply as solution though.
Topic summary
Problem: Custom Liquid used to give the header navigation a different color in the Whisper theme looked fine on desktop but broke on mobile. A media query to hide the .headercolor div on screens ≤768px didn’t resolve it. Images were shared to show the desktop vs. mobile issue.
Key details: Liquid is Shopify’s templating language; a CSS media query is used to apply styles only at certain viewport widths. The shared store URL was an admin link (not publicly accessible).
Proposed solutions:
- Centralize styling in base.css instead of custom Liquid/theme.liquid. Use a pseudo-element on sticky-header.header-wrapper.gradient (:after) to render the colored bar, set the header container to position: relative, and define menu item colors. Hide the :after element with a max-width:768px media query for mobile.
- Alternative fix by replacing the custom Liquid (exact code not shown), which also worked per the OP.
Outcome: The OP confirmed both approaches resolved the mobile issue. Thread resolved; only one reply can be marked as the solution.