Topic summary
Goal: keep desktop header transparent while using a solid-colored header on mobile so the logo doesn’t get lost.
Solution: CSS added in theme.scss using a media query (max-width: 590px) to set .header-wrapper position: relative and .site-header background-color (initially rgba(66,66,66,0.89)). This achieved a solid mobile header.
Refinement: Mobile header changed to white (#fff) and menu/cart icons to black via CSS targeting the burger icon and cart under the same media query.
Issue: The burger icon remained white on the home page. The store was password-protected; access was provided. The fix was to change the burger icon styling from color to background, which resolved it. A screenshot was shared to illustrate.
Resources: A video tutorial link was provided for implementing a transparent header on scroll with minimal code and no apps. The video is central for step-by-step guidance.
Open items: A request to adapt this for the Crave theme v3.0.0 and a question on setting header transparency to 75–80% (opacity control) remain unanswered.
Notes: CSS media queries apply styles on small screens. RGBA sets color with opacity. The “burger icon” refers to the mobile menu icon.