How To Have Header on home page Not Transparent On Scroll ? Dawn theme

Store Design
, ,

Topic summary

A user is seeking help with the Dawn theme’s transparent header behavior on the homepage. The issue: when scrolling down, the transparent header with white menu text and logo remains transparent, making these elements invisible against the page content.

Desired outcome:

  • Sticky header should transition on scroll from transparent to white background
  • Logo and menu text should change from white to black for visibility

Current status:

  • Another user shared a link to a related solution thread
  • The original poster found the linked solution unclear, specifically uncertain about where to paste the provided code
  • The discussion remains unresolved with the user still needing clearer implementation instructions
Summarized with AI on October 29. AI used: claude-sonnet-4-5-20250929.
1

I have transparent header on my home page with white menu texts and logo. Of course when I scroll down it stays like that and the white header menus and logo aren’t visible anymore.

I need on scroll my transparent sticky header to change with white background, black logo and black menu text, How to do this?

I think is very hard because even @Moeed can’t manage to fix it :slightly_smiling_face:

2

https://community.shopify.com/c/shopify-design/transparent-header-dawn-theme-fix/m-p/2908427#M762459

3

I saw this. But I didn’t understand where to paste this codes and all. Is explained well