Make header transparent and white on scroll up Dawn theme

Store Design
, , ,
1

Hi Shopify Community :clap:

In the Dawn Theme, on the home page only I would like to make the Header transparent and once scrolls up, the sticky header should appear white color. Here is the website: https://u6bynoinwf4dpfgg-26499285045.shopifypreview.com

Hoping someone can help me out! I’ve been playing around with this for a while, trying a bunch of different solutions i’ve found in the community but nothing seems to work.

Thanks in advance!

2

We can do it with some CSS, How about you send me an mail at ayanrjpoot@gmail.com , and send me a URL .myshopify.com one and I will request access to your store with the appropriate permissions and i will implement it for you.

1 Like
3

Hello! Thank you so much, I’m so grateful you offered to do it for me- so helpful and kind of you. I think it might be best to also paste the css solution here to help others in the community having this problem too.Thanks againn! :slightly_smiling_face:

4

Making it transparent would require javascript , but if we simply want to make it sticky there’s a simpler solution here are the steps:

  1. Open your theme customizer

  2. Select the header

  3. And you will find the option to enable the sticky header .

Hope you it works for you feel free to contact if you have any question.

5

Yes its already sticky header. Wanted it to be transparent also. I’ve emailed you, thank you :slightly_smiling_face:

6

open header.liquid file :

Replace the following code


with

```markup

Replace the following code

```markup

with

```markup

and replace :

```markup

with

```markup

#### Add code in header.liquid above {% schema %}

```markup
{% if template == 'index' and section.settings.transparent_header %}
{% style %}
  .template-index .site-header-transparent .header__icon, .template-index .site-header-transparent .header__menu-item span, .template-index .site-header-transparent .header__menu-item svg, .template-index .site-header-transparent .header__active-menu-item {
    color: {{ section.settings.content_color }};
   }
   .site-header-transparent {
     background: transparent;
     position: absolute;
     border: none;
     width: 100%;
     left: 50%;
     transform: translateX(-50%);
   }
   .site-header-transition {
      margin-top: var(--header-height);
   }
{% endstyle %}

{% endif %}

header.liquid within Scheme code below “t:sections.all.colors.label” paste the following code :

{
      "type": "header",
      "content": "Transparent Header"
    },
    {
      "type": "checkbox",
      "id": "transparent_header",
      "label": "Enable transparent header",
      "default": false
    },
    {
      "type": "color",
      "id": "content_color",
      "label": "Change icon & text color"
    },

Add code in theme.liquid

Replace the following code

with

Delete header.liquid code

Delete everything between the {% javascript %} {% endjavascript %} tags

Add code in global.js

Add the following code on the bottom of global.js file

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);