Install on ShopifySticky headers: the five ways it was still breaking
Our first sticky fix covered six theme behaviours. It needed to cover thirteen. Both headers now survive all of them, and the overlay header can no longer be clipped away or buried.
We shipped a sticky-header fix three days ago. It was real, and it was not enough: a merchant came back with the header still scrolling away. They were right, and the reason is worth writing down.
Sticky is two things in a row. Our JavaScript adds a class when you scroll, and
CSS pins the bar with position: fixed. The second half only works while no
ancestor element has quietly become what the spec calls a containing block, and
your theme owns two of the three wrappers our header sits inside. The first fix
detected that and repaired it. What it missed was when and how many.
What was still broken
content-visibilityon a theme wrapper breaks the pin, and it is invisible to the obvious check: it applies containment without ever changing thecontainproperty we were reading.translate,rotateandscaleare separate properties fromtransform. Each one breaks the pin on its own, and we were only readingtransform. Same fortransform-styleandoffset-path.- A running transform animation keeps the containing block alive even after our repair has won the cascade. The animation itself has to stop.
- Timing. The repair ran once, on the first scroll. A theme that adds a transform later, when a mobile menu opens or its own sticky-header script runs, broke the pin permanently and was never re-checked.
- Themes that do not scroll the page. Some themes and smooth-scroll scripts scroll an inner container instead of the document. We read the page's scroll position, which stays at zero forever, so the header never became sticky at all and there was nothing for the repair to fix.
All five are fixed on Header Pill and Commerce Head.
The overlay header could be there and invisible
If you use "Sit over the first section", the header is positioned inside a
wrapper with no height. An ordinary overflow: hidden in your theme clipped it
away completely, and a hero section with a high enough stacking order painted
right over it. In both cases the header was in exactly the right place and
showed nothing, then appeared as soon as you scrolled. Both are now detected and
repaired.
We also reworded that setting. It removes the space this header takes up, not your theme's. If your theme's own header or announcement bar is still switched on, hide those first or the pill sits underneath them instead of on your hero.
Getting it
Open Header Pill or Commerce Head in the app and choose Update to latest. Your settings are kept.
Our own test for this now runs 112 checks across both headers, and 52 of them fail if we remove the repair, which is the part that stops it quietly rotting again.