Hide Header While Scrolling Down

Store Design
, , , , , , , ,
1

Hello!

I have the sticky header option active in my website but I want to hide the header while I’m scrolling down (both on mobile and desktop). This way, if I scroll down the header will hide and when I scroll up it will appear again.

Just like the nike website: www.nike.com

Ideally it should have a smooth animation rather than an instant hiding/appearing.

My theme is Stiletto and my website is: https://kv4bbbag5hlpi4gm-60150284501.shopifypreview.com

I would really appreciate some help folks!

2

Hi @martujv

Please add this code to your theme.liquid file, before tag in Online Store > Themes > Edit code
3

Hello, Dan! You can’t imagine how glad I am for your help. It works and it’s just like I wanted it to be! Thank you very much.

Just one thing, is there any way to add some sort of smooth 0.5s animation (an animation of the header coming down and up, depending if you scroll down or up), rather than it being an instant appearing / disappearing?

Thank you again!