Re: Make header transparent and white on scroll up Dawn theme

Solved

Make header transparent and white on scroll up Dawn theme

Melinda5
Explorer
52 3 11

Hi Shopify Community👏

 

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!

 

 

 

Accepted Solution (1)
ayan_ali
Shopify Partner
35 1 1

This is an accepted solution.

open header.liquid file :

Replace the following code

 

<header class="header header--{{ section.settings.logo_position }} page-width{% if section.settings.menu != blank %} header--has-menu{% endif %}">

 

with 

 

<header id="site-header" class="header header--{{ section.settings.logo_position }} page-width{% if section.settings.menu != blank %} header--has-menu{% endif %} {% if section.settings.transparent_header %}site-header-transparent{% endif %}">

 

 

Replace the following code

 

<details id="Details-menu-drawer-container" class="menu-drawer-container">
<summary class="header__icon header__icon--menu header__icon--summary link focus-inset" aria-label="{{ 'sections.header.menu' | t }}">

 

 

with

 

<details id="Details-menu-drawer-container" class="menu-drawer-container">
<summary id="header-menu" class="header__icon header__icon--menu header__icon--summary link focus-inset" aria-label="{{ 'sections.header.menu' | t }}">

 

 

and replace :

 

<details-modal class="header__search">

 

with

 

<details-modal id="header-search" class="header__search">

 

 

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

 

{% 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 %}
<!--- Coded by websensepro.com - youtube.com/c/websensepro --->
<script>
  document.addEventListener("DOMContentLoaded", function(event) {
    var headerHeight = document.getElementById('site-header').offsetHeight;
    document.getElementById('MainContent').style.setProperty('--header-height', '-'+ headerHeight + 'px');
  });
  window.onscroll = function() {
    var header = document.getElementById('site-header');
    var main = document.getElementById('MainContent');
    var height = document.getElementById('site-header').offsetHeight;
    if ( window.pageYOffset > height ) {
      header.classList.remove('site-header-transparent');
      main.classList.add('site-header-transition');
    } else {
      header.classList.add('site-header-transparent');
      main.classList.remove('site-header-transition');
    }
  }
  document.getElementById("header-menu").addEventListener('click',function () {
    var sideMenu = document.getElementById('Details-menu-drawer-container');
    var header = document.getElementById('site-header');
    var height = document.getElementById('site-header').offsetHeight;
    if ( window.pageYOffset < height ) {
    if (!sideMenu.classList.contains('menu-opening')) {
      header.classList.remove('site-header-transparent');
    } else {
      header.classList.add('site-header-transparent');
    }
    }
  });
  document.getElementById("header-search").addEventListener('click',function () {
    var search = document.getElementById('template-index');
    var header = document.getElementById('site-header');
    var main = document.getElementById('MainContent');
    var height = document.getElementById('site-header').offsetHeight;
    if ( window.pageYOffset < height ) {
      if (search.classList.contains('overflow-hidden')) {
        header.classList.remove('site-header-transparent');
        main.classList.add('site-header-transition');
      } else {
        header.classList.add('site-header-transparent');
        main.classList.remove('site-header-transition');
      }
    }
  });
</script>
{% 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

 

<body class="gradient">

 

with 

 

<body {% if template == 'index' %}id="template-index"{% endif %} class="gradient {% if template == 'index' %}template-index{% endif %}">

 

 

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

 

Want me to implement it for you, here's my info, I will make any changes you want with just a mail:
Email: ayanrjpoot@gmail.com

Stores helped this month : 12

View solution in original post

Replies 5 (5)

ayan_ali
Shopify Partner
35 1 1

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.

Want me to implement it for you, here's my info, I will make any changes you want with just a mail:
Email: ayanrjpoot@gmail.com

Stores helped this month : 12
Melinda5
Explorer
52 3 11

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! 🙂

ayan_ali
Shopify Partner
35 1 1

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.

Want me to implement it for you, here's my info, I will make any changes you want with just a mail:
Email: ayanrjpoot@gmail.com

Stores helped this month : 12
Melinda5
Explorer
52 3 11

Yes its already sticky header. Wanted it to be transparent also. I've emailed you, thank you 🙂

ayan_ali
Shopify Partner
35 1 1

This is an accepted solution.

open header.liquid file :

Replace the following code

 

<header class="header header--{{ section.settings.logo_position }} page-width{% if section.settings.menu != blank %} header--has-menu{% endif %}">

 

with 

 

<header id="site-header" class="header header--{{ section.settings.logo_position }} page-width{% if section.settings.menu != blank %} header--has-menu{% endif %} {% if section.settings.transparent_header %}site-header-transparent{% endif %}">

 

 

Replace the following code

 

<details id="Details-menu-drawer-container" class="menu-drawer-container">
<summary class="header__icon header__icon--menu header__icon--summary link focus-inset" aria-label="{{ 'sections.header.menu' | t }}">

 

 

with

 

<details id="Details-menu-drawer-container" class="menu-drawer-container">
<summary id="header-menu" class="header__icon header__icon--menu header__icon--summary link focus-inset" aria-label="{{ 'sections.header.menu' | t }}">

 

 

and replace :

 

<details-modal class="header__search">

 

with

 

<details-modal id="header-search" class="header__search">

 

 

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

 

{% 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 %}
<!--- Coded by websensepro.com - youtube.com/c/websensepro --->
<script>
  document.addEventListener("DOMContentLoaded", function(event) {
    var headerHeight = document.getElementById('site-header').offsetHeight;
    document.getElementById('MainContent').style.setProperty('--header-height', '-'+ headerHeight + 'px');
  });
  window.onscroll = function() {
    var header = document.getElementById('site-header');
    var main = document.getElementById('MainContent');
    var height = document.getElementById('site-header').offsetHeight;
    if ( window.pageYOffset > height ) {
      header.classList.remove('site-header-transparent');
      main.classList.add('site-header-transition');
    } else {
      header.classList.add('site-header-transparent');
      main.classList.remove('site-header-transition');
    }
  }
  document.getElementById("header-menu").addEventListener('click',function () {
    var sideMenu = document.getElementById('Details-menu-drawer-container');
    var header = document.getElementById('site-header');
    var height = document.getElementById('site-header').offsetHeight;
    if ( window.pageYOffset < height ) {
    if (!sideMenu.classList.contains('menu-opening')) {
      header.classList.remove('site-header-transparent');
    } else {
      header.classList.add('site-header-transparent');
    }
    }
  });
  document.getElementById("header-search").addEventListener('click',function () {
    var search = document.getElementById('template-index');
    var header = document.getElementById('site-header');
    var main = document.getElementById('MainContent');
    var height = document.getElementById('site-header').offsetHeight;
    if ( window.pageYOffset < height ) {
      if (search.classList.contains('overflow-hidden')) {
        header.classList.remove('site-header-transparent');
        main.classList.add('site-header-transition');
      } else {
        header.classList.add('site-header-transparent');
        main.classList.remove('site-header-transition');
      }
    }
  });
</script>
{% 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

 

<body class="gradient">

 

with 

 

<body {% if template == 'index' %}id="template-index"{% endif %} class="gradient {% if template == 'index' %}template-index{% endif %}">

 

 

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

 

Want me to implement it for you, here's my info, I will make any changes you want with just a mail:
Email: ayanrjpoot@gmail.com

Stores helped this month : 12