--- title: "How To Create a Sticky Column in WordPress?" url: https://nexterwp.com/docs/add-sticky-column-in-wordpress/ date: 2024-03-01 modified: 2026-09-21 lang: en author: "Aditya Sharma" description: "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..." image: https://nexterwp.com/wp-content/uploads/2024/05/sticky-column-settings-overview-1024x519.jpg word_count: 562 --- # How To Create a Sticky Column in WordPress? ## Key Takeaways - Nexter Blocks adds a Sticky Column option to any inner container inside a multi-column Container block, and it appears automatically when the Container block has two or more columns. - Sticky Column uses Top Spacing and Bottom Spacing offsets plus Sticky Desktop, Sticky Tablet, and Sticky Mobile toggles, so the sticky behavior can be controlled per device without custom CSS. - Sticky Column activates only when the adjacent column has more content than the viewport height, so a short sibling column never visibly sticks. - Nexter WP troubleshooting notes that a confirmed FluentSupport ticket #14754 report shows Sticky Column can stop after editing if the toggle is no longer on the correct inner container, and width conflicts can make the sticky column expand or overlap the other column. 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. [LIVE BLOCK LINK](https://nexterwp.com/nexter-blocks/extras/wordpress-sticky-column/) ## 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](https://nexterwp.com/docs/add-a-container-in-wordpress/).- 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. ![Selecting the inner column](https://nexterwp.com/wp-content/uploads/2024/03/sticky-column-inner-container-extra-options.png) - Switch **sticky column** on. ![Enabling the sticky column option](https://nexterwp.com/wp-content/uploads/2024/03/sticky-column-demo-1.gif) - 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-sticky` and `tpgb-tab-column-sticky`; with tablet and mobile switched off, only `tpgb-column-sticky` remained.- **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](https://nexterwp.com/docs/make-a-sticky-container-in-wordpress/). ## 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. ## Related Docs - [Add equal column height in WordPress](https://nexterwp.com/docs/add-equal-column-height-in-wordpress/)- [Add a container in WordPress](https://nexterwp.com/docs/add-a-container-in-wordpress/)- [Make a sticky container in WordPress](https://nexterwp.com/docs/make-a-sticky-container-in-wordpress/)- [Advanced tab settings](https://nexterwp.com/docs/use-advanced-tab-in-nexter-blocks/)