How can I create a transparent header with the Dawn theme?

Topic summary

Goal: make Dawn theme’s header transparent so the hero/banner image extends behind it.

What’s been tried:

  • CSS edits in base.css (set .gradient to transparent; position header and banner__media; adjust negative top values). This worked on desktop for some, and removing the blank space required increasing top offset to -126px.
  • A second CSS targeting specific section IDs attempted to fix mobile and layout offsets; it didn’t work for at least one user.

Issues raised:

  • Mobile view not transparent while desktop is; announcement bar (the top notice strip) loses its color on desktop.
  • Large padding at the bottom of the banner after applying CSS; a screenshot was requested to diagnose.
  • Desire to keep a solid-color announcement bar while the header remains transparent.
  • Need for transparency only on the home page, with default header on other pages.

Resources/updates:

  • A YouTube tutorial was shared for a home-page-only transparent, sticky header.

Status: partially working for some (mostly desktop). Mobile behavior, announcement bar styling, padding, and page-scoped application remain unresolved/ongoing. Action: provide store URLs/passwords or screenshots for targeted fixes.

Summarized with AI on February 14. AI used: gpt-5.

@Kinjaldavra does it work if I share a preview? https://sna59sp6xm40d57c-54010118319.shopifypreview.com