Re: Sticky/Fixed Header and Navigation for Debut Theme

Sticky/Fixed Header and Navigation for Debut Theme

SeanP
Shopify Staff
2 0 47

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!

To learn more visit the Shopify Help Center or the Community Blog.

Replies 160 (160)

mannyb12
Tourist
5 0 6

Is there a way to do this in the Narrative Theme?

TanCloths
Visitor
1 0 0

I am using Narrative theme. And it's pretty easy to this in that theme. Just follow the steps mentioned above.

kwaris
Tourist
7 0 0

good to see

diego_ezfy
Shopify Partner
2969 571 915

@kwaris @AustinK @rahulmittal79 

You may want to give a try to this solution if you're still having trouble with it. 

Kind regards,
Diego

Rabbie
Shopify Partner
8 0 1

Awesome tutorial! 

 

I do have a little problem though.... after I scroll down the page and then back to the top, the top bar covers the content underneath it. 


if that makes sense.... 

aliceO
Visitor
2 0 0

Hei! I have the same problem. Did you find the solution?

Rabbie
Shopify Partner
8 0 1

No, not as yet... 

SeanP
Shopify Staff
2 0 47

Hi Rabbie and Alice,

 

My guess would be that the code that is being used is coming from Option II of the guide, and not Option I. The code in Option II will _only_ work correctly if the announcement bar is enabled.

If the announcement bar is not enabled, then it might create the behaviour that you are seeing. Could you please make sure that you are definitely using the CSS and Javascript from Option I of the guide, and not Option II?

 

Please keep in mind that this tutorial is strictly for the Debut theme and will not work for any other themes. 

 

Let us know!

Sean

To learn more visit the Shopify Help Center or the Community Blog.

Rabbie
Shopify Partner
8 0 1

Ahh so I am using the Pt 2 code but with the bar dissabled in the theme.... 

aliceO
Visitor
2 0 0

Same here!

It's working now. Thank you!

Rabbie
Shopify Partner
8 0 1

So I have enabled the announcement bar but the announcement bar is still there... 

LuisFelipe
New Member
4 0 0

iquid error shopify: could not find asset snippets / cart-popup.liquid ... is appearing on every page of my site .... what is this? Debut theme

User123
Visitor
2 0 1

Yes, I have that same issue,

 

Does someone have a solution?

unitech456
Visitor
2 0 3

At the bottom part of the code that goes into the theme.css.liquid there is the line of code called #page container {padding-top:80px;

The number 80 is what needs to be changed. For my case I changed the number 80 to 107. Let me know if that works

#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;
}
}

 

User123
Visitor
2 0 1

Unfortunately it didn't work out, but thanks anyway!

wmwm
Shopify Partner
23 2 14

Hi Sean,

Thank you for this tutorial. I am having the same problem as the users above except that I am using Option 1 -AND- I have the announcement bar enabled. The header and announcement bar stick to the top of the site and look great, but now the rest of the page content starts at the top of the page underneath the header. Any ideas how to move the page content down to begin underneath the header? Thanks!

wmwm
Shopify Partner
23 2 14

I should add that I am also seeing the following error in my browser's debugger:

 

$(window).on("resize", $.debounce(500, headerSize)); <<<<<<<<< [$.debounce is not a function.]

 

Is there some library I'm missing here? I've copied the code exactly.

 

Thank you!

Silverclouding
Shopify Partner
96 14 28

hi @SeanP 

We seen all the comments and code , but all the codes may be not full-fill your needs .

We provide you a very simple code for "Debut" theme .

Any way here the code 🙂

 

 <script>
      //announcement bar 
      $("[data-section-id = header]").css({"position":"fixed","z-index":"99999","width":"100%","top":0,"background-color":"#f8f8f8"});
      var header_height = $("[data-section-id = header]").height();
      $("#PageContainer").css("margin-top",header_height);
  </script>

Before you add the code please remove all the previous code what you use for it .

 

After remove Previous code, you add our code before the closing </body> tag.

Please see the ref: screenshot

sticky-header.png

This code is tested. Here the preview link https://vuj4ixbxw35vpnro-29765088.shopifypreview.com

 

Thank you 

wmwm
Shopify Partner
23 2 14

I am using Minimal theme and the code above did not seem to work properly for me, although I do see that it works well on the sample site provided. So take that as you will. I also prefer the slight drop shadow that Sean's original code gives to the header, so I wanted to find a way to make the original code work with my theme.

 

