Can you have a transparent web header and solid mobile background?

Store Design

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.

Summarized with AI on January 29. AI used: gpt-5.
6

You are welcome.
Just change rgba(66, 66, 66, 0.89) to #fff

And add this code

.header-wrapper.header-wrapper--transparent .burger-icon, .icon-cart {
  @media only screen and (max-width: 590px) {
     color: #000 !important;
  }
}