A two-column layout where one side is short and the other is long leaves the short side sitting in empty space for most of the scroll.
A sticky column keeps that side on screen — a contents list, a summary, a booking form — while the long column scrolls past it.
Before You Start
- Edition: Pro — sticky columns needs Nexter Blocks Pro.
- Block to enable: Container, switched on under Nexter > Blocks in your WordPress dashboard.
- A Container with two or more columns inside it — see the Container block guide.
- A real height difference between the columns. If both are the same length there is nothing to stick for.
Steps
- Select the column you want to keep on screen — the inner container, not the outer one.
- Switch sticky column on.
- Choose which devices it applies to — desktop, tablet, mobile.
- Set the top and bottom spacing so it does not sit flush against the window edge.
- Publish and scroll the real page.
How It Behaves
The setting is written onto the column as a class, one class per device it is switched on for.
- It goes on the column, not the container. Measured: with the option set on the inner column the published page rendered
tpgb-column-sticky; the same option set on the parent container produced nothing at all. - One class per device. Measured: with all three devices on, the column rendered
tpgb-column-stickyandtpgb-tab-column-sticky; with tablet and mobile switched off, onlytpgb-column-stickyremained. - It sticks within its row. The column stops following once the container it lives in has scrolled past — it does not carry on down the whole page.
- The taller column sets the distance. How long the sticky side stays on screen is decided by the column next to it.
- Measured with Nexter Blocks Pro deactivated: the effect disappears entirely and the block renders as though the option had never been set.
Limitations
- Pro only — measured with Nexter Blocks Pro deactivated, the sticky classes are absent and the column scrolls normally.
- Sticky on a phone is usually wrong. A single-column phone layout has no second column to scroll past, so the column just occupies the screen.
- A tall sticky column cannot stick. If it is taller than the window there is nowhere for it to sit — keep the content short.
- A parent with its own overflow rule breaks it. This is the usual reason a correctly configured sticky column does nothing.
- Watch for a fixed header. Without top spacing the column can slide underneath it — see the sticky container guide.
Troubleshooting
Nothing sticks
The commonest cause is setting the option on the outer container instead of the column. Measured, that produces no class at all. Select the inner column and set it there.
It sticks but slides under my header
Increase the top spacing until it settles below the header.
It stops part way down
It has reached the end of its row. A sticky column only follows for as long as its container is on screen.
It works on desktop but not tablet
Each device has its own switch. Measured, turning tablet off removes tpgb-tab-column-sticky and leaves the desktop class alone.
Nothing happens at all
Check Nexter Blocks Pro is active, then check an ancestor is not setting an overflow rule.
