Transparent Header (only on home page) - Dawn Theme

Solved
ByAprilCo
Shopify Partner
44 0 10

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
5587 1025 1055

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 and Accept a solution. - Donate: Buy coffee - or Paypal me ❤️
- Ryviu - Product Reviews app, collect consumer photo reviews, import reviews from AliExpress, Amazon, Etsy, Shoppe and Walmart and CSV.
- Lookfy app: Create Image Lookbook, Photo Gallery with product hotspots
- Enjoy 3 months of Shopify for $1/month. Sign up now

View solution in original post

Replies 3 (3)
Dan-From-Ryviu
Shopify Partner
5587 1025 1055

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 and Accept a solution. - Donate: Buy coffee - or Paypal me ❤️
- Ryviu - Product Reviews app, collect consumer photo reviews, import reviews from AliExpress, Amazon, Etsy, Shoppe and Walmart and CSV.
- Lookfy app: Create Image Lookbook, Photo Gallery with product hotspots
- Enjoy 3 months of Shopify for $1/month. Sign up now

ByAprilCo
Shopify Partner
44 0 10

ABSOLUTE LEGEND! Thankyouuuu 

Dan-From-Ryviu
Shopify Partner
5587 1025 1055

You are most welcome, @ByAprilCo 

- Helpful? Like and Accept a solution. - Donate: Buy coffee - or Paypal me ❤️
- Ryviu - Product Reviews app, collect consumer photo reviews, import reviews from AliExpress, Amazon, Etsy, Shoppe and Walmart and CSV.
- Lookfy app: Create Image Lookbook, Photo Gallery with product hotspots
- Enjoy 3 months of Shopify for $1/month. Sign up now