Sticky/Fixed Header and Navigation for Debut Theme

SeanP
Shopify Staff
2 0 46

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.

12-00-q35ps-rsk5r

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.


11-29-y1xka-8hyx2

  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.

    03-39-badae-sysyp
  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.

    03-39-badae-sysyp
  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!
Replies 152 (152)
CptJack93
Tourist
8 0 6

Hi Sean,

Thank you for the instruction. I just have a small issue where the Menu and Header bar are covering the small top part of my photo banner. Look like the photo banner is not align with the bottom of the Menu bar. It would be really helpful if you can show me how to fix it.

Thanks

GG9
Excursionist
19 0 2

Fixing that jumping/scrolling down bug is simply impossible. I tried everything, changing padding, adjusting logo size and removing window.scrollTo(0, 0) from theme.js. The only way to fix it is removing this:

$(window).on("load", headerSize);

But then the header won't be at the correct position. Was anyone able to fix this?

MikeST1
Tourist
2 0 1

Yes, fixed entirely (Replying again).

diego_ezfy
Shopify Partner
2300 413 542

Hey, @GG9 

You may want to take a look into this tutorial, at the bottom of the article you will find out how to eliminate the fixing the page jumping bug.

The code we offer is different than the other ones presented in here (we use CSS' position:sticky instead of position: fixed to provide a seamless experience, some additional customizable options besides sticky-ness & full compability to Online Store 2.0), so the page jumping fix may not be compatible to others solution, but it's worth a try either way. I hope it helps you. 

Kind regards,
Diego

◦ Slideshow images cutting off? Try the Slideshow (PRO) section. No apps required. | Replace apps with copy/paste code snippets & save money. Examples here.
Mike5241
Tourist
14 0 2

Hi everyone,

Could someone please help me understand the following? I used the suggested code (thank you SeanP!!)  and the collection page in my Dell laptop was not showing the collection title, looking like this:

Mike5241_4-1634927617016.png

 

Part of the code provided is this:

#PageContainer {
padding-top: 80px;
}
@media screen and (max-width: 749px) {
#PageContainer {
padding-top: 70px;
}
}

I was under the impression that the first part is for desktop/laptop and the second part for mobiles but the only way I managed to fix the problem was by changing the media screen section from 70px to 90px and now the web page in my laptop computer looks like this:

Mike5241_3-1634927586808.png

So I'm confused about the code above, I'll be greatful if someone can explain why I need to change the media section above to fix the issue in my laptop's screen.

One more question, the product pages show a capital F at the top left corner like this:

Mike5241_5-1634927787945.png

Most probably I typed an extra F somewhere in the code, which of the liquid or css files should I look at?

Thank you very much in advance.

MP

 

 

Mike5241
Tourist
14 0 2

Hi everyone,

This liquid code is really doing crazy things. I added the following section at the end of theme.css to change the color of the collection header:

/*===== change color of collection and page titles ====*/
.template-collection header.collection-header h1 {
color: #18B2B9;
}
.template-page .section-header h1 {
color: #18B2B9;

And this extra code somehow created again the issue I mentioned above about the collection title not showing in my laptop so I removed the code above but for some reason the problem about the collection title not showing is still there, it doesn't make sense, right? I mean, everything was working, I added the code above which broke something, I removed the code, saved and the problem is still there, I cleared the cache and cookies and the page behaves as if I left the code, could someone please explain what's going on with this liquid code? What I'm describing doesn't make any sense but trust me, it's happening. Please make my day.

Thanks a lot!

Thank you 

oscprofessional
Shopify Partner
9201 1563 1928

Hi @Mike5241 
Kindly share your store URL so that i can a have look at the problem you are facing

If helpful then please Like and Accept Solution. Want to Speed up your Shopify Website Guranteed result Whats app
| Hire us
| Expert Site Speed Optimization | Performance Site Audit | Shopify Private App | Custom Theme Development & Modifications any Shopify Theme | Shopify SEO | Digital Marketing
For Quick Chat | Email: pallavi@oscprofessionals.com | Skype : oscprofessionals-87
Mike5241
Tourist
14 0 2

Hi OSC Professional,

Thanks for replying, the URL is the following:

https://ecokidsland.myshopify.com/collections/moles

The collection title looks ok in my iPhone, the issue is only on my laptop.

As I said, everything was ok this morning, I just added the code to change the color of the collection title, the title was not showing again, I removed the code to change the color and the problem remained, this is crazy! Is there a logical explanation to this?

Regardless of this illogical thing, the following might give you a clue, if I resize the browser to a narrow window the collection title appears and the quick links section is small, but as I enlarge the browser all of a sudden the complete quick links section shows and seems to push the collection page upwards which causes the collection title to not show because it's behing the page header, does that help to explain something?

Thank you in advance!

oscprofessional
Shopify Partner
9201 1563 1928

I have gone through your store.
You can try this code

 

#shopify-section-header {
    top: 0;
}
@media screen and(min-width: 991px){
.template-collection .page-container {
    margin-top: 10%;
}
}

 

 

If helpful then please Like and Accept Solution. Want to Speed up your Shopify Website Guranteed result Whats app
| Hire us
| Expert Site Speed Optimization | Performance Site Audit | Shopify Private App | Custom Theme Development & Modifications any Shopify Theme | Shopify SEO | Digital Marketing
For Quick Chat | Email: pallavi@oscprofessionals.com | Skype : oscprofessionals-87
Mike5241
Tourist
14 0 2

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!