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 and above, and Shopify 2.0 FREE themes

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. 

 What you are buying:

  • Mobile friendly
  • Simple edits

What makes our code better:

  • We do not use external libraries, with that being said, our code will have no to minimal effect to your website's speed performance
  • We do not leave or add codes use to advertise for our website
  • Our code is mobile friendly

Any issues related to the code will be fix with no additional cost, excluding code customization requests. Simply contact us with "Chat with us." We are just a button away. 

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

.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

 

See image below for placement.

transparent header placement

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!
Voltar para o blogue

5 comentários

Hello, the code looks great on the home page, however, it doesn’t work that well on the other pages. How can I also update it for those pages? Thanks!

Juliette Petit

Hi Anouschka,

The code should not affect the banner btw. Please make sure you have the recommended image size. Shopify recommends 2048×2048

Made4Uo

Hello! it all worked thanks! The only thing I’m struggeling with is the banner size of the Dawn theme. My banners turn out pixelated. Hope you can help.

Anouschka

Hi @Dzana,

Please contact me at “Chat with us!” so I can assist you better. You need to change the code a little bit

Made4Uo

Hey, I have installed this succesfully for my homepage. Now I want to add it to my about us pag, too. Can you tell me how to do that?
Thanks!

Dzana

Deixe um comentário