Hi there,
I would like to change my sticky header on the homepage to transparent, but when scrolling down it should go back to it’s normal background color which is black.
I would prefer this function to only effect the homepage, and for every other page it should remain it’s normal background color (black) without any transparency.
I also prefer the header to shrink when scrolling down as per theme settings.
1 Like
Hi @404virtues ,
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, @404virtues
Please share the store URL so that I can assist you.
Hi @404virtues ,
Step 1: Go to Shopify Admin → Online Store ->Theme → Edit code
Step 2: Search file theme.liquid
Step 3: Insert this code above tag:
{% 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 
You can try this code by following these steps:
Step 1: Go to the online store ->Theme ->Edit Code.
Step 2: Find the theme.liquid file and add the following code above the tag
{% if template.name == 'index' %}
{% endif %}
Hopefully it will help you. If yes then Please don’t forget hit Like and Mark it as solution!
1 Like
Hi @404virtues
Please add this code to your theme.liquid file, after in Online Store > Themes > Edit code
{% if template == 'index' %}
{% endif %}
1 Like
Thank you so much for the coffee! You’re very welcome.
I tried your code, but it split the header in half for some reason.
Thanks for the help though!
Hi Dan,
How do you make the logo and font white when the header is transparent? And then black when it scrolls with the white background? Would I need to upload a white version of my logo somehow? I have only uploaded a black font version in the logo settings. Also, how do I make this appear on all pages, not just the home.
Thanks
1 Like
Please share the link to your store so I can check?
Please add this code to theme.liquid file after
{% if template == 'index' %}
{% endif %}
1 Like
Thank you! That worked. How about the menu and anything else on the header? Could they also appear white on the transparent header and then invert to black on the white scrolling header?
Also, how can I make this show on every page? It’s only showing on the home page. And on the product pages, I’ve used code to make the images bleed the edge and top of page but how can I make the product information remain below the header so that only the image bleeds.
Thanks
Please update code
{% if template == 'index' %}
{% endif %}
The code I sent you worked for the homepage only. Please update code so it works on all pages