How to hide the header navigation bar on scroll in Shopify theme?

Store Design
,
1

Hi shopify forum, looking for a code that hides the header navigation bar when scroll down but wen u scroll up it shows itself again

2

so basically a non stick header, but will stick when u scroll up

3

Hello @eden73 ,

It’s GemPages support team and glad to support you today.

Could you please share your store URL ( with the password if your store password is enabled ) then I can see and suggest something for you?

Best regards,
GemPages Support Team

4

I sent you a pm

5

Hello @eden73 ,

I would like to give you the recommendation to support you so kindly follow the steps below:

  1. Go to Online Store > Theme > Edit code of your current theme

GemPages_0-1670814106050.png
GemPages_0-1670814106050.png1857×907 102 KB

  1. Open your theme.liquid theme file

  2. Paste the below code before

For example,

GemPages_1-1670814240142.png
GemPages_1-1670814240142.png1910×908 78.9 KB

  1. Paste the below code before

For example,

GemPages_2-1670814404175.png
GemPages_2-1670814404175.png1915×901 80.6 KB

If you require any further information, feel free to contact me.

Best regards,
GemPages Support Team