Make header background transparent, and change to white on scroll

Store Design
, ,

Topic summary

A user seeks to create a transparent header that turns white on scroll for their Shopify store using Dawn theme version 12.0.0.

Solution Provided:

  • Custom CSS code targets the sticky-header element to set transparent background initially and white background when active/scrolling
  • JavaScript code (added to theme.liquid file above </body> tag) handles the scroll detection and applies the ‘active’ class
  • Screenshots demonstrate where to paste code in Shopify’s theme editor

Key Modifications:

  • To apply only on homepage: wrap JavaScript in Liquid conditional {% if template.name == 'index' %}
  • Users can adjust icon colors and other styling within the provided CSS

Current Status:
Multiple users confirmed the solution works successfully. A later user on Dawn 15 reports it doesn’t work and seeks a solution similar to fearofgod.com (transparent on homepage, opaque on other pages). Another contributor shares YouTube tutorial links as alternative resources. One user asks how to ensure the sticky menu background becomes white on scroll, suggesting potential refinement needed.

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

This worked perfectly, I could even tweak it a bit to change the icon color aswell, thank you!