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

Store Design
, , ,
1

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’ %}

.scrolled-past-header .header-wrapper { background-color: #fff; transition: background-color 800ms ease; } .scrolled-past-header .header-wrapper * { color: #000000; transition: color 800ms ease; }

{% else %}

.shopify-section-group-header-group .header-wrapper { background-color: #fff; __/*your colour choice*/__ } .shopify-section-group-header-group .header-wrapper * { color: #ffffff; }

{% endif %}

2

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