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

Store Design
, , ,

Topic summary

A user wants to implement a color-changing sticky header across their entire Shopify store (lolaatelier.fr), transitioning from transparent with white text/logo to white background with black text/logo when scrolling—similar to daniellefrankelstudio.com.

Current Issue:

  • Existing CSS code only works on the homepage
  • Logo remains white instead of changing to black
  • Effect doesn’t apply to other pages

Key Questions:

  • Does a black version of the logo need to be uploaded to assets?
  • How to extend the functionality site-wide?

Proposed Solution:
Another user suggested adding specific CSS targeting .shopify-section-group-header-group .header-wrapper.sticky-header-ion.scrolled-past-header .header-wrapper gradient with background: transparent !important; within an if condition.

The discussion remains open with the original poster awaiting clarification on implementation details and asset requirements.

Summarized with AI on November 11. AI used: claude-sonnet-4-5-20250929.
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;
}