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 %}">
Change Header.liquid
Head over to your Section folder, and find header.liquid, there will be mulitple changes and additions here, so follow closely.
Change The Header Tag
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 %}">
Change The Details Tag
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 }}">
Change The Details-Modal Tag
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">
Add Code Above Schema Tag
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 bluish.io --->
<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 %}
Add Code Inside The Schema Tag
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.
No comments: