dawn theme transparent header

Transparent Header - Made Simpler

How to see the code

1. Please log in/create an account first. This is to ensure that all purchases are connected to an account and can be viewed on different devices.

2. Purchase the code using the "purchase box" on the specific page of the desired code.

3. After the purchase, please refresh the page.

Compatability: Dawn 2.0 to Shopify 3.0

I am aware that some you are frustrated with my other code so I made a code easier to follow. I added a code that would calculate the header, which can be use to measure how much we bring the content up.

NOTE: Please be mindful on what is the background image and adjust the font-color accordingly. 

To start:

1. Go to your Admin store > Online Store > Themes > Actions > Edit code.

2. Open the header.liquid under the Sections folder.

3. Paste the code below, after the <noscript> section. 

 {% if template == 'index' %}
<style>
#MainContent {
margin-top: -115px;
}
@media only screen and (max-width: 950px) {
#MainContent {
margin-top: -65px;
}
}
sticky-header .header {
padding-top: 0 ;
padding-bottom: 0;
}

.transparent-header {
background: transparent !important;
}
</style>
<script>
document.addEventListener("DOMContentLoaded", function(event) {
const stickyHead = document.querySelector(".header-wrapper");
const resizeObserver = new ResizeObserver(entries => {

const shopifyHeader = document.querySelector("#shopify-section-header");
const mainContent = document.querySelector("#MainContent");
mainContent.style.marginTop = "-" + shopifyHeader.clientHeight + "px";

window.addEventListener('scroll', event => {
if (window.scrollY > 200) {
stickyHead.classList.remove('transparent-header')
} else {
stickyHead.classList.add('transparent-header')
}
})
});
resizeObserver.observe(stickyHead);
})
</script>
{% endif %}

 4. Next, find the "header-wrapper ", then paste the code below next to it. 

 transparent-header

 

Is the menu font not legible? Change the color scheme in the header section when you open the theme editor. No extra code needed for that. I advised using the inverse. 

That's it. No more DevTools (",)

Copied!
Back to blog

Leave a comment