Here is a solution I came up for Sean's / Shopify's sticky header code that works on my site. I'm not a professional developer, so buyer beware. 

 

1. In the theme.js code, replace

$('#PageContainer').css('padding-top', $headerHeight);

with

$('.main-content').css('padding-top', $headerHeight);

2. In timber.scss.liquid, locate

.main-content {
  display: block;
  margin-top: $gutter * 2;
  padding-bottom: $gutter * 2;
}

and add a line for padding-top with some hard-coded placeholder pixels

.main-content {
  display: block;
  margin-top: $gutter * 2;
  padding-bottom: $gutter * 2;
padding-top: 180px; }

Mess around with the "180px" number to find a padding that works for your site/header. This is just a placeholder to make sure the content loads immediately some place below the header before the javascript has a chance to kick in and calculate the actual padding required by your specific header. Before I added this second step, the site would immediately load with content behind the header and then after a second or two the content would be pushed down to the correct position. By making both these changes, the content will load in a way that is not disruptive to the user. I'm assuming it's not good to have such a hard-coded pixel value for padding-top, so this is a hybrid solution that holds the page content in roughly the right place while javascript comes up behind and changes it into a more precise number in the spirit of adaptivity.

 

Again, I'm not a professional developer and maybe a professional developer can offer some advice or improvements. But so far this is working well for me on both desktop and mobile.

Silverclouding
Shopify Partner
96 14 28

hi


@wmwm wrote:

I am using Minimal theme and the code above did not seem to work properly for me, although I do see that it works well on the sample site provided. So take that as you will. I also prefer the slight drop shadow that Sean's original code gives to the header, so I wanted to find a way to make the original code work with my theme.

 

Here is a solution I came up for Sean's / Shopify's sticky header code that works on my site. I'm not a professional developer, so buyer beware. 

 

1. In the theme.js code, replace

$('#PageContainer').css('padding-top', $headerHeight);

with

$('.main-content').css('padding-top', $headerHeight);

2. In timber.scss.liquid, locate

.main-content {
  display: block;
  margin-top: $gutter * 2;
  padding-bottom: $gutter * 2;
}

and add a line for padding-top with some hard-coded placeholder pixels

.main-content {
  display: block;
  margin-top: $gutter * 2;
  padding-bottom: $gutter * 2;
padding-top: 180px; }

Mess around with the "180px" number to find a padding that works for your site/header. This is just a placeholder to make sure the content loads immediately some place below the header before the javascript has a chance to kick in and calculate the actual padding required by your specific header. Before I added this second step, the site would immediately load with content behind the header and then after a second or two the content would be pushed down to the correct position. By making both these changes, the content will load in a way that is not disruptive to the user. I'm assuming it's not good to have such a hard-coded pixel value for padding-top, so this is a hybrid solution that holds the page content in roughly the right place while javascript comes up behind and changes it into a more precise number in the spirit of adaptivity.

 

Again, I'm not a professional developer and maybe a professional developer can offer some advice or improvements. But so far this is working well for me on both desktop and mobile.


Above code absolute perfect . 

We provide that code for debut theme . If there you change the selector that code will also work perfect.

For that pushing effect you need to add initial padding-top in css.

SCMCF
Visitor
1 0 0

Code works great, just would like to remove it from the cart page as it is blocking my upsell. 

 

Thanks in advance. 

 

Vicman
New Member
4 0 0

If a menu with sub menu is longer than a phone screen you cannot see all the menu. Is there a bit of code that I can use to turn off Sticky/Fixed Header  when viewed on phones. Thanks in advanced. 


jtan
Trailblazer
158 4 24

does anyone else get an issue with their cart when the header is sticky. 

When i open the side cart the frozen header cuts off the top of the cart. 

 

Anyone find a work around

 

Untitled.png

oscprofessional
Shopify Partner
16116 2409 3126

Hello ,

Please share your site url.

So that i can check and let you know the exact solution here.

Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: [email protected] | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing | Oscp Upsell & Cross sell App : Free | Oscp Sales & Volume Discount App : Free | Custom Pricing Wholesale App : Free
jtan
Trailblazer
158 4 24

i found a work around but thank you for the help

nikola95
Visitor
1 0 0

.............

Iman_HYV
Tourist
33 0 2

Hi guys,

Any reason why the header isn't sticky on desktop?

