Transparent Header on Home Page, that changes to solid on scroll for Dawn 15.2.0

Store Design

Topic summary

Goal: Implement a home‑page‑only transparent header in Shopify’s Dawn 15.2.0 that turns solid on scroll; ideally sticky (stays visible while scrolling).

Requirements and constraints:

  • Transparent at top of the home page, becomes solid after scrolling.
  • Must not affect headers on other pages or the mobile layout.
  • Wants a reliable, non-breaking solution; unsure how to back up the site.

Context:

  • Existing forum solutions reportedly cause side effects (header stays transparent only, or alters other pages/mobile).
  • Store URL was shared, but the storefront is password‑protected.

Current status:

  • Respondents asked for the store password to review the implementation and provide specific guidance.

Outcome/next steps:

  • No fix or code provided yet.
  • Progress depends on the store owner sharing access (password) or additional details. Discussion remains open.
Summarized with AI on December 17. AI used: gpt-5.
1

Hello Shopify Community :slightly_smiling_face:

This seems to be a common question but I haven’t found a solid answer! In the Dawn Theme, on the home page, I like to make the Header transparent. Once, the user scrolls down, the header should appear solid. I would prefer a sticky header. This should only happen on the home page.

It seems like a lot of solutions on here create other issues. I’m not sure how to back up my website so I would really like to get this right! Some solutions make the header transparent only and not solid on scroll, others will screw up the headers for the other pages and mess up the mobile version.

Anyone in here with magic skills, who could help me?

Here is the site: www.torontogirl.co

Thanks a bunch in advance! :raising_hands:

2

Hi, @MichealJordan

You didn’t share your store password.

3

Hi @MichealJordan

Please give me your password protection of store