Note: This also works for the Craft, Crave, Sense and Studio Theme.
Click here to view our example store
Quick and easy guide below, currently the Dawn theme has the sticky header option, but only reveals itself when you scroll up. So this guide will teach you how to make the sticky header function permanent.
Change Header.Liquid And Put Code In Global.js
Go to edit code, head over to the Section folder and find header.liquid. Once found, scroll down until you find the below code. It’s essentially everything between the {% javascript %} {% endjavascript %} tags, before the {% schema %} tag. Delete it from the header.liquid.
{% javascript %}
class StickyHeader extends HTMLElement {
constructor() {
super();
}
connectedCallback() {
this.header = document.getElementById('shopify-section-header');
this.headerBounds = {};
this.currentScrollTop = 0;
this.preventReveal = false;
this.predictiveSearch = this.querySelector('predictive-search');
this.onScrollHandler = this.onScroll.bind(this);
this.hideHeaderOnScrollUp = () => this.preventReveal = true;
this.addEventListener('preventHeaderReveal', this.hideHeaderOnScrollUp);
window.addEventListener('scroll', this.onScrollHandler, false);
this.createObserver();
}
disconnectedCallback() {
this.removeEventListener('preventHeaderReveal', this.hideHeaderOnScrollUp);
window.removeEventListener('scroll', this.onScrollHandler);
}
createObserver() {
let observer = new IntersectionObserver((entries, observer) => {
this.headerBounds = entries[0].intersectionRect;
observer.disconnect();
});
observer.observe(this.header);
}
onScroll() {
const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
if (this.predictiveSearch && this.predictiveSearch.isOpen) return;
if (scrollTop > this.currentScrollTop && scrollTop > this.headerBounds.bottom) {
requestAnimationFrame(this.hide.bind(this));
} else if (scrollTop < this.currentScrollTop && scrollTop > this.headerBounds.bottom) {
if (!this.preventReveal) {
requestAnimationFrame(this.reveal.bind(this));
} else {
window.clearTimeout(this.isScrolling);
this.isScrolling = setTimeout(() => {
this.preventReveal = false;
}, 66);
requestAnimationFrame(this.hide.bind(this));
}
} else if (scrollTop <= this.headerBounds.top) {
requestAnimationFrame(this.reset.bind(this));
}
this.currentScrollTop = scrollTop;
}
hide() {
this.header.classList.add('shopify-section-header-hidden', 'shopify-section-header-sticky');
this.closeMenuDisclosure();
this.closeSearchModal();
}
reveal() {
this.header.classList.add('shopify-section-header-sticky', 'animate');
this.header.classList.remove('shopify-section-header-hidden');
}
reset() {
this.header.classList.remove('shopify-section-header-hidden', 'shopify-section-header-sticky', 'animate');
}
closeMenuDisclosure() {
this.disclosures = this.disclosures || this.header.querySelectorAll('details-disclosure');
this.disclosures.forEach(disclosure => disclosure.close());
}
closeSearchModal() {
this.searchModal = this.searchModal || this.header.querySelector('details-modal');
this.searchModal.close(false);
}
}
customElements.define('sticky-header', StickyHeader);
{% endjavascript %}
Go to the Asset Folder and find Global.js, go to the very bottom of Global.js, copy the below code and paste it.
class StickyHeader extends HTMLElement {
constructor() {
super();
}
connectedCallback() {
this.header = document.getElementById('shopify-section-header');
this.header.classList.add('shopify-section-header-sticky');
this.headerBounds = {};
this.currentScrollTop = 0;
this.preventReveal = false;
this.predictiveSearch = this.querySelector('predictive-search');
this.onScrollHandler = this.onScroll.bind(this);
this.hideHeaderOnScrollUp = () => this.preventReveal = true;
this.addEventListener('preventHeaderReveal', this.hideHeaderOnScrollUp);
window.addEventListener('scroll', this.onScrollHandler, false);
this.createObserver();
}
disconnectedCallback() {
this.removeEventListener('preventHeaderReveal', this.hideHeaderOnScrollUp);
window.removeEventListener('scroll', this.onScrollHandler);
}
createObserver() {
let observer = new IntersectionObserver((entries, observer) => {
this.headerBounds = entries[0].intersectionRect;
observer.disconnect();
});
observer.observe(this.header);
}
onScroll() {
const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
if (this.predictiveSearch && this.predictiveSearch.isOpen) return;
/*
if (scrollTop > this.currentScrollTop && scrollTop > this.headerBounds.bottom) {
requestAnimationFrame(this.hide.bind(this));
} else if (scrollTop < this.currentScrollTop && scrollTop > this.headerBounds.bottom) {
if (!this.preventReveal) {
requestAnimationFrame(this.reveal.bind(this));
} else {
window.clearTimeout(this.isScrolling);
this.isScrolling = setTimeout(() => {
this.preventReveal = false;
}, 66);
requestAnimationFrame(this.hide.bind(this));
}
} else if (scrollTop <= this.headerBounds.top) {
requestAnimationFrame(this.reset.bind(this));
}
*/
this.currentScrollTop = scrollTop;
}
/*
hide() {
this.header.classList.add('shopify-section-header-hidden', 'shopify-section-header-sticky');
this.closeMenuDisclosure();
this.closeSearchModal();
}
reveal() {
this.header.classList.add('shopify-section-header-sticky', 'animate');
this.header.classList.remove('shopify-section-header-hidden');
}
reset() {
this.header.classList.remove('shopify-section-header-hidden', 'shopify-section-header-sticky', 'animate');
}
*/
closeMenuDisclosure() {
this.disclosures = this.disclosures || this.header.querySelectorAll('details-disclosure');
this.disclosures.forEach(disclosure => disclosure.close());
}
closeSearchModal() {
this.searchModal = this.searchModal || this.header.querySelector('details-modal');
this.searchModal.close(false);
}
}
customElements.define('sticky-header', StickyHeader);
And you are done, you now have a permanent sticky header without the nasty animation on the Dawn theme!
15 Replies to How To Make Dawn Sticky Header Permanent
Hey, I’ve completed this guide, but nothing seemed to happen. Perhaps you know what could be the reason?
My website is http://www.limitdesign.lt
psw: codecode
Hi Pijus,
Hmm very odd, it seems like it is acting odd, give me some time to investigate
Thank you!
Hi Pijus,
Seems like the header.liquid wasn’t playing ball with the updates I had. It was remembering the old code somehow, even though we deleted it. Solution is to delete everything between the {% javascript %} tags and the tags itself. Then recopy the whole thing into the Global.js file. This will sort out the issue. You can refollow the guide and copy the solution into the global.js. Just remember to delete it from the header.liquid.
I’ve tested the above in a freshly installed Dawn Theme and it works. So should be all good.
Thank you very much, thanks to Bluish Team header works like a charm!
Nps 🙂
Hi, I have made this tutorial and the transparent header ones. Both work great! Thanks. But in your example, the sticky header goes white and changes font colours, something I would like to have and is not working for me. Am I missing something? Thanks a lot
Hi Catalina,
The colour of links when it’s white background reverts to the original colour. So whichever you set text/links colour as in color settings, is the colour it’s going to be.
Fucking perfect man!
I added the code to my Dawn theme… works great.. NOW when I add an item to my cart the slide-out to show the item was added is no longer there. Can you please check this on your end? I tried on my friend’s shop as well, the same thing happens. Thank you.
Hi Regina,
Please provide the website it’s happening, unfortunately I can’t guestimate what’s happening.
Hi John
Hey, I’ve completed this guide, but nothing seemed to happen.
I delete everything between the {% javascript %} tags and the tags itself. and copied the code in your guidline, nothing seem to happen in my Dawn theme. I wanted to make the header menu and the announcement bar sticky not to move while scrolling down the page, i need help with that.
Thank you
Hi,
I’m making a youtube video, this being my first one along with the transparent header. Please wait til Monday 🙂
Thanks for your info! it works for me!
Nps
How to Create a Product Image Slider on Dawn Theme
How To Create A Sticky Add To Cart On Shopify
How to Create a Featured Product Slider on Shopfiy
How to Create a Color Swatches on Dawn Theme
How to Create Collection Color Swatches on Dawn Theme
How to Use Automation to Grow Your Shopify Store
SMS Marketing: Why It’s Better Than Email Marketing for Shopify Stores
How To Make Dawn Theme Header Transparent