A generous header looks right when someone arrives and wastes space for the rest of the visit. A header that disappears entirely takes the navigation with it.
A shrinking header does both jobs: full height at the top of the page, a compact bar once the visitor starts reading.
Before You Start
- Edition: Pro — sticky containers and the shrink effect needs Nexter Blocks Pro.
- Block to enable: Container, switched on under Nexter > Blocks in your WordPress dashboard.
- A header built from a Container block — see the Container block guide and the sticky container guide.
Video Tutorial
Steps
- Set the full height of the header container, using padding rather than a fixed height so the content sets the size.
- Switch sticky on for the container.
- Switch on the shrink on scroll up behaviour.
- Set the sticky padding — the smaller padding the header takes once it is stuck. This is what produces the shrink.
- Give the stuck state a background and a shadow so it separates from the content behind it.
- Publish and scroll the real page.
How It Behaves
There is no separate shrink control. The header shrinks because the stuck state has smaller padding than the normal state.
- Measured on a published page: a container with sticky and the scroll-up option set rendered
tpgb-sticky-enable, with the sticky padding stored alongside it. - Padding is the mechanism. Set the normal padding generously and the sticky padding tightly — the difference between the two is the amount of shrink.
- Use padding, not a fixed height. A fixed height fights the logo and the menu at small widths; padding lets the content decide.
- The transition is applied to the container, so the change is animated rather than a jump.
- Measured with Nexter Blocks Pro deactivated: this effect disappears completely and the container renders as a plain section, with nothing on the page to say why.
Limitations
- Pro only — measured with Nexter Blocks Pro deactivated, the sticky class is absent entirely and the header simply scrolls away.
- A big logo limits how far it can shrink. The header cannot become shorter than what is inside it, so give the logo a smaller size in the stuck state too.
- Anchor links can land under the header. The browser scrolls the target to the very top of the window, which is where the stuck header sits — relevant if you use anchor links.
- Shrinking on a phone is rarely worth it. A mobile header is already compact; the movement is more distracting than useful.
Troubleshooting
The header does not shrink
The sticky padding is probably the same as the normal padding, so there is nothing to shrink by. Set the sticky padding smaller.
The header does not stick at all
Check Nexter Blocks Pro is active, and see the sticky container guide — a parent with its own overflow rule is the usual cause.
The content jumps when it sticks
That is the page reflowing as the header leaves the flow. Give the section below a little top spacing so the change is less abrupt.
My anchor links land in the wrong place
The stuck header is covering the target. Add top padding to the linked sections to compensate.
The logo looks squashed once stuck
Set a smaller logo size for the stuck state as well, rather than relying on the container padding alone.
