Hello Shopify Community!
I’m currently working on a customization for my Shopify store’s header and could use some guidance. I’m inspired by the header style of the “livefastdieyoung” website and am aiming to replicate a similar functionality. Here’s what I’m trying to achieve:
-
Transparent Header on Top of the Page: I want my header to be transparent and seamlessly blend with the hero image when the page is initially loaded or when scrolled to the top.
-
Dynamic Header on Scroll: As the user scrolls down, I would like the header to completely disappear. However, when scrolling up, the header should reappear with an orange background color.
So far, I’ve managed to make the header disappear and reappear with an orange background, which is great. However, I’m facing a challenge with the transparency aspect. Ideally, the header should be transparent when at the top of the page. But currently, it displays the default background color of my color scheme instead of being transparent. It only becomes transparent when I scroll down slightly, which is not the intended behavior.
Thank you in advance for your help!
The first image is how the page looks like when I open it.
The second image is when I scroll down a little bit.
Also I’m using Dawn Theme Version 12.0
