Sticky/Fixed Header and Navigation for Debut Theme

[SeanP]

Caution

This is an advanced tutorial and is not supported by Shopify. It is specific to an unedited version of the Debut theme, released 7th of March. We cannot guarantee results for themes that have been modified with custom coding and/or apps.

We suggest hiring a Shopify Expert if you are not comfortable proceeding with the following tutorial, or wish to make any variations to this tutorial. We would also advise making a backup of your theme.

Having a sticky header means that the navigation, logo, and icons will follow the user while they scroll down the page. This is really useful if you want to ensure that your customers will have easy access to your navigation at all times! Let’s take a look at how to implement this for the Debut theme.

Note

We recommend having your header set as Logo Alignment: Left. This is the default setting for the Debut Theme but it can be changed. To do this, you would need to open the Theme Editor.
On the left-hand side, click on the Header section and, from here, you will be able to change the alignment.

This is an important step, as the header will be shown on every portion of the page as you scroll. Setting the logo alignment to left will ensure the header takes up less space on the screen. We also can't ensure that the customization will work if this setting is not activated.

If you have an Announcement bar, and would like for it to not move with the rest of the header, please refer to option 2 of this guide.

OPTION 1 - STICKY HEADER

This will make the whole header sticky, including the announcement bar.

1. From your Shopify admin, go to Online Store > Themes.
2. Locate your Debut theme and then click Actions > Edit code.
3. In the Assets folder, open your theme.scss.liquid file.
   
   
4. Go to the very bottom of this file and paste the following code:
   
   

   #SearchDrawer {
     z-index:1001;
   }
   
   #shopify-section-header {
     position: fixed;
     z-index:1000;
     left:0;
     right:0;
     -webkit-box-shadow:0px 2px 4px 0px rgba(0,0,0,.1);
     -moz-box-shadow:0px 2px 4px 0px rgba(0,0,0,.1);
     -ms-box-shadow:0px 2px 4px 0px rgba(0,0,0,.1);
     -o-box-shadow:0px 2px 4px 0px rgba(0,0,0,.1);
     box-shadow:0px 2px 4px 0px rgba(0,0,0,.1);
     background-color: {{ settings.color_body_bg }};
   }
   
   #PageContainer {
     padding-top: 80px;
   }
   
   @media screen and (max-width: 749px) {
   #PageContainer {
     padding-top: 70px;
   }
   }
   

5. In the same Assets folder, click to open your theme.js file.
6. Go to the very bottom of this file and paste the following code:
   
   

   function headerSize() {
     var $headerHeight = $('div#shopify-section-header').outerHeight();
     $('#PageContainer').css('padding-top', $headerHeight);
   }
   
   $(window).on("load", headerSize);
   $(window).on("resize", $.debounce(500, headerSize));
   

7. Ensure that the code was copied exactly from this guide and pasted correctly, making sure no characters or symbols are missing.
8. Save the file by using the button on the top right-hand side.
9. Refresh your online store page and verify that the sticky header is working correctly!

And that's it! If you would prefer for the announcement bar to not scroll with the user, then you would need to follow the steps below.

OPTION 2 - STICKY HEADER WITHOUT THE ANNOUNCEMENT BAR

Note

In this section of the guide, we are assuming that you did not use the code above. If you have used it previously to make the whole header sticky, then you would need to revert your changes to make sure that you are working on an untouched theme.

1. From your Shopify admin, go to Online Store > Themes.
2. Locate your Debut theme and then click Actions > Edit code.
3. In the folder, open your theme.scss.liquid file.
   
   
4. Go to the very bottom of this file and paste the following code:
   
   

   #SearchDrawer {
     z-index:1001;
   }
   
   .site-header {
     position: fixed;
     z-index:1000;
     left:0;
     right:0;
     -webkit-box-shadow:0px 2px 4px 0px rgba(0,0,0,.1);
     -moz-box-shadow:0px 2px 4px 0px rgba(0,0,0,.1);
     -ms-box-shadow:0px 2px 4px 0px rgba(0,0,0,.1);
     -o-box-shadow:0px 2px 4px 0px rgba(0,0,0,.1);
     box-shadow:0px 2px 4px 0px rgba(0,0,0,.1);
   }
   
   #PageContainer {
     padding-top: 80px;
   }
   
   @media screen and (max-width: 749px) {
   #PageContainer {
     padding-top: 70px;
   }
   }
   