Also on mobile, it looks like the header isn't pushing down the rest of the page beneath it –– more so just cutting it off. How do we fix that?

https://sounds-of-crenshaw.myshopify.com/

Password is aoffaw

antonkogan
Excursionist
30 1 8

great code ty

MinusH2O
Visitor
1 0 1

Here's the fix to the Header covering the contents of the Body of the page.

You need to increase the space between the Header and the Body of the page. I found that this can be adjusted by changing the values in the code above (see my example below in bold) which had acceptable results for my site. Note that the top value changes the desktop version of the theme and the value below changes the mobile version.

 

#PageContainer {
padding-top: 130px;
}

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

 

 

rumirei
Tourist
3 0 1

thanks for posting @MinusH2O . I changed the values you gave to the following to fix the header on my page. 

 

#PageContainer {
padding-top: 201px;
}

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

rahulmittal79
Visitor
3 0 0
I do have a little problem though.... after I scroll down the page and then back to the top, the top bar covers the content underneath it.
banned
Craftbierbox
Tourist
11 1 0

Hi Sean or anyone who can help.

Thanks for the detailed solution, which is very helpful...and now comes the however. I cannot find the under Assets mentioned file /theme.scss.liquid
I've looked at other posts and found out that the file may be named css.theme (no s at the beginning and no .liquid at the end)  and accordong to the authors, that should also do the job.
So I pasted the code at the bottom of the file and then the second block of code in the Assets theme.js. file and it still doesn't work. I've made sure the Logo is aligned left before atarting the c.n.p action.

Any suggestion?

Thanks

Neil

 

UPDATE ...I read on until I found a suggestion from  Silverclouding Shopify Expert. This seems to have solved the issues. So thanks and I'll close this message

Regards

85 14 21

 

 

Silverclouding
Shopify Partner
96 14 28

hi @SeanP 

We seen all the comments and code , but all the codes may be not full-fill your needs .

We provide you a very simple code for "Debut" theme .

Any way here the code 🙂

 

 <script>
      //announcement bar 
      $("[data-section-id = header]").css({"position":"fixed","z-index":"99999","width":"100%","top":0,"background-color":"#f8f8f8"});
      var header_height = $("[data-section-id = header]").height();
      $("#PageContainer").css("margin-top",header_height);
  </script>

Before you add the code please remove all the previous code what you use for it .

 

After remove Previous code, you add our code before the closing </body> tag.

Please see the ref: screenshot

sticky-header.png

This code is tested. Here the preview link https://vuj4ixbxw35vpnro-29765088.shopifypreview.com

 

Thank you 

AndiVillacis
Explorer
59 4 22

Hello @Silverclouding,

Is it possible for you to please help me with having a Sticky Header on my website?

This is my store URL: https://us-women.com

I am using the supply theme

 

!Captura de Pantalla 2020-06-11 a la(s) 3.38.39 p. m..png

I would really appreciate if you can please help me!

Thanks in advance,

Andi

MTBProducts
Visitor
1 0 0

Thank you Sean! It works really well.

I´m a Shopify noob. I found out how I adjust the height but it is only the height of the "background"  how do I adjust the position of the Navigation, Logo, Search etc. in relation to the height of the "background? Hope this does make sense. Any help is appreciated

AkanshaSharma
Tourist
3 0 1

Hi,

 

I still didn't get how to solve the problem of content getting pushed/adjusted after a few seconds. 

Want everything to get loaded in one shot. Seems very unpleasant to the eye that the entire page moves down after a second. 

 

LVOC
Tourist
12 0 1

I am having an issue with the color of the header on my homepage. It is the only page where the background of the header is transparant. All other pages the header has the same color as the background of my website, as it should be.

 

I now installed a 3rd party app to install a mega menu. Its not properly functioning with the code ive added (as written in the explanation, which im very thankful for).

 

I would like to get my home page header the same color as on the other product pages, else its not very well see able. Can I just make some adjustments in the added coding or do i have to add something new?

 

Thnx

mikeshik7
Tourist
9 0 0

Great!!! I was just sitting and thinking how to do this and the first discussion I find in the forum is this one :-D. Fixed option 1 and all works tip top, will launch this new version now!!

elizsia
Tourist
29 0 1

This is new. I used the inspect fuction on google chrome and played around with the code.. The code below shows the Menu. The previous code showed the header including the logo of your site. with this new code there is no logo just the menu. Go to Themes, and Edit code. then Assets. Open 

