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!
Replies 153 (153)
unitech456
New Member
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 

User123
New Member
2 0 1

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

arnoldlan
Tourist
4 0 1

Hi there, I followed all the instructions in your post, but just got a white space between the header and the slideshow (first thing under the header). The header/announcement does not follow me when I scroll down either. 

 

My website is www.immigenshop.com 

 

Thanks!

 

Edit: Solved!

GYGY
New Member
2 0 0

Hi Sean,

 

Excellent work, thank you!

 So I was stoked using option 1 that it worked on both desktop and mobile.

BUT but on mobile, the scroll-down menu that resides in the header does not function as desired: after scrolling down the site, sticky header all perfectly in place, I clicked the menu... but the menu list does not appear... so I thought maybe the menu got "left behind" at the top. So I tested by scrolling back to the top and click Menu button, the menu then worked perfectly just like before I implemented the code.... So, is there more code I have to look at to add for my case? 

 

By the way, I am using a premium theme, not the debut theme

 

Thanks once again for the excellent code snippets!

 

GYGY
New Member
2 0 0

By the way, I am using a premium theme, not the debut etc

Thanks

smithroger
Tourist
16 0 3

Thanks for this amazing and helpful tutorial about Fixing header and Navigation for Debut Theme. I also face that problem but due to your tutorial, i solve that problem and my store is running properly. Again Thanks.

Alex-Testoni
New Member
1 0 0

And for the all code works only on mobile? I have a debut theme.

mitcheep
New Member
2 0 0

Hi SeanP this is really helpful.  However, I am wondering if it is possible to fix the nav bar except for checkout.  I find it inconvenient to see the nav bar while making payment

cpoveda89
Tourist
15 0 1

Hello!!! 

 

That's really nice. I have a little issue with it. My breadcrumbs are not appearing after the implementation of the code. Here's how I have them coded:

 

code1.png

 

Do you know what can I do to fix it?

jessisaun
Tourist
7 0 3

Hi Sean, I used the option two on my brooklyn theme and it worked great. I have a few issues though and I was hoping you could help me with it. Or anyone that knows the answer!

 

I have the fixed menu change color when i scroll down, but I don't know how to also change the text and icons, they stay white and can't bee seen properly, I would like them to be grey. Also there is a space between the top of the page and the fixed menu, I would like that not be there, and for the menu to be attached to the top of the page. Screenshot: https://imgur.com/mx3FDG2

 

Also, the menu is too low and covers part of all other pages.  How can I fix that? I already modified the padding on the code for the menu, but that doesn't help.

Screenshot: https://imgur.com/ufkG8no

 

These are my codes:

 

I have this at the end of theme.scss.liquid: 

 

/* CHANGE HEADER TO STICKY */
 
#SearchDrawer {
  z-index:1001;
  
}
 
.site-header {
  position: fixed;
  z-index:1000;
  background-color: #F7F1EB;
  left:0;
  right:0;
 
}
 
.template-index .fixed-header .site-header {
background-color: #F7F1EB;
}
 
#PageContainer {
  padding-top: 100px;
}
 
@media screen and (max-width: 749px) {
#PageContainer {
  padding-top: 70px;
  
}
}

 

And this at the end of theme.js.liquid:

 

// Header

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');
}
});

 

 

RadT
Excursionist
12 0 4

@jessisaun Same theme and issues for me. Did you discover a solution? 

 

A sticky navigation menu is fairly basic for websites, I'm surprised Shopify does not offer a built-in option. 

MarBur
New Member
1 0 0

option 1 - step 5:

filename should be renamed from "theme.js" to "theme.js.liquid" !!!!

 

sticky header works perfect

Haylalayla
Excursionist
24 0 3

Can anyone help me to make my main navigation header sticky in brooklyn theme 

Thanks alot


@jessisaun wrote:

Hi Sean, I used the option two on my brooklyn theme and it worked great. I have a few issues though and I was hoping you could help me with it. Or anyone that knows the answer!

 

I have the fixed menu change color when i scroll down, but I don't know how to also change the text and icons, they stay white and can't bee seen properly, I would like them to be grey. Also there is a space between the top of the page and the fixed menu, I would like that not be there, and for the menu to be attached to the top of the page. Screenshot: https://imgur.com/mx3FDG2

 

Also, the menu is too low and covers part of all other pages.  How can I fix that? I already modified the padding on the code for the menu, but that doesn't help.

Screenshot: https://imgur.com/ufkG8no

 

These are my codes:

 

I have this at the end of theme.scss.liquid: 

 

/* CHANGE HEADER TO STICKY */
 
#SearchDrawer {
  z-index:1001;
  
}
 
.site-header {
  position: fixed;
  z-index:1000;
  background-color: #F7F1EB;
  left:0;
  right:0;
 
}
 
.template-index .fixed-header .site-header {
background-color: #F7F1EB;
}
 
#PageContainer {
  padding-top: 100px;
}
 
@media screen and (max-width: 749px) {
#PageContainer {
  padding-top: 70px;
  
}
}

 

And this at the end of theme.js.liquid:

 

// Header

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');
}
});

 

 





@jessisaun wrote:

Hi Sean, I used the option two on my brooklyn theme and it worked great. I have a few issues though and I was hoping you could help me with it. Or anyone that knows the answer!

 

I have the fixed menu change color when i scroll down, but I don't know how to also change the text and icons, they stay white and can't bee seen properly, I would like them to be grey. Also there is a space between the top of the page and the fixed menu, I would like that not be there, and for the menu to be attached to the top of the page. Screenshot: https://imgur.com/mx3FDG2

 

