Sticky header menu auto hide when scroll down.

Highlighted
New Member
9 0 0

Currently I have a sticky header in my shop I would like the navigation pane to auto hide when i scroll down. can someone help with the code?

 

 

0 Likes
Highlighted
Shopify Partner
892 184 209

Hello,

Follow this example https://codepen.io/tutsplus/pen/WNerWWp 

thanks

Want to modify or custom changes on store hire me.
My Email: guleriathakur43@gmail.com
Skype: navrocks1
If helpful then please Like and Accept Solution.
If you are happy and want to donate small Click here (Its my paypal)
0 Likes
Highlighted
Shopify Partner
4856 716 1544

@Jermm 

Welcome to the Shopify community!
Please share your site URL,
So I will check and provide a solution here.

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
0 Likes
Highlighted
New Member
9 0 0

Dierenseizoen.nl

0 Likes
Highlighted
Shopify Partner
55 9 11

Hi you can add this jquery code to add active class, its best way is to see if your page is down more than 100px,

 

$(window).scroll(function() {
    if ($(window).scrollTop() > 100) {
        $('header.site-header').slideUp(200);
    }
    else {
       $('header.site-header').slideDown(200);
    }
});
I tested, it with your site, these classes are good to go, you can add script to your header or footer.
Let me know if you need further assistance with it.

 

If helpful then please Like & Accept Solution. | Buy me a coffee
Customizing Store or upgrading with custom functionality - Hire Me

Feel free to contact me on rrrobin@yahoo.com regarding any help regarding
Shopify Customization | Automation of Tasks | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Functions into Shopify.
0 Likes
Highlighted
New Member
9 0 0

Which template or asset do i need to add the code ?

0 Likes
Highlighted
Shopify Partner
55 9 11

You can include it at the end of theme.liquid before end of body tag or  footer.liquid

<script type="text/javscript">
$(window).scroll(function() {
    if ($(window).scrollTop() > 100) {
        $('header.site-header').slideUp(200);
    }
    else {
       $('header.site-header').slideDown(200);
    }
});
</script>
If helpful then please Like & Accept Solution. | Buy me a coffee
Customizing Store or upgrading with custom functionality - Hire Me

Feel free to contact me on rrrobin@yahoo.com regarding any help regarding
Shopify Customization | Automation of Tasks | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Functions into Shopify.
0 Likes
Highlighted
New Member
9 0 0

Sorry for the late reply , i added te code bbut nothing happend.

0 Likes