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)

cmineart
Visitor
2 0 0

Hi! I was able to get my navigation to be sticky (I'm using Brooklyn) but rather than it just having the text, there is a block of color, same as the background color, that is stuck under the nav, anyway to fix this?

 

Thanks!

oscprofessional
Shopify Partner
16116 2410 3126

Hello @cmineart 

Please share your store URL and reference site URL.

So that I can check and let you know the exact solution for this.

Thanks...

Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | 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

privileg
Visitor
1 0 0

Many thanks!

wildember
Visitor
1 0 0

Worked perfectly! thank you!

antonkogan
Excursionist
30 1 8

I was editting hover menu code and somehow cant get the white space from announcement bar to not hover like before when entering this code- can someone assist? The code in this thread worked perfect before i editted how to hover to open header menu code

 

Bonny_Belanger
Excursionist
21 2 2

I am having the same problem with the announcement bar pinned to the top (good thing) but the navigation bar is not moving up to fill the space.  Did you find a solution?

tiei
Tourist
8 0 1

I want to make the header menu of my website stick to the top of the page when scrolling past it, but NOT the announcement bar above it. So that when you scroll, it first scrolls down normally until the announcement bar is not visible anymore, and then the header sticks to the top of page after scroll.

I am using the Debut theme.

I have read this thread: https://community.shopify.com/c/Shopify-Design/Sticky-Fixed-Header-and-Navigation-for-Debut-Theme/td..., applied both versions and they work. However in Version 2, instead of behaving like I described above, the announcement bar scrolls and the header is sticky, but not to the top of the viewport. It just stays sticky where it is on first load, hence after scrolling there is space above it in which you can also see the website scrolling underneath.

I have applied the code from Option 2 above in  theme.css.liquid and in theme.js, and then started playing around with it to get that offset effect, using this tutorial: http://jsfiddle.net/gxRC9/502/

The fiddle example above is EXACTLY what I am trying to achieve: scroll until header reaches top of page, then fix it to make it sticky. (with everything above it on initial load scrolling away outside of viewport)

Now I have this code in theme.css.liquid:

 

 

 

/*Sticky header*/
#SearchDrawer {
  z-index:1001;
}

.site-header {
  -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 }};
}

.fixed {
  position: fixed;
  z-index:1000;
  left:0;
  top:0;
}

#PageContainer {
  padding-top: 80px;
}

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

 

 

 

(i know i dont need the page container stuff right now, most importantly I separated the .site-header css edit (for a nice dropshadow) from the .fixed class, which is what I want to only appear after the offset scroll as described in JS below)

 

and this code in theme.js

 

 

 

var stickyOffset = $('.site-header').offset().top;

$(window).scroll(function(){
  var header = $('.site-header'),
      scroll = $(window).scrollTop();
    
  if (scroll >= stickyOffset) header.addClass('fixed');
  else sticky.removeClass('fixed');
});

 

 

 

Where its setting a variable for the offset distance of siteheader from the top and then telling it to apply my .fixed class from above CSS once the scroll point went past that level.

But, its not working... 😛

I am guessing its either something to do with measuring/setting the offset distance or with Jquery in the theme.

