If you’ve built a site with WordPress Full Site Editing, you’ve probably hit the same wall: getting your header to behave the way you actually want it to is surprisingly difficult.
Block themes are powerful, but sticky headers, transparent overlays, and scroll effects require JavaScript — and that’s not something the block editor gives you out of the box.
Sticky Header for Block Themes is a lightweight plugin that fills that gap, without touching your theme files or requiring any code.
What it does
At its core, the plugin makes your block theme header sticky — it stays at the top of the screen as the visitor scrolls. But the interesting part is what happens next.
Overlay mode
One of the most requested effects in modern web design is a header that floats transparently over a full-screen hero image.
In a standard block theme, your header sits above the content — the hero image always starts below it, leaving an awkward gap.
The plugin’s overlay mode solves this by pulling the page content up behind the header, so your hero fills the full screen from top to bottom with the header floating over it.
Set the header background to transparent in the Site Editor and the effect is instant.
Background styles
When the header is overlaying content, you often want it to appear opaque as the visitor scrolls into the regular page content — otherwise your menu links become unreadable over a white background.
The plugin gives you three options:
- Solid colour — choose a colour and opacity. The header fades in a semi-transparent background as soon as the page loads.
- Frosted blur — a glass-effect background with customisable blur amount and tint colour.
- Chameleon — the most eye-catching option. The header automatically detects the background colour of whichever section is currently behind it and adopts that colour. Scroll from a dark hero into a white section and the header transitions from dark to white. Scroll into a teal section and it shifts to teal. The text colour also adapts automatically — white text on dark sections, dark text on light sections — so your menu stays readable without any manual configuration.
Hide on scroll
Optionally, the header can slide off-screen when the visitor scrolls down and reappear when they scroll back up — a common pattern that keeps the reading experience clean without sacrificing navigation access.
Mobile control
The sticky behaviour can be disabled below a configurable breakpoint if you want a different experience on small screens, without disabling the plugin entirely.
Works with any block theme
The plugin targets the standard block theme header structure automatically, so it works with Twenty Twenty-Five, Ollie, any other FSE-compatible theme without configuration.
If your theme uses a non-standard structure, you can specify a custom CSS selector.
No theme modifications required
Everything is configured from a single settings page under Appearance → Sticky Header. No child themes, no functions.php edits, no custom CSS required to get started.
If you’re building client sites with Full Site Editing, or running your own block theme and want professional header behaviour without a page builder, Sticky Header for Block Themes handles the hard parts so you don’t have to.
Leave a Reply