Transparent header and change to white sticky header when scroll

Store Design

Topic summary

A user seeks to implement a transparent header that transitions to a white sticky header upon scrolling.

Initial Request:

  • User provided their theme.liquid code (Dawn theme)
  • Shared store URL for reference

Solution Provided:

  • Add CSS code targeting .scrolled-past-header > sticky-header.gradient
  • Set background to black (#000000) with !important flag
  • Insert before the {% endstyle %} line in theme.liquid

Additional Note:

  • If using white background, text color should be black
  • May require CSS filter for images

Status: Resolved - User confirmed the solution worked with thanks.

Summarized with AI on November 4. AI used: claude-sonnet-4-5-20250929.
2

Provide Theme name or Store URL