Hi, I’m trying to make a header like the one on the https://fearofgod.com/ website. It’s transparent with a slideshow behind it, then it turns white when scrolling and it is sticky. Also, this is only on the homepage, the header is sticky and white on every other page.
I’ve found some discussions about this online but none of them worked.
Does anyone know how to do this? I’m using the dawn theme 15
Hi @SoulHarvest , Can you kindly share your store link (with the password protected, if any) with us? We will check it and suggest you a solution if possible.
Hi, Thank you for the help. my site is https://soulharvestshop.com and the password is thiagh
I followed some old tutorials and did manage to make the header transparent, but it doesn’t become white on scroll, and it doesn’t sticky. so it’s just transparent at the top. Because of that I’ve just undone all of it and reverted to a standard header with no CSS or anything. I have no CSS/HTML/JS experience so that’s why I’ve been looking and asking for help on these forums.
Hi @SoulHarvest ,
Step 1: Go to Shopify Admin → Online Store ->Theme → Edit code
Step 2: Search file theme.liquid
Step 3: Insert this code above tag:
Hope this can help you,
If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you 
Thank you! This worked exactly like the fearofgod site, thank you for your help!
@SoulHarvest , No problem. Have a good day
Edit: Just a note for anybody else seeing this and wanting to try it. This works on PC and android perfectly, it seems to bug out on iOS, not sure quite why (I’ve tried it on safari and brave browser on an iphone, the header is transparent and becomes white but it doesn’t sticky properly, it jumps around while you scroll)
Hi @SoulHarvest , i can’t access your site
Hi, I’ve changed the password to 123bird
Hi @SoulHarvest , Replaced my old code with this new code:
Hope this can help you,
If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you
Hi, I’m sorry for asking so many questions. I’ve tried this code and it does now work on ios also but I wanted to ask if there is a solution for this issue where the header covers stuff below it, i’ve attached a screenshot to show what i mean. The header goes a bit too low on both desktop and mobile, I understand if you are not able to help with this as you have already helped a lot! Thank you so much for everything anyways.
@SoulHarvest , Do you think we should only make the home page transparent? It would be better if we made all the pages whole. I see many guest websites only do it on their homepage
Yes I think only having that effect on the homepage would be good, so every other page has a normal sticky header.
@SoulHarvest Okay. So now I will give you the solution wait for me a moment. Thank you
Hi @SoulHarvest , Replaced my old code with this new code:
{% if template.name == index %}
{% endif %}
Hope this can help you,
If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you
Hi, I’ve added this code now but the effect has disappeared from the home page also, did I make a mistake? I pasted it in the theme.liquid file, here’s a screenshot of my file:
Hi @SoulHarvest , Insert this code above tag:
Hi, is this correct ? I’ve added this code in the section you mentioned but it doesn’t work
{% if template.name == index %}
.shopify-section-group-header-group.section-header.shopify-section-header-sticky sticky-header.header-wrapper { position: fixed !important; background-color: transparent !important; max-width: 100%; width: 100%; border-bottom: 0; top: 0 !important; } .shopify-section-group-header-group.section-header.shopify-section-header-sticky.scrolled-past-header sticky-header.header-wrapper { background-color: white!important; }{% endif %}
Hi @SoulHarvest ,
Can I send a collaborator access to your theme? Then I can check and directly add code to help your issue.
Please share your collaborator request code from the Users and permissions page.
The collaborator request code is 3605
