How to change header from transparent, back to a normal filled background when scrolling

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.

Oh hey,

Here it is.

https://404virtues.com/

1 Like

Here it is. :victory_hand:

https://404virtues.com/

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 :heart_eyes:

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

Dan you’re amazing!

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?

Not sure if this is the right link? https://1crzwu-14.myshopify.com/?_ab=0&_fd=0&_sc=1

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 %}

That didn’t change anything sorry. Here’s the link to my store https://1crzwu-14.myshopify.com/products/prickly and here’s how I’d like it to look https://poppiepack.shop/products/post-coast-coffee-and-dip

1 Like

The code I sent you worked for the homepage only. Please update code so it works on all pages