Transparent Header Problem

Store Design
, ,

Topic summary

A user seeks to create a transparent header that transitions to white on scroll (sticky) for the homepage only, similar to fearofgod.com, while keeping headers on other pages white and sticky by default. They’re using Dawn theme 15.3 on their Shopify store.

Solutions provided:

  • Enable sticky header via Theme Customizer (Header section settings)
  • Add custom CSS to theme.liquid file targeting the homepage template specifically
  • CSS code snippets were shared to achieve the transparent-to-white scroll effect

Issue encountered:

  • After implementing the first solution, a white bar appeared between the announcement bar and header block
  • The removal of this white bar remains unresolved in the thread

The discussion includes code snippets and a screenshot demonstrating the sticky header settings location, but the conversation appears ongoing as the white bar issue needs addressing.

Summarized with AI on October 31. AI used: claude-sonnet-4-5-20250929.
4

If you’re looking to create a header similar to the one on https://fearofgod.com/ using the Dawn theme 15.3, here’s how you can achieve it:

Steps 1: Enable sticky header- Go to Online Store → Themes → Click Customize.

  • Select the Header section.
  • Check “Enable sticky header” and click Save.

oscprofessional_0-1741693453048.png
oscprofessional_0-1741693453048.png1907×945 157 KB

Steps 2: Add css for a transparent-to-white effect

For a transparent-to-white effect on the homepage, add this CSS in theme.liquid before :

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

Steps 3: Save and check!