Color changing sticky header when scrolling, transparent to white (dawn theme)

kaylaemcfadden
New Member
6 0 0

Hello, I want my header to change from transparent with white text and logo to white background with black text and a black logo when hovering, like in this website: https://www.daniellefrankelstudio.com.

 

My website is lolaatelier.fr

 

I was able to make it transparent with the white text and logo, and I tried this code below which worked, but it only changed it for my home page and the logo was still white. I need this change to happen to all the pages of my website. Do I need to upload the black version of my logo in the assets? Please help! Thank you

 

 

{% if template == 'index' %}
<style>
.scrolled-past-header .header-wrapper {
background-color: #fff;
transition: background-color 800ms ease;
}
.scrolled-past-header .header-wrapper * {
color: #000000; 
transition: color 800ms ease;
}
</style>
{% else %}
<style>
.shopify-section-group-header-group .header-wrapper {
background-color: #fff;  /*your colour choice*/
}
.shopify-section-group-header-group .header-wrapper * {
color: #ffffff;
}
</style>
{% endif %}

Reply 1 (1)

LuffyOnePiece
Shopify Partner
410 65 66

@kaylaemcfadden 

 

Try adding below Css in if condition, Hope this will fix the issue.


.shopify-section-header-sticky.scrolled-past-header .header-wrapper.gradient {
    background: transparent !important;
}
Sandeep Pangeni
Need help with your store? sandeeppangeni17@gmail.com
For quick response, Contact In WhatsApp +9779867521184