theme scss liquid and paste the code at the very bottom. save and text it out

 

.site-nav {
position: right !important;
top: 140px !important;
z-index: 1 !important;
}

#PageContainer{
margin-left: 75px !important;
}

elizsia
Tourist
29 0 1

Fixed All. Header Bar, Header and Navigation. Select Online Store > Themes, Actions > Edit Code > Assets > theme.scss.liquid  Copy and paste this code at the very bottom of the page.  underneath 

[data-shopify-buttoncontainer] {
justify-content: flex-end;

< Undernearh this

 

www.quintessencessentials.com

 

@media screen and (min-width: 500px) {
   .header-bar {
     position: fixed;
     z-index: 1000;
     background: #4267B2;
     width: 100%;
     padding-bottom: 0.5rem;
     top: -2.5px;
   } 
   .main-content {
     margin-top: 25rem!important;
   }
}
@media screen and (min-width: 700px) {
   .site-header {
     position: left;
     z-index: 1000;
     background: black;
     width: 100%;
     padding-top: 5rem;
     top: 0px;
   } 
   .main-content {
     margin-top: 5rem!important;
   }
}
@media screen and (min-width: 700px) {
   .site-nav {
     position: fixed;
     z-index: 1000;
     background: black;
     width: 100%;
     padding-bottom: -10rem;
     top: 15px;
   } 
   .main-content {
     margin-top: 0rem!important;
   }
} 

 

AkanshaSharma
Tourist
3 0 1

Can someone help me here since I am just one step away from getting this right ? I am using DEFAULT theme

Have fixed announcement bar and header bar but on web, announcement bar slides down after loading and goes behind header bar.

This is not happening on mobile where it's working PERFECTLY FINE. 

Site name www.urbanhippieofficial.com 

What am I missing ? Using below code :- 

 

#shopify-section-header {
position: fixed;
background-color: $color-body;
width: 100%;
z-index: 200;
top: 40px;

}

#MainContent {
margin-top: 80px;
}

div#SearchDrawer {
z-index: 201; 
}

#PageContainer {
padding-top: 80px;
}

.announcement-bar {
position: fixed;
width: 100%;
}

Andre_Borges
Excursionist
32 0 12

I was only able to make this work keeping the announcement bar.

We would like to just have the header!

 

Check it out please https://bemestaressencial.com 

Diananajera93
Visitor
1 0 0

Hi! I have a question about your sticky navigation how did you make it where it is white completely? Mine follows the user but it looks like this:

 

9A5A85F6-334A-441B-8FB5-22BFF5E156A3.jpeg

tawfiqst
Tourist
6 0 2

This is just awesome.. Thanks for sharing

xplosiv
Tourist
7 0 1

I gave this tutorial a try, however I was having the same issue of the bar appearing to cover up the top part of my header image. 

 

I also had another problem when I tried this -- my logo is far too large to be dragged as it would take 1/3 screen up. Is there any way to implement the sticky nav bar (without dragging the announcement bar down too) and stop the logo from it? 

 

It would probably be best to just have the header hamburger menu, a search button, and maybe a micro logo or something. 

 

Thank you! 

 

Lilas-addas
Excursionist
44 0 8

Hello @SeanP ,

I applied the option 2 that you mentioned before for the Debut theme, and it works great, thanks!

I have a question please. Is there any way to make that works in the home page only ?

I really don't need the header bar to be fixed in all of my rest pages.

A help would be very appreciated.

My website URL: https://presets-market.com

 

 

Nadallswan
Shopify Partner
9 1 5

Hi @Lilas-addas ! 

I am also trying to make the sticky header apply only for the homepage. 

Can you please share how you were able to implement this behavior eventually? 

Thanks!

afsiragusa
Tourist
5 0 2

Hi Sean,

 

I've done your option 1 for sticky header in Debut theme with announcement bar enabled. It seems to be the only thing on here that works.

 

My issue is this though: When the page is loading (when you first get to the page), it's almost like the whole page if shifted up under the header a tiny bit, and then once the page officially is loaded, it pops back down to how It should be. There's some sort of lag/glitch.

 

Has anyone experienced this? It just looks bad for a customer visits the site. I would really prefer to have the sticky header/announcement bar, but I hate the way this is happening. I can't find anything to fix it.

 

Thanks!

afsiragusa
Tourist
5 0 2

@SeanPmessage above. Thanks!