Hello, I’m trying to change my solid black header in Dawn theme 8.0 into a sticky transparent header that can turn a black color when scrolling down or hovering over the header itself. I would prefer to have the transparent banner be a “black to transparent, top down gradient” similar to the header the Gucci website has. I would like to keep this header for every page I have.
Here is my website URL: Risingsunarchive.com
Hello @Settingsun
I would like to give you the recommendation to support you so kindly follow steps below:
<style>
{%if template contains 'index'%}
.header-wrapper.gradient{
background:transparent !important;
}
.scrolled-past-header .header-wrapper.gradient{
background:#ffffff!important;
}
#MainContent{
margin-top:-96px!important;
}
{%endif%}
</style>
I hope the above is useful to you.
Best regards,
GemPages Support Team
Hello, Looks like after adjusting the background color numbers and fixing the margin-top to -120 instead of -96, It worked out! However, there is not color gradient, similar to the Gucci website and the transparent header doesnt transfer to other pages. Is there any way to fix those two parts?
Hello @Settingsun
.header {
position: sticky;
top: 0;
z-index: 100;
background: linear-gradient(to bottom, rgb(165 227 183), rgba(0, 0, 0, 0));
transition: background 0.3s ease;
}
.header.sticky {
background: linear-gradient(to bottom, rgb(224 152 152), rgba(0, 0, 0, 0));
}
.header:hover {
background: linear-gradient(to bottom, rgb(0 0 0 / 42%), rgba(0, 0, 0, 0));
}
window.addEventListener('scroll', function() {
var header = document.querySelector('.header');
var scrollTop = window.pageYOffset || document.documentElement.scrollTop;
if (scrollTop > 0) {
header.classList.add('sticky');
} else {
header.classList.remove('sticky');
}
});