(FYI: what I dont want to do is work with fixed "px" values in the offset. I want to keep it dynamic. FYI #2: I want this to happen on both desktop & mobile).

 

Would love if somebody could help me find my thinking error !! Thanks guys

Jackzavelli
Excursionist
34 0 3

Hi All/@SeanP ,

Is it possible to have a sticky/fixed header for when the logo is centered please?

Thanks in advance

Bonny_Belanger
Excursionist
21 2 2

I am having the same problem with the announcement bar scrolling out of view (good thing) but the navigation bar is not moving up to fill the space.  Did you find a solution?

Rene234
Visitor
1 0 1

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

unikforce
Shopify Partner
6 0 1

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

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on freelancerakibul@gmail.com regarding any help
Shopify Partner | Skype : raaby.hazi
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing

KerryAlx
Tourist
5 0 3

Brilliant! Thanks for a clear and easy to follow solution!

Emma_Beckett
Tourist
8 0 1

Hi Sean

Thanks for sharing this.

Is there a way to just have the announcement bar visible at all times and not the header/menu bar when scrolling down the home page?

Thanks!

KerryAlx
Tourist
5 0 3

Hi SeanP

I am sure you must be frustrated with all of these tech support questions - so I completely understand if you don't reply!

I am using Debut theme with the announcement bar enabled. I have implemented Option I and it does work... but down by screen "jumps and jiggles" when it loads. Any idea what I am doing wrong?

Thanks

Kerry

 

 

nuarswim
Visitor
3 0 0

The sticky header is working  well for me in the desktop view, but no on mobile... Does anyone have any tips on how to fix this? I am using the debut theme. 

SportClothing
Visitor
3 0 0

Hi. After installing several applications, such a message appeared on my website.
Does anyone know how to remove it? It's under the URL bar and the Menu bar in the center is gone. Thank youIMG_20210108_193615.jpg

jhonmusk12
Visitor
2 0 0

Same problem for me 😞 

birgitt
Visitor
1 0 1

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. Would you kindly let me know what else I may need to do to remove the sticky header?

Thanks so much!

mywebsite1
Tourist
5 0 1

its not working for me

Blogbaba

tantsteven
Visitor
2 0 0

06-Oct-2020 — The sticky header must contain the navigation as well. ... Making the menu fixed means that your navigation will always be fixed to the top of the ... I'll do the integration on the Debut theme which at this time is the default ...

emelineno
Visitor
1 0 0

I have managed to fix it with option 1 (but only on desktop).

At first I got a delay on the top of each page, but I changed the padding top to 226px instead of 80px.

I looks fine on desktop, but on mobile it is still a delay. Can anyone help?

AustinK
Visitor
3 0 0

@emelineno 

Iwas dealing with the same issue. gave up trying and paid $15 for some dev here to get it fixed for me. these things should be done automatically by shopify.....

zeffire
Visitor
2 0 1

zeffire_0-1614236967641.png

Hi I followed option 2. I have my announcement enabled. However when I scroll down, there is an awkward empty gap where the announcement banner should have been. I only want my menu bar to be sticky. Can someone please help to assist? Thank you

SomedaySoon
Visitor
1 0 0

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

GG9
Explorer
62 1 12

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
5 0 1

Yes, fixed entirely (Replying again).

diego_ezfy
Shopify Partner
2969 571 916

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

Nancy023
Tourist
3 0 1

Hi,
Very nice article.
I really enjoyed going through all the great information you’ve provided in this great article.
Keep up the great work.
Thank you

DELONG_HUANG
Excursionist
51 0 8

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,

 

2.PNG

 

 

diego_ezfy
Shopify Partner
2969 571 916

@DELONG_HUANG 

This solution fixes this issue.

Kind regards,
Diego

King-Kang
Trailblazer
148 8 78

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
Shopify Partner
2969 571 916

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
Trailblazer
148 8 78

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
Trailblazer
148 8 78

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
Shopify Partner
2969 571 916

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
Trailblazer
148 8 78

Thank you very much @diego_ezfy !

Working like a charm!

nurdin
Visitor
1 0 0

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
Excursionist
18 0 5

Hi!

I tried this and my menu bar has completely disappeared.

Can you help me to fix? Thanks!

AustinK
Visitor
3 0 0

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

seasonalguy
Visitor
2 0 0

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?

Sticky Headerx.png

ZeynepLir
Visitor
2 0 0

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

GiraffeSports
Tourist
3 0 2

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

leatheraholicx
Tourist
10 0 4

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.

Screenshot 2021-07-07 at 10.29.14 PM.jpg

 

Thanks

Leatheraholicx

eddyxv
Tourist
4 0 2

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.

CptJack93
Excursionist
13 0 8

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

Mike5241
Explorer
57 0 12

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
Explorer
57 0 12

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
16116 2410 3126

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

Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | 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
Mike5241
Explorer
57 0 12

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
16116 2410 3126

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

 

 

Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | 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