On Home Page, Header should be transparent, when scroll down, should turn to normal, solid white

Store Design
,

Topic summary

Goal: On Dawn theme, make the home page header transparent over the hero image, then switch to a normal solid white header when the user scrolls; other pages should keep a solid white header. Sticky behavior is optional.

What was tried: CSS edits were suggested and added in theme.liquid (before ), including setting the header background to transparent and adjusting the banner position, later reinforced with !important. Helper noted that changing link/logo colors on scroll would require JavaScript.

Current result: The header is now transparent on the home page. However, when scrolling, the header does not become solid white and overlaps page content. The same transparency behavior unintentionally affects subpages, which should remain solid white. Mobile shows the same issues.

Remaining need: Implement a solid white header background on scroll (home page only) and ensure all other pages always use a solid white header. Link/logo color change on scroll (if needed) would also require JavaScript.

Status: Unresolved. Helper indicates the remaining behavior needs additional code (likely JavaScript) and suggests involving a developer. Screenshots were shared to illustrate outcomes.

Summarized with AI on January 19. AI used: gpt-5.
7

Hi Ribe, thanks a lot. It made the Header transparent :slightly_smiling_face: I changed the hero image, so for now there is no need to make the header in white font.

However, if I scroll down on the home page, the header background is not solid white and overlaps with the site’s content. Once scrolled down, the header should have a white solid background. This same behavior happens on the other subpages as well. The header should have a white solid background. Same behaviour is for the mobile version.

Tom202_2-1693294065480.png
Tom202_2-1693294065480.png1870×955 261 KB

You think, you might find a solution here :slightly_smiling_face: ?