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.
5

Hey @ilhanakin ,

Replace the same two codes with these.

For this one,

Go to your theme’s “Edit Code” Option, then in the search bar type “theme.liquid”
Below the tag “” tag paste the following.

{% if template.name == 'index' %}

{% endif %}

Screenshot is for reference only, the correct code to paste is the one shown above.

ThePrimeWeb_0-1714311024393.jpeg
ThePrimeWeb_0-1714311024393.jpeg1253×933 87.9 KB

Then look for the file named ‘theme.liquid’ and add the follow code right above the tag that says 

{% if template.name == 'index' %}
    
{% endif %}

Screenshot for reference

ThePrimeWeb_1-1714311046987.png
ThePrimeWeb_1-1714311046987.png1094×799 153 KB

2 Likes