Shopify

How To Make Dawn Theme Header Transparent

Looking to make your header transparent 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

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.

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.

21 Replies to How To Make Dawn Theme Header Transparent

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

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

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

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

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

    1. Hi Rose, without seeing your website I can’t tell what the reason in, can you give me a link with the issue.

  2. 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 πŸ™‚ πŸ™‚ πŸ™‚

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

  3. Hi there! The option to change the icon & text colour appears in the customiser, but it doesn’t actually modify anything when I change it. What could I have done wrong?

    1. Hi Etay,

      It should already do that – I’ve been away for a while, I’m about to be active again – Dawn 3.0 came out along with the child themes, I’ll reimplement the code and see if its all good. But from my demo site, that’s exactly what it does.

  4. Hi, I added this and the slideshow tutorial to my page home page. But on mobile, everytime the slideshow goes to the next slide, the header goes back to being transparent. Any idea what this is?

  5. This is amazing ! I just coded for the first time in my life
    Thanks John. This was super helpful. After wasting time on stupid paid content for this code, I fianlly fixed my header with even more options for customization

    Thanks a bunch !

  6. I added all the codes. And now I can access the transparency BUT I don’t have to option to upload my logo anymore! Did I enter something wrong?

  7. I followed your instructions and it worked but there is a gap between the image banner and the Flash bar. How can I remove it. Many thanks

    My store: rebelsaintco.myshopify.com

Leave a Reply to Etay Cancel reply

Your email address will not be published. Required fields are marked *