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!

[DELONG_HUANG]

Hi,

I used option 1 but it looks like they are transparent, as you can see, if I move down, the header will be covered up by other contents. does anyone how to resolve this?

Thanks,

[diego_ezfy]

@DELONG_HUANG 

This solution fixes this issue.

Kind regards,
Diego

[tantsteven]

Hi there! I followed option 1 to add the sticky header, but I need to temporarily stop using the sticky header. When i comment out all the code I added for the sticky header in the theme.js and theme.scss.liquid and save, the header is still sticky on the published website.

[nurdin]

I've followed this tutorial for Option 1 and it worked. However, my banners on my pages are now cut off. Is there a way to fix this?

[Tanaya]

Hi!

I tried this and my menu bar has completely disappeared.

Can you help me to fix? Thanks!

[AustinK]

@Tanaya did you find a fix for this issue? I still can't manage to make it work. Thank you.

[seasonalguy]

Hi,

I like the solution but in my theme files there is no file named "theme.scss.liquid", I checked in every folder and I made a search.  So what can I do?

 

[ZeynepLir]

Thank you so much for your quick reply. Unfortunately, it did not work. Is there any other way? 

[GiraffeSports]

This tutorial is not working on the latest version of the Debut theme...

[leatheraholicx]

Hi @SeanP ,

I'm using debut theme but I don't have theme.scss.liquid file In the Assets folder.  Should I put relevant code in theme.css instead?  Thanks.

Thanks

Leatheraholicx

 

[eddyxv]

Please update the code to the latest version of the Theme. This is needed for easy navigation on a website. I can't understand why something so basic hasn't been implemented yet in the system. Even though the theme is "free", the plans for the services are expensive and the least we should have are the basic tools to make it look good for the client.

Example:

- An option to enable or disable a fixed navigation bar

- Be able to move the images when it's placed in a smaller frame

Thank you.

[SomedaySoon]

Hi, did you find a solution to the 'gap' problem?

[Rene234]

Hi! I have the exactly same problem, did you solved it?

[unikforce]

If you want it could be solved by the basic css and js with debut theme

[King-Kang]

Hi @diego_ezfy ,

Your solution fixes the problem! But still struggle with the search bar, when I scroll down the page, before open the search bar.

The search bar does not show, looks like it opens on the top of the page, and didnt stick...

Do you know what can be done, to fix this?

Best regards

[diego_ezfy]

Hey, @King-Kang 

Did you check the last part of the article regarding "fixing the page jumping bug"? It sounds like this could be the issue you're experiencing.

Anyhow, please feel free to reach out via our website's contact form with your email and website's URL so I can better assess the situation. I'll be happy to take a look into this for you.

Kind regards,
Diego

[King-Kang]

Thanks for the fast reply @diego_ezfy ,

When I removed the code to solve the jumping bug, it worked!

But the search bar is not showing when I hit to open it.

Looks like its opened in top, but you can't see it because you are in the middle or in the bottom of the page, like it didnt stick the search bar...

Best regards

[King-Kang]

I found that, what's not showing after scrolling down and press the search button is the following div

<div class="search-bar__interior">

The entire page becomes darker, just like when you open the search bar.

Any hints?

Thank you

Best regards

[diego_ezfy]

Hey, @King-Kang 

There may be some additional code in your specific theme that causes this behavior since it's not the default.
Kindly reach out to me via email/private message with the website URL so I can take a look into it and provide a solution.

Thank you.

Kind regards,
Diego

[King-Kang]

Thank you very much @diego_ezfy !

Working like a charm!