Do you want to make a column sticky in WordPress? A sticky column is a column that stays fixed in place on the screen while the rest of the page scrolls. This keeps important content visible, such as a table of contents, a contact form, or an offer summary, without requiring the visitor to scroll back up.
With the Sticky Column option from Nexter Blocks, you can make any column in a multi-column layout stick to the screen as the user scrolls.
Best Used For:
- Blog posts with a sticky table of contents column on the side
- Landing pages where a pricing summary or CTA button stays visible while the visitor reads a long feature list
- Service pages where a contact form column remains accessible as the visitor scrolls through details
Required Setup
- Make sure the default WordPress Block editor is active.
- You need to have the Nexter Blocks plugin installed and activated.
How to Activate the Sticky Column Option?
There are no separate activation steps for the Sticky Column option. When you add a Container block from Nexter Blocks with two or more columns, the Sticky Column option appears in the inner container settings automatically.
Key Features
- Make any column sticky – Enable the Sticky Column toggle on any inner container within a multi-column layout to keep it fixed on screen while the adjacent column scrolls. Use this when one column holds a shorter element, such as a sidebar widget or CTA, that you want to stay in view as a visitor reads longer content in the other column.
- Per-device control – Individually enable or disable the sticky behavior for desktop, tablet, and mobile using the Sticky Desktop, Sticky Tablet, and Sticky Mobile toggles. Use this when the sticky effect improves readability on desktop but takes up too much screen space on mobile.
How to Make a Column Sticky in WordPress?
Add the Container block from Nexter Blocks with multiple columns. Select one inner container.
1. Go to the Layout tab and open Extra Options.
2. Turn on the Sticky Column toggle.
In the Top Spacing field, set the distance in pixels from the top of the viewport where the column sticks. Use this to account for a fixed header so the sticky column does not overlap it.
In the Bottom Spacing field, set the distance in pixels from the bottom of the viewport where the column stops sticking. Use this to prevent the sticky column from overlapping a sticky footer bar.
Enable or disable the sticky behavior for specific devices individually from the Sticky Desktop, Sticky Tablet, and Sticky Mobile sections.
3. On the adjacent column, add content that is taller than the viewport height. The sticky effect activates only when the neighboring column has enough content to scroll past.
The sticky column effect is now active on the page.
