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

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:


My website is


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

Reply 1 (1)

Shopify Partner
410 65 66



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?
For quick response, Contact In WhatsApp +9779867521184