Transparent Header in Homepage only that transitions to sticky header upon scrolling down

Shopify Discussion
,

Topic summary

A user seeks to implement a transparent header that appears only on the homepage and transitions to a sticky header when scrolling, optimized for both desktop and mobile views. Previous community solutions either failed on mobile, lacked sticky functionality, or applied transparency across all pages.

Solution Provided:

  • Insert custom CSS code in layout > theme.liquid file (after </head>, before <body> tag, around line 300)
  • Uses conditional logic ({% if template == 'index' %}) to target homepage only
  • Successfully implements transparent-to-sticky transition on scroll

Follow-up Questions:

  • How to make header text white on transparent header without affecting other pages
  • How to display a white logo version on transparent header only
  • Request to add blur effect to transparent header for better visibility against background images

The initial issue is resolved, but users are now seeking additional styling customizations for the transparent header state.

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

Hi, I am looking to add a Transparent Header in Homepage only that transitions to sticky header upon scrolling down and only applies to homepage and is optimized for mobile view as well. I have tried different codes that was shared in the community but it either only works on Desktop view with no sticky header post scrolling, it doesn’t work on mobile view or it is transparent on all pages. Please help!

The theme I am using is Refresh theme

3

That worked! Thanks a lot!!

1 Like
4

This is great, it’s worked for my store too, but I have an additional question. How can I make the text white on the transparent header, without affecting the normal headers on the rest of the website?

I also would like to have a white version of my logo on the transparent header, again without affecting the rest of the website.

Is this possible?

6

Hi! That’s amazing thank you. Is it easy enough to create a version which slightly blurs the header too? Just so it stands out a bit more against the image background.

Thanks