Shopify

How To Make Dawn Sticky Header Permanent

Looking to make sticky permanent header for your newly installed Dawn theme? Look no further and follow this guide!

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.

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!

Posted by
John From Jotting

Shopify developer, SEO expert, and Social Media marketer who has been in ecommerce game for over 4 years. I've worked on 100's of Shopify ecommcerce stores, understanding each store owners SEO, product, and marketing needs.

13 Replies to How To Make Dawn Sticky Header Permanent

    1. 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.

  1. 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

    1. 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.

  2. 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.

  3. 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

Leave a Reply

Your email address will not be published.

Bluish has rebranded to Jotting :) X