Sticky/Fixed Header and Navigation for Debut Theme

SeanP
Shopify Staff
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 159 (159)
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!

oscprofessional
Shopify Partner
15601 2335 3015

Hello @afsiragusa,

Please share your site url so that I will give you exact solution

Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Custom Pricing Wholesale App : Free | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing
afsiragusa
Tourist
5 0 2
@oscprofessional

spray-away-toilet-brush.myshopify.com

But it’s not live yet...that won’t give you access will it?
oscprofessional
Shopify Partner
15601 2335 3015

@afsiragusa,

Please share password

Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Custom Pricing Wholesale App : Free | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing
JazWander
Tourist
9 0 1

Hi, I have the same problem, 

I follow the OPTION 2 but my sticky header has a bouncing effect whenever I navigate on my page.
Can someone help me how to fix this?

THANK YOU SO MUCH!

 

 

atifgodil
Tourist
6 0 3

Same here. Would love to use Option 2 if there's a fix for it.

afsiragusa
Tourist
5 0 2
@Osc

How’s that work? U get full access to my account?
afsiragusa
Tourist
5 0 2
glabs
Visitor
1 0 2

Hi I am experiencing the same issue, except my header takes 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.

Little_Fox_Clot
Tourist
3 0 0

Hi I am experiencing the same issue, except my header takes 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.

Hi @glabs , I have this same problem! Were you ever able to find a solution for it?

Jeck
Visitor
1 0 0

I tried to do this and it really works.

But the dropdown(when you add menu under menu haha), the search and the three-bar(for mobile view) are not working.

unitech456
Visitor
2 0 3

Change the number 80 to 107. The number 107 made it stop doing what you described in my situation. Maybe try playing around with that number until it stops

This is the line of code you need to edit as you can see instead of 80px i changed it to 107px

#PageContainer {
padding-top: 107px;
}

 

View my reply above for further clarification 

PrimpandPosture
Visitor
1 0 0

This worked for me!!! 🙂 Extending a big thanks, I've been troubleshooting this issue for days! 🙂

diego_ezfy
Shopify Partner
2880 549 826

Hey everyone,

I have coded a professional, highly tested solution for this as well if you'd like to try.

You can download/install it for free under 1 minute, just click here to read the tutorial.

Besides that you also have options to turn it on/off at the customize page, even to allow it only on desktop or mobile depending on your needs.

Kind regards,
Diego

rip2
Visitor
1 0 0

Thanks Diego, the free version works well for me. There are a few small bugs like resetting to the top of the page when you click the search icon in the menu bar, but these are very minor. Overall an easy copy & paste solution!

nezi
Tourist
6 0 3

Hi,

I added the Part 2 of the code given in the original post. The navigation menu is sticking and the announcement bar moves but as you scroll it shows the background above the navigation menu instead of the navigation moving up and replacing the announce

Screen Shot 2021-01-20 at 12.18.06 PM.png

ment bar. See photo.

topkozuchy
Tourist
3 0 0

Same problem for me 😞 

my website is topkozuchy.sk please if you could fix the space and moving menu bar to the top after scolling down it would help me. 

diego_ezfy
Shopify Partner
2880 549 826
jhonmusk12
Visitor
2 0 0

Same problem for me 😞 

pogiroheat
Visitor
1 0 0

Caution This is an advanced tutorial and is not supported by Shopify .

tantsteven
Visitor
2 0 0

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.