Goal: Make the homepage header transparent initially, then switch to solid white after scrolling past the hero section.
Initial attempt via CSS in theme.liquid succeeded in making the header transparent but did not change it on scroll. It was clarified that CSS alone can’t handle the scroll behavior; JavaScript (JS) with Shopify’s Liquid (templating language) is required.
The requester implemented JS and achieved the scroll-to-white effect. A follow-up issue emerged: the header wasn’t full-width over hero and other full-bleed sections. Additional edits in theme.liquid resolved the full-width consistency.
A mobile bug remained: when opening the hamburger menu with a transparent header, the menu’s header stayed transparent instead of white. Later, it appeared fixed on the live site, but the specific solution was not shared.
Artifacts: code snippets (Liquid/JS) and screenshots were central to demonstrating results.
Status: Core behavior (transparent-to-white on scroll) and full-width layout are resolved for the site. The mobile fix seems implemented, but the exact steps remain undocumented; another participant requested the solution, so the discussion is effectively open for that detail.
Thanks a lot. I now played around a bit with Javascript and it works perfectly fine.
Here, however one small problem: when I scroll up, the header turns white (good). The header is 100% full width everywhere, except for my hero image and other full width sections (e.g. my liquid video section at the botton).
Any idea, how I can make the header full width all the time?
