woocommerce Case study
Liquid Glass Mobile Header
On phones, the store's header is a fixed liquid-glass bar: blurred, gold-tinted and aligned with the notch, paired with a sticky bottom nav in the same finish. I shipped the whole treatment as a single MU plugin rather than a theme rewrite.
The business problem
A translucent sticky header needs the content below it to be offset by exactly its height. If that offset is computed in JavaScript after load, the first frame renders at the wrong position and everything jumps. On top of that the store runs Elementor, which wraps the footer in its own containers, so styling the footer to match meant targeting markup the page builder generates rather than markup I control.
What I delivered
- a2-mobile-header-fix.php at version 1.1.5: a translucent mobile header, a sticky bottom navigation bar and a final footer, delivered as one MU plugin.
- A content offset that is stable on the first frame, so the page does not shift once styles and scripts have finished loading.
- Safe-area handling, so the bottom navigation clears the home indicator on phones that have one instead of sitting underneath it.
- Footer tinting that targets Elementor's inner wrappers, so the footer matches the header rather than showing the builder's default background through it.
- Body classes added through the body_class filter, so all of the styling hangs off a documented hook rather than off markup assumptions.
Technical approach
- The offset is emitted in wp_head as part of the initial render, not calculated afterwards. Anything that runs after the first paint is a layout shift by definition.
- The footer is hard-locked to its position because a page builder will otherwise reflow it as its own assets arrive.
- Targeting Elementor's inner wrappers rather than fighting them with broader selectors keeps the override narrow and predictable when the builder updates.
- Everything is scoped to mobile through body classes, so the desktop layout is untouched by any of it.
Result and evidence
The header, bottom navigation and footer render in their final positions on the first frame. The visible result is that the page stops moving underneath the customer during load, which on a mobile catalog is most of the perceived quality.
Commercial value
First impressions on mobile are decided in the first second, and a page that jumps reads as broken regardless of how fast it actually is.
Readable implementation brief
implementation_brief {
project: "Liquid Glass Mobile Header"
file: "mu-plugins/a2-mobile-header-fix.php (v1.1.5)"
parts: "translucent header + sticky bottom nav + footer"
key_fix: "content offset emitted in wp_head, stable on the
FIRST frame; no post-load recalculation"
safe_area: "bottom nav clears the home indicator"
builder: "footer tint targets Elementor inner wrappers"
scoping: "body_class flags; desktop untouched"
}What this project shows
The first-frame offset is the part I would point at. It is the difference between a header that looks right in a screenshot and one that behaves correctly on a real device on a slow connection.
Working with Elementor's generated markup rather than against it is what keeps this maintainable. Broad overrides win today and break on the next builder release.