Shopify themes, liquid, logos, and UX
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.
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.
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.
This will make the whole header sticky, including the announcement bar.
theme.scss.liquid
file.#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; } }
theme.js
file.function headerSize() { var $headerHeight = $('div#shopify-section-header').outerHeight(); $('#PageContainer').css('padding-top', $headerHeight); } $(window).on("load", headerSize); $(window).on("resize", $.debounce(500, headerSize));
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.
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.
theme.scss.liquid
file.#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; } }
theme.js
file.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'); } });
To learn more visit the Shopify Help Center or the Community Blog.
Hello @afsiragusa,
Please share your site url so that I will give you exact solution
Please share password
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!
Same here. Would love to use Option 2 if there's a fix for it.
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 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?
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.
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
This worked for me!!! 🙂 Extending a big thanks, I've been troubleshooting this issue for days! 🙂
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
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!
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
ment bar. See photo.
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.
@topkozuchy
Have you checked this solution yet? It fixes the problem you mention.
Same problem for me 😞
Caution This is an advanced tutorial and is not supported by Shopify .
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.
@AkanshaSharma @afsiragusa Have you found a solution for this loading lag / glitch?
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.
It is indeed very unpleasant to the eye and seems unprofessional.
Any help with a solution will be so so much appreciated.
Thanks!
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!
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!
By the way, I am using a premium theme, not the debut etc
Thanks
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.
And for the all code works only on mobile? I have a debut theme.
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
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:
Do you know what can I do to fix it?
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:
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 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.
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');
}
});
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...
option 1 - step 5:
filename should be renamed from "theme.js" to "theme.js.liquid" !!!!
sticky header works perfect
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!
Thank you Sean OPtion 1 work a treat for me.
Very nice post! I am currently using the "simple" theme, is this working also on this theme? thank you very much
thank you for the solution!
the menu bar is now fixed but the entire header is taking too much space of the screen, is it possible to reduce gap between menu items and the shadowed line?
Thanks a heap. I had the debut theme and this worked a charm for me!
This works great! However, I'm noticing when the page loads that there's a brief moment where the top of the pages are hidden, and then an animation kicks in so that there's more padding there. I think this is related to the z-index and padding of the elements, but does anyone know what I can do to stop that from happening? Perhaps load the function before the page fully loads?
Hi, I know it's been a long time but did you get this fixed?
This is too good! Thank you so much for the information, it was clear, and easy to do as well. 😄
This could be fix by css. So you can write css there.
If you have a complicate or such a tough bugs then contact me for solutions.
Wanna get 100% satisfaction Hire me.
- Feel free to contact me on freelancerakibul@gmail.com regarding any help
Shopify Developer | Skype : rabby.hazi
Shopify Design | Custom Section and Settings | Shopify Custom Features
It's working fine. Thanks.
Very easy and works perfectly, I would give you 10 likes if I could
Working flawlessly, very well written up
Thank! Excellent and useful information, everything works!
how can i undo this?
Hey
thanks for this feature but:
The sticky header is hiding content underneath. I used Option 2 Because I want the announcement Bar to show up just in the beginning.
can anyone help me asap pls?
thanks
philip
Starting a B2B store is a big undertaking that requires careful planning and execution. W...
By JasonH Sep 23, 2024By investing 30 minutes of your time, you can unlock the potential for increased sales,...
By Jacqui Sep 11, 2024We appreciate the diverse ways you participate in and engage with the Shopify Communi...
By JasonH Sep 9, 2024