Transparent Header (only on home page) - Dawn Theme

Solved

Transparent Header (only on home page) - Dawn Theme

ByAprilCo
Shopify Partner
47 0 12

Hey guys, found the below code in another thread - and works great on home page or pages with large banners on the top, but for pages that dont have images, it shows like the attached  which isnt ideal - how do I set this code to only apply to the home page? Thanks 🙂

 

<style>
.header {
position: fixed;
top: 40px;
left: 0;
width: 100%;
max-width: 100%;
z-index: 999;
transition: background-color 0.3s ease;
}

.header.transparent {
background-color: transparent;
}

.header.black {
background-color: black;
top:0;
}

</style>
<script>
document.addEventListener('DOMContentLoaded', function() {
var header = document.querySelector('.header');
header.classList.add('transparent');
});

// Change header background on scroll
window.addEventListener('scroll', function() {
var header = document.querySelector('.header');
var scrollTop = window.pageYOffset || document.documentElement.scrollTop;

if (scrollTop > 0) {
header.classList.remove('transparent');
header.classList.add('black');
} else {
header.classList.remove('black');
header.classList.add('transparent');
}
});
</script>
{% endif %}

 

 

 

 

 

Screenshot 2023-10-18 at 1.35.50 pm.png

Accepted Solution (1)

Dan-From-Ryviu
Shopify Partner
11537 2258 2441

This is an accepted solution.

Hi @ByAprilCo 

You can change code to this so it will apply to homepage only 

{% if template == 'index' %}
<style>
.header {
position: fixed;
top: 40px;
left: 0;
width: 100%;
max-width: 100%;
z-index: 999;
transition: background-color 0.3s ease;
}
.header.transparent {
background-color: transparent;
}
.header.black {
background-color: black;
top:0;
}
</style>
<script>
document.addEventListener('DOMContentLoaded', function() {
var header = document.querySelector('.header');
header.classList.add('transparent');
});
// Change header background on scroll
window.addEventListener('scroll', function() {
var header = document.querySelector('.header');
var scrollTop = window.pageYOffset || document.documentElement.scrollTop;
if (scrollTop > 0) {
header.classList.remove('transparent');
header.classList.add('black');
} else {
header.classList.remove('black');
header.classList.add('transparent');
}
});
</script>
{% endif %}

- Helpful? Like & Accept solution! - Support me? Buy me a coffee
- Ryviu - Product Reviews & QA app: Collect customer reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Dhgate and CSV.
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- En...
Sign up now.

View solution in original post

Replies 4 (4)

Dan-From-Ryviu
Shopify Partner
11537 2258 2441

This is an accepted solution.

Hi @ByAprilCo 

You can change code to this so it will apply to homepage only 

{% if template == 'index' %}
<style>
.header {
position: fixed;
top: 40px;
left: 0;
width: 100%;
max-width: 100%;
z-index: 999;
transition: background-color 0.3s ease;
}
.header.transparent {
background-color: transparent;
}
.header.black {
background-color: black;
top:0;
}
</style>
<script>
document.addEventListener('DOMContentLoaded', function() {
var header = document.querySelector('.header');
header.classList.add('transparent');
});
// Change header background on scroll
window.addEventListener('scroll', function() {
var header = document.querySelector('.header');
var scrollTop = window.pageYOffset || document.documentElement.scrollTop;
if (scrollTop > 0) {
header.classList.remove('transparent');
header.classList.add('black');
} else {
header.classList.remove('black');
header.classList.add('transparent');
}
});
</script>
{% endif %}

- Helpful? Like & Accept solution! - Support me? Buy me a coffee
- Ryviu - Product Reviews & QA app: Collect customer reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Dhgate and CSV.
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- En...
Sign up now.

ByAprilCo
Shopify Partner
47 0 12

ABSOLUTE LEGEND! Thankyouuuu 

Dan-From-Ryviu
Shopify Partner
11537 2258 2441

You are most welcome, @ByAprilCo 

- Helpful? Like & Accept solution! - Support me? Buy me a coffee
- Ryviu - Product Reviews & QA app: Collect customer reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Dhgate and CSV.
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- En...
Sign up now.

emmadub
Excursionist
19 0 2

Where do you paste this in the code?