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.
Hi Team, I need you kin help again - I tried asking around here already, but no positive result yet.
I go crazy in trying to make the Header on the homepage (only on the homepage) transparent and when scrolling down, it should turn to solid white. I tried already all solutions here in the board, but nothing helped so far
Any ideas here?
The closest I got, was to add in theme.liquid additional css to make the header transparent, but it wonât turn white when scrolling down.
Hi @Moeed , thanks a lot for your help. It made the header transparent, but when I scoll down, it remains transparent. The header should become solide white, once I scroll down the Hero image.
To make the header white on scroll is possible, but it requires code customization and is not only possible via CSS. It requires Liquid and JS coding. If youâre not familiar with coding then I highly suggest you to hire a Shopify developer who can help you out in accomplishing this task.
If I managed to help you then, donât forget to Like it and Mark it as Solution!
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).
Thanks @Moeed for your quick turnaroud. That worked smoothly.
I have one bug left, I can not find. Namely, when I am in the mobile version with the transparent header, and I touch on the Menu bar icon, the menu opens, but as you can see the menu âheaderâ remains transparent, but should be white.
