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:
sticky-header element to set transparent background initially and white background when active/scrolling</body> tag) handles the scroll detection and applies the ‘active’ classKey Modifications:
{% if template.name == 'index' %}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.
Hi! I want to make my header background transparent, and then make it white once you start scrolling down. I already tried every single solution there is to find on this forum, and no line of code has worked on my page.
I’m using the Dawn 12.0.0 theme.
This is my page: https://43e44d-4.myshopify.com/
Hey @TeteiKamari ,
You can try adding the following code to the Custom CSS
sticky-header.header-wrapper.color-background-1.gradient {
background: transparent;
position: fixed;
width: 100%;
top: 0;
padding-top: 30px;
}
sticky-header.header-wrapper.color-background-1.gradient.active {
background: #fff;
padding-top: 0px;
}
Which should be here,
There’s javascript involved, so go to you online store, and click Edit Code as shown below, (Make sure you are in your current theme)
Then look for the file named ‘theme.liquid’ and add the follow code right above the tag that says as shown in the picture below
This is the code to paste
This worked perfectly, I could even tweak it a bit to change the icon color aswell, thank you!
hello how can i get this ONLY on the main page because now i got this on every page and the texts are mixed up, which doesn’t look right
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.
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
yes it worked thank u so much bro
Hi, I’ve tried your solution and it doesn’t work, I was wondering if this solution only works for an older version or something? I’m using Dawn 15. I’m trying to get a transparent header like the fearofgod.com website, where it’s transparent on the homepage but appears once you’ve scrolled. On their other pages, it’s opaque and follows you as you scroll. I’ve added the CSS and the Javascript that you reccomended to Ilhanakin. Thank you in advance
Follow these steps to make it transparent:
We can add trasparent header:
Hello MRamzan, thanks for the video and the codes worked perfectly! But how to make the sticky menu background be white colour when scroll down? Thank you!