5. In the same Assets folder, click to open your theme.js file.
6. Go to the very bottom of this file and paste the following code:
   
   

   function headerSize() {
     var $headerHeight = $('div#shopify-section-header').outerHeight();
     $('#PageContainer').css('padding-top', $headerHeight);
   }
   
   $(window).on("load", headerSize);
   $(window).on("resize", $.debounce(500, headerSize));
   
   $(window).scroll(function() {
     scroll = $(window).scrollTop();
     if (scroll >= 1) {
       $('.site-header').css('top', '0');
     } else {
       $('.site-header').css('top', 'initial');
     }
   });
   

7. Ensure that the code was copied exactly from this guide and pasted correctly, making sure no characters or symbols are missing.
8. Save the file by using the button on the top right-hand side.
9. Refresh your online store page and verify that the sticky header is working correctly!

[Mike5241]

Hi OCS Professional,

Thanks a lot for your reply, you're a genius! I think you edited your initial message? Because I tried the code you first provided me with:

#shopify-section-header {

    top: 0;

}

.template-collection .page-container {

    margin-top: 6%;

}

and this one solved the issue about the collection page title, the issue still remained in the product page because I didn't see the top of the page and there was also the problem with the other pages such as the Contact Us page so I added this code:

.template-product .page-container {
margin-top: 6%;
}

.template-page .page-container {
margin-top: 6%;
}

and everything seems to be working now!

Thank you very much! You made my day!

[oscprofessional]

Hello @Mike5241 
You can mark it as an accepted solution

[Mike5241]

Hi OSC Professional,

Sure, no problem.

Would it make sense to change back your proposed solution to the one you first posted which solved my problem?:

#shopify-section-header {

    top: 0;

}

.template-collection .page-container {

    margin-top: 6%;

}

I'll be happy to mark it as accepted solution but I don't see this as an option when clicking on the Options button nor in the button with 3 dots, how can I do it?

Regards,

MP

[Mike5241]

Hi OSCProfessional,

Please let me know how to mark it as accepted solution.

Thank you,

MP

[knk1]

I was able to fix the header. Thank you very much.

Is it possible to make the shadow appear when I scroll the page a little?
I would like the shadow and line under the header to not appear when the page is first displayed, but to appear when the page is scrolled.

[Vertere]

I'm facing a problem with the position of the header when I scroll down. It appears a space on the top before the header, propably because of my language translator app. How can I solve it?  I used the first option.

https://tz8wxr76pxhcsmwl-25214786.shopifypreview.com

[LMvG]

Hi there,
I really like this solution. It was easy to implement but I seem to have the same issue as many others indicated with the header sliding under the navigation bar. Taking up a portion of my website and it does not return to normal. Part of my site is behind my header and I am unable to scroll up to the missing portion. It's also covering parts of my collection names, so it doesn't look great. Is there a solution for this?
Thanks for helping me out!

[CJTCoops]

I'm having issues with the search, cart, account icons moving to the far right of the screen. Did you have this issue in Debut theme?

[GG9]

Sorry for the late reply! I purchased a header through Ezfy which worked great. But I already switched to a new 2.0 theme, so it's not required anymore. I'd recommend switching to a 2.0 theme anyway.

[VictoriaCT]

Hi I know this is an old thread but I have used the code on debut theme it works great but I would like to change the colour of the header? Can anyone please help thank you so much 🙂

[James185]

Hi I have done all the coding but doesn't seem to work on the product page can you help.

The Header is covering some of the photo and title 

thanks James 🙂