Shopify themes, liquid, logos, and UX
To continue receiving payouts, you need to secure your account by turning on two-step authentication. If two-step authentication is not turned on your payouts will be paused. Learn more
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'); } });
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
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 you
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!
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.
its not working for me
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 ...
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?
@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.....
@kwaris @AustinK @rahulmittal79
You may want to give a try to this solution if you're still having trouble with it.
Kind regards,
Diego
Caution This is an advanced tutorial and is not supported by Shopify .
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
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
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
User | RANK |
---|---|
116 | |
92 | |
72 | |
69 | |
45 |
Learn these 5 things I had to learn the hard way with starting and running my own business
By Kitana Jan 27, 2023Would you love to unleash the unbridled power of the Google Shopping Channel into your sho...
By Gabe Jan 6, 2023How can you turn a hobby into a career? That’s what Emmanuel did while working as a wa...
By Skye Dec 30, 2022