Sticky header that auto hides when scrolling down for Debut theme

Tourist
15 0 2

Hey everyone!

Couldn't find a simple way to do this anywhere on this forum, so we basically put together two pieces of coding to achieve a header/navigation bar (where the navigation menu and your logo is) that will stick to the top of the page ONLY if the user is scrolling up. If they are scrolling down, the sticky header will automatically hide itself. We've only tested this on the Debut them. There are two separate steps to do this.

1) Download 'hide-header.js' and 'jquery.sticky.js' and add them to your assets folder. You can do this by going to Themes page in your admin and click on Actions->Edit Code->Assets (on the left)->Add a new asset->Upload a file and choose the two files that you downloaded. Here is the link to the GitHub repository that contains these files.

https://github.com/justpea/Debut

2) Adding this snippet of code below '<!--[if lte IE 9]><script src="{{ 'theme.js' | asset_url }}"></script><![endif]-->' in your theme.liquid file.

<script src="{{ 'jquery.sticky.js'  | asset_url }}" type="text/javascript" defer="defer"></script>
<script src="{{ 'hide-header.js'  | asset_url }}" type="text/javascript" defer="defer"></script>

That's it! All credit goes to Marius Craciunoiu for 'hide-header.js'. You can find his original how-to here. And Anthony Garand for 'jquery.sticky.js'. You can find his GitHub repo here.

If you have another theme, you would just have to make sure that the snippet of code above is in the right place and edit 'hide-header.js' to control the right html element. It may not be called '.site-header' as it is in the Debut them.

Good luck!

Not all pea protein powders are equal. Learn more at JustPea.com.
1 Like
Tourist
15 0 2

You'll also want to go into 'theme.js' and comment out this line of code in the closeMobileNav() function.

// commenting this out because since the header is now sticky, we dont want to go back to the top of the page when you close the mobile nav
//scrollTo(0, 0);

 

Not all pea protein powders are equal. Learn more at JustPea.com.
0 Likes
New Member
7 0 0

GOOD

0 Likes
Tourist
15 0 2

Hi! Is it working for you?

Just to note, if you have the announcement bar enabled on ONLY the homepage (and not on other pages, this is a checkbox option for your header section), there is a slight glitch with the code that makes the sticky header flash when you scroll to the bottom of your other pages.

We're guessing it has something to do with the code calculating the height of the header based on the home page (which will be taller due to the announcement bar) and using that height on other pages. A workaround for this for now is to enable the announcment bar on ALL pages (exactly what we did) and keep that height consistent.

We'll keep everyone posted when we find the bug, and please feel fee to investigate for yourselves as well.

Cheers!

Not all pea protein powders are equal. Learn more at JustPea.com.
0 Likes
New Member
7 0 0

Hey, bro! Can I hire you to help me modify the Shopify theme?

0 Likes
Tourist
15 0 2

@opticsmfg we're flattered! But honestly, you really don't want us touching your code :D

We're learning as we go, you can definitely find more qualified people than us.

By the way, we've updated our GitHub repo with 'hide-header-v2.js'. The new code makes more sense for most people with Debut (with a relative position header) and has comments so it is easier to understand.

It doesn't fix the IE specific issue when you don't have an announcement bar on all pages, but we're not sure if that's because of a bug in the code. It may just be IE acting weird.

Not all pea protein powders are equal. Learn more at JustPea.com.
0 Likes
Tourist
8 0 2

Hello,

I'm trying to implement this but the link provided with the files returns a 404 message. Can you re-upload the files or provide a new link, please?

 

 

2 Likes
Tourist
15 0 2

Hey Mike!

The code should be back up! Give it a try and let us know how it goes!

Not all pea protein powders are equal. Learn more at JustPea.com.
0 Likes
Tourist
8 0 2

thanks Justpea!

0 Likes
New Member
1 0 0

Hey JustPea,

After searching for a solution like this for what seems like ages, I am so glad to have bumped into your fix. My issue has been because of Mailchimp pop-up integration. While on desktops it doesn't really pose an issue, on mobile devices the top part of the pop-up (which has the 'X' to opt out) stays behind the fixed nav bar  - meaning customers can't opt out if they want and they lose mobile screen real estate if they can't 'X' out. I think it hurt my conversions while I had the pop-up on. It is my belief that if I get the nav bar to hide when scrolling down, it'll do the trick.

Unfortunately I'm using the Supply theme instead of Debut and a few things detailed by you in step 2 don't add up. Could you help me out? Thanks!

0 Likes