How To Make Dawn Theme Header Transparent

Click here to view our example store

To combine our guide on how to make Dawn Theme sticky header permanent, we decided to create this guide on how to make the Dawn Theme header transparent for the home page. It’s highly recommended to complete the permanent sticky header guide first. We will also create customizer options so you can turn off the transparent header, as well as change the color of the icons and links. Let’s get into it!

Go to edit code, head over to the Layout folder and find theme.liquid, now search for the below code.

<body class="gradient">

We are going to add a class and ID within the body tag, this is so that we can differentiate the home page from all the other pages so the transparent header only happens on the home page. Replace the body tag with the code below.

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

Head over to your Section folder, and find header.liquid, there will be mulitple changes and additions here, so follow closely.

Find the below code.

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

Copy and replace it with the code below. This will add a class and ID so we can reference it during the CSS and JavaScript.

<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 %}">

Find the below 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 }}">

Copy and replace it with the code below. The below code adds an ID to the summary tag so we can reference it in the JavaScript. We also noticed older Dawn themes didn’t include the ID in details tag, so make sure you replace the line with the code below.

<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 }}">

Find the below code.

<details-modal class="header__search">

Copy and replace it with the code below. The below code adds an ID to the details-modal tag so we can reference it in the JavaScript. NOTE: There are 2 details-modal tags make sure you replace both.

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

Scroll down to the {% schema %} tag. Before the tag, copy and paste the below code. This code does a few things, first the styling of the header. It will make the header transparent and allow you to change the color of the icons and links. It also has all the JavaScript which makes the transparency functioning.

{% 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 jotting.com --->
<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 %}

Within the {% schema %} tag, find the below code.

{
      "type": "image_picker",
      "id": "logo",
      "label": "t:sections.header.settings.logo.label"
    },

right before the ‘{‘ copy and paste the below code. This will add 2 options in your header customizer. One, the ability to turn transparency on and two the ability to change the color of your icons and links.

{
      "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"
    },
    {
      "type": "header",
      "content": "Logo"
    },

Guide is now complete! You have an awesome transparent header for your Dawn theme. Remember to turn it on via the customizer.

Written by

Jotter are a group of freelancing Shopify & Shopify Plus Experts. Dedicated to offering design, development, marketing and seo services to grow your Shopify business.

Comments:

  • Allen

    I can not change the color of the logo

    • John From Jotting

      Hi Allen,

      As mentioned on email, you would need to create a second logo field and add a switcher so when transparency is on show the second, when it’s not, show the original, then you need to do a bit of JavaScript to switch between.

      • Joel Gerrity

        Hi there, do you have a guide on how to do this? I am in need of a second logo field for the exact same reason after making my dawn header transparent.

        Thanks!

        • John From Jotting

          Hi Joel, I will add this feature to the guide soon. Just going through a rebrand and going to start a YouTube channel for Shopify guides.

          • Joel Gerrity

            Thanks John, thats all I have left to do and our site is good to go!
            Appreciate the tutorials thus far

  • rose

    hi there, i used this but my menu has now disappeared, I can only see the image banner with the announcement bar above it. have i done something incorrect?

    many thanks

  • Nic

    Nice tutorial – But I really like it when the header reverts to the original colour on hover – stops dropdown menus looking like floating boxes (on desktop) any chance ๐Ÿ™‚ ๐Ÿ™‚ ๐Ÿ™‚

    • John From Jotting

      Hi Nick,

      Definitely an addition I can do, although I need roughly 2-3 weeks. Going through a rebranding and starting a youtube channel, will keep you posted.

Post a comment:

Comment

Type at least 1 character to search

Subscribe:

No Bull, No Fluff. Don't get sold on fake hope! Learn how to grow your business long term. Subscribe now for FREE tips on the latest strategies, techniques and best practices.

Contact Us:

Sydney, NSW, 2000
Australia
john@jotting.com

Bluish.io has rebranded to Jotting.com :) x