Help to sort out the transparent & sticky header in pipeline Dawn V15.3 incl font colours on scroll

Shopify Discussion

Topic summary

A Shopify store owner is implementing a transparent header on their Dawn theme v15.03 homepage but encountering multiple styling issues.

Main Problem:
The header text remains white when scrolling on the homepage, making it invisible against the white sticky header background.

Additional Issues:

  1. Header text on non-homepage pages stays white instead of black (should only be transparent on homepage)
  2. Sticky header behavior only works on the index page, not site-wide
  3. When scrolling back to the top of the homepage, the header doesn’t return to transparent

Current Status:
The user received updated code combining CSS and JavaScript to handle the transparent-to-white transition and font color changes. However, the solution isn’t working as intended—text color still doesn’t change to black on scroll, and non-homepage pages continue showing white text.

The discussion remains unresolved, with the user awaiting a working solution that properly toggles font colors based on scroll position and page type.

Summarized with AI on October 28. AI used: claude-sonnet-4-5-20250929.
1

I have used the below code to set up my transparent header to only show on the home page in Dawn V15.03.

However the white font doesn’t show up when I scroll as my sticky menu background is white so I need to change the font on scroll only for the sticky header to be black.

Please can you also help with the other issues below, all are connected to the transparent header.

  1. I need the header font on all other pages EXCEPT the homepage to be black as this is not set to transparent header.

  2. I need the header to stay sticky on all pages not just the index page.

  3. Why when I scroll down the homepage and the sticky header activates does it not return to transparent when I scroll back up?

Thank you so much for your help.

My current code:

{% if template contains ‘index’ %}

.header-wrapper{ background: transparent; position: absolute; width: 100%; }

{% endif %}

.scrolled-past-header > sticky-header.gradient {
background: #ffffff !important;
padding-bottom: 0.5rem;
}

2

Thank you for sending me the updated code below but it doesn’t seem to change the font black when you scroll so the text disappears on the white and also on the pages other than homepage the text is still white too.

liquid Copy Edit {% if template contains ‘index’ %} .header-wrapper { background: transparent; position: absolute; width: 100%; z-index: 10; color: white; } .header-wrapper.scrolled { background: white !important; color: black !important; } {% else %} .header-wrapper { background: white; position: sticky; top: 0; width: 100%; z-index: 10; color: black; } {% endif %}