Make header disappear when scrolling down and reappear when scrolling up

Shopify Discussion
,
1

Hi!

I’m relatively new to shopify and trying to build my first e-commerce website.

Right now I made a transparent header where the background image is on top instead of the default header bar. What I want to do now is that the header disappears when I scroll down and reappears once I scroll up with the background color #da6620.

I implemented the transparent part in the theme.liquid file don’t know if this is right

.header-wrapper { position: fixed; top: 0; left: 0; width: 100%; background: transparent; border: none; z-index: 999; }

I also want it to be transparent only on my homepage as of right now it is transparent on every single page.

I’m using the Dawn theme!

Website link is shop.imaralabs.com and password is saykog

2

Already have this option selected but somehow it doesn’t change a thing

3

Hello @mfozing

  1. Go to Online store

  2. Customize active theme

  3. Header section right side option select option Always, screenshot attached.

iffikhan30_0-1702733191450.png
iffikhan30_0-1702733191450.png282×376 10.8 KB

If this information is helpful mark my answer approve. thanks

4

No this is not what the problem is about, we try to have the same concept as the header of https://eu.representclo.com
please provide us with a code so we can achieve this kind of effect too.

5

Hello @SHPFY48 ,

This is very simple think, in-fact by default dawn theme provide this option, anyway I inspect your website, there is lots of javascript code there, I want your access to check what your current theme, then I will tell you how much time take to this.

6

Hey @iffikhan30

I’m using the dawn theme in version 10.0.0
it would be a pleasure if you have a code for me to achieve the same concept as represents header.

7

Hello @SHPFY48 ,

As I told you earlier, If you are using dawn theme, they have built-in option in header. Steps are mention above.