Also, the menu is too low and covers part of all other pages.  How can I fix that? I already modified the padding on the code for the menu, but that doesn't help.

Screenshot: https://imgur.com/ufkG8no

 

These are my codes:

 

I have this at the end of theme.scss.liquid: 

 

/* CHANGE HEADER TO STICKY */
 
#SearchDrawer {
  z-index:1001;
  
}
 
.site-header {
  position: fixed;
  z-index:1000;
  background-color: #F7F1EB;
  left:0;
  right:0;
 
}
 
.template-index .fixed-header .site-header {
background-color: #F7F1EB;
}
 
#PageContainer {
  padding-top: 100px;
}
 
@media screen and (max-width: 749px) {
#PageContainer {
  padding-top: 70px;
  
}
}

 

And this at the end of theme.js.liquid:

 

// Header

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');
}
});

 

 



@jessisaun wrote:

Hi Sean, I used the option two on my brooklyn theme and it worked great. I have a few issues though and I was hoping you could help me with it. Or anyone that knows the answer!

 

I have the fixed menu change color when i scroll down, but I don't know how to also change the text and icons, they stay white and can't bee seen properly, I would like them to be grey. Also there is a space between the top of the page and the fixed menu, I would like that not be there, and for the menu to be attached to the top of the page. Screenshot: https://imgur.com/mx3FDG2

 

Also, the menu is too low and covers part of all other pages.  How can I fix that? I already modified the padding on the code for the menu, but that doesn't help.

Screenshot: https://imgur.com/ufkG8no

 

These are my codes:

 

I have this at the end of theme.scss.liquid: 

 

/* CHANGE HEADER TO STICKY */
 
#SearchDrawer {
  z-index:1001;
  
}
 
.site-header {
  position: fixed;
  z-index:1000;
  background-color: #F7F1EB;
  left:0;
  right:0;
 
}
 
.template-index .fixed-header .site-header {
background-color: #F7F1EB;
}
 
#PageContainer {
  padding-top: 100px;
}
 
@media screen and (max-width: 749px) {
#PageContainer {
  padding-top: 70px;
  
}
}

 

And this at the end of theme.js.liquid:

 

// Header

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');
}
});

 

 




header sticky in theme brookyln but I can`t,can anyone help me?


@jessisaun wrote:

Hi Sean, I used the option two on my brooklyn theme and it worked great. I have a few issues though and I was hoping you could help me with it. Or anyone that knows the answer!

 

I have the fixed menu change color when i scroll down, but I don't know how to also change the text and icons, they stay white and can't bee seen properly, I would like them to be grey. Also there is a space between the top of the page and the fixed menu, I would like that not be there, and for the menu to be attached to the top of the page. Screenshot: https://imgur.com/mx3FDG2

 

Also, the menu is too low and covers part of all other pages.  How can I fix that? I already modified the padding on the code for the menu, but that doesn't help.

Screenshot: https://imgur.com/ufkG8no

 

These are my codes:

 

I have this at the end of theme.scss.liquid: 

 

/* CHANGE HEADER TO STICKY */
 
#SearchDrawer {
  z-index:1001;
  
}
 
.site-header {
  position: fixed;
  z-index:1000;
  background-color: #F7F1EB;
  left:0;
  right:0;
 
}
 
.template-index .fixed-header .site-header {
background-color: #F7F1EB;
}
 
#PageContainer {
  padding-top: 100px;
}
 
@media screen and (max-width: 749px) {
#PageContainer {
  padding-top: 70px;
  
}
}

 

And this at the end of theme.js.liquid:

 

// Header

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');
}
});

 

 


 

PalmahTeam
New Member
1 0 0

Hey Sean, 

 

I'm trying to impliment your code into my website - option 2. Its moving the logo up and down, however the navigation menu is remaining at the top. What I'm seeking is to keep the announce bar and logo at the top, but I would love to have the Navigation menu (which has home, shop, collabs, stories, contact us) to stick to the top as the user scrolls up and down. I'm not a super experienced coder, so I'm hoping you'll able to assist me with this!
Any help from you or others - again would be greatly appreciated!

 

rsdimitrov
Shopify Partner
94 8 28

Hey @Haylalayla 

I have a working solution to the sticky header in brooklyn theme.

Here is my short guide with simple, easy to follow instructions: https://community.shopify.com/c/Technical-Q-A/Sticky-header-transparent-on-home-page-white-backgroun...

I help family-run Shopify stores increase sales from existing traffic Learn More
Problem Solved? Accept the solution so you can help others.
Confused? Busy? Let me solve it for you: rumen@rumendimitrov.com
Did my answer save you time? Buy me a coffee, please 🙂 paypal.me/rsdimitrov
NRGISE
New Member
2 0 1

Thank you Sean OPtion 1 work a treat for me. 

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
11529 1807 2311

Hello ,

Please share your site url.

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

Please Like and Accept Solution. Free website audit to grow your business Chat on WhatsApp | Email: pallavi@oscprofessionals.com | Skype : oscprofessionals-87 | Hire us | Expert Site Speed Optimization | Performance Site Audit | Shopify Private App | Custom Theme Development & Modifications any Shopify Theme | Shopify SEO | Digital Marketing
Nicolo
Tourist
4 0 2

Very nice post! I am currently using the "simple" theme, is this working also on this theme? thank you very much