Sticky sidebar in Astra, GeneratePress, Kadence and OceanWP: the theme option or the CSS that works

Last updated: 29 October 2026

Four of the most installed free WordPress themes handle a sticky sidebar in four different ways. Two have a switch in the Customizer, two have none, and the CSS that works is different in each because the sidebar is built differently. Here is what each theme offers, what its option really does, and the CSS that made a sidebar, or only its last widget, stay in view in our tests.

Short version: in Astra and Kadence, turn on Enable Sticky Sidebar under Appearance → Customize → General → Sidebar; Kadence can also stick only the last widget. GeneratePress and OceanWP have no option: a position: sticky rule on the last widget alone does nothing there, because the box around the widgets is only as tall as they are. The CSS below gives that box, or the whole column, the room it needs.

We make a sticky widget plugin, Quicksloth Sticky Widget, so we are not neutral; everything on this page except the last section needs no plugin. We read the code of each theme and tested every case on 29 October 2026 on WordPress 7.1.4 with the free versions of Astra 4.14.2, GeneratePress 3.6.1, Kadence 1.5.2 and OceanWP 4.2.8, no plugins active, a long post and three classic widgets in the sidebar, in Chromium 153 and Firefox 155 at 1280 × 800 (and narrower windows for the breakpoints). We did not test Safari, phones or the themes' paid add-ons.

The four themes at a glance

Before you start: in our test site, Astra and Kadence showed no sidebar on single posts until we chose a layout with a right sidebar in the theme's settings. A sticky option has nothing to stick on a page without a sidebar.

Astra: one switch, the whole sidebar

Astra's free theme has the option since version 4.4.0, under Appearance → Customize → General → Sidebar → Enable Sticky Sidebar (Astra's own page: Sticky Sidebar). In the code, the switch adds the class ast-sticky-sidebar to the page and this rule, only on windows at least 922 px wide (769 px on some older installs, according to the code):

.ast-sticky-sidebar .sidebar-main {
  position: sticky;
  top: 50px;
  overflow-y: auto;
}

A small script then sets max-height: calc(100vh - 50px) on the sidebar and moves it down by the height of the admin bar (when you are logged in) and of Astra Pro's sticky header (if you use one). What we saw:

• With a sidebar shorter than the window, the whole sidebar stayed 50 px from the top until the end of the post, and stopped above the footer.
• With a sidebar taller than the window (three widgets of 500 px), the sidebar became a box 750 px high with its own scrollbar: the last widget showed only if the visitor scrolled inside the sidebar.
• Under 922 px the sidebar moved below the content and scrolled normally.

There is no "last widget only" setting. If your sidebar is long and you want only the last widget to stay, give it room with CSS: the box that holds the widgets in Astra is .sidebar-main, inside a column that already runs the full height of the content.

@media (min-width: 922px) {
  .sidebar-main { height: 100%; }
  .sidebar-main > *:last-child { position: sticky; top: 50px; }
}

Turn the theme's switch off when you use this rule, so the two do not act on the same box.

Kadence: the whole sidebar or the last widget

Kadence's free theme has two switches under Appearance → Customize → General → Sidebar: Enable Sticky Sidebar and, once that is on, Only Stick Last Widget (labels as written in the theme's code; documentation: Kadence sticky sidebars, last updated 2 July 2026). Both work on windows at least 1025 px wide, 20 px from the top, plus the height of Kadence's sticky header if you use one.

• Enable Sticky Sidebar: the whole sidebar stayed at 20 px and stopped above the footer. Like Astra, Kadence limits its height to the window and adds a scrollbar inside it when it is taller.
• Only Stick Last Widget: the first widgets scrolled away and only the last one stayed at 20 px, ending above the footer.
• Under 1025 px the sidebar moved below the content and nothing stuck.

Kadence's page wrapper (#wrapper) carries overflow: hidden; overflow: clip, and the theme sets it back to visible when its sticky option is on. With the option off, our own rule on the last widget did not stick at first, because the box around the widgets (.sidebar-inner-wrap) was only as tall as the widgets. Giving that box the full height made it stick, even with the wrapper's overflow: clip in place (unlike hidden, clip does not create a scroll container):

.sidebar-inner-wrap { height: 100%; }
.primary-sidebar .widget:last-child { position: sticky; top: 20px; }

On Kadence there is little reason to write this yourself: the theme's two switches do the same and handle the breakpoint and the sticky header for you.

GeneratePress: no option, two lines of CSS

The free GeneratePress has no sticky sidebar setting; its developers have said in their forum that it is "more of a plugin/custom CSS kind of thing" (GeneratePress forum, September 2021). The sidebar column (#right-sidebar) stretches to the height of the content, but the box inside it, .inside-right-sidebar, is only as tall as the widgets. That is why this common rule did nothing in our test:

/* Does not stick: the parent box ends with the widgets */
#right-sidebar .widget:last-child { position: sticky; top: 20px; }

Two rules from GeneratePress's support team (GeneratePress forum, May 2021) worked as written:

/* The whole sidebar */
@media(min-width: 769px) {
  .inside-right-sidebar {
    position: -webkit-sticky;
    position: sticky;
    top: 40px;
  }
}

/* Only the last widget */
.inside-right-sidebar {
  height: 100%;
}
.inside-right-sidebar > *:last-child {
  position: -webkit-sticky;
  position: sticky;
  top: 40px;
}

• The whole-sidebar rule kept the sidebar 40 px from the top at 1280 and 1000 px. A sidebar taller than the window stays pinned by its top, so its last part cannot be seen (130 px in our test, with a 910 px sidebar and top: 20px) until the content ends. For a long sidebar, use the last-widget rule.
• The last-widget rule kept the last widget at 40 px and stopped it above the footer. The full-height box reached 20 px into the footer area; you will not see it unless your sidebar has a background colour.
• Under 769 px GeneratePress puts the sidebar below the content, and it scrolls normally.

Older sites: GeneratePress sites set up before version 3.0 keep the old "floats" structure unless someone switched it (the Customizer has a Structure setting with Flexbox and Floats). There the column is not stretched and neither rule sticks. In our test, a third rule from the same support team (September 2021), which turns the content area into a flex row first, did stick on the floats structure:

@media(min-width: 769px) {
  .site-content { display: flex; }
  .inside-right-sidebar { height: 100%; min-height: 100%; }
  .inside-right-sidebar >*:last-child {
    position: sticky;
    position: -webkit-sticky;
    top: 60px;
  }
}

OceanWP: no option, and a floated column

The free OceanWP has no sticky sidebar setting, and its layout is built with floats: the sidebar column (#right-sidebar) is only as tall as its widgets, and the widgets carry the class sidebar-box, not widget. In our test:

• #right-sidebar .widget:last-child matched nothing, and the same rule with .sidebar-box did not stick: its parent ends with the widgets.
• Making the inner box (#right-sidebar-inner) sticky moved it only 40 px before it scrolled away.
• Making the column itself sticky worked, because its parent runs the full height of the post:

@media (min-width: 960px) {
  #right-sidebar { position: sticky; top: 20px; }
}

That keeps the whole sidebar in view, so it suits sidebars shorter than the window: with three 500 px widgets the bottom of the sidebar stayed off-screen until the content ended. To stick only the last widget, the content area has to become a flex row, so that the column stretches. This kept the widths of the two columns unchanged in our test and stuck the last widget 20 px from the top:

@media (min-width: 960px) {
  #content-wrap { display: flex; }
  #right-sidebar-inner { height: 100%; }
  #right-sidebar .sidebar-box:last-child { position: sticky; top: 20px; }
}

Under 960 px OceanWP puts the sidebar below the content, which is why both rules are inside the media query. Changing #content-wrap to flex is a layout change: check a few page types (archives, pages with a left sidebar, WooCommerce pages if you have them) after adding it.

Where to put the CSS

All four are classic themes: paste the rule into Appearance → Customize → Additional CSS, check the live preview on a long post and click Publish. If you use a caching or optimisation plugin, clear its cache afterwards. If a rule does not work on your site, the usual reasons (an overflow on a parent, a fixed header covering the widget, a different sidebar markup) are in Sticky sidebar not working? Six causes and the fix for each.

When a plugin is worth it

The theme options and the CSS above stick a whole sidebar or its last widget, at a fixed distance from the top, until the end of the column. A plugin is worth it when you want something else: a widget in the middle of the sidebar, several sticky widgets that stack, a stop before a specific element such as a related-posts block, turning it off below a window width, or the same setup on a theme you may change later.

Our free Quicksloth Sticky Widget adds a Sticky (stays in view while scrolling) checkbox to each classic widget and a Sticky setting to blocks, and stops before the theme's footer by default. On these four themes the sidebar box is too short for CSS sticky, so in our tests of the plugin on these four themes (21 October 2026, on WordPress 7.1.3 and the theme versions of that day) it switched to its fixed-position fallback and kept the widget in view on each of them. If you use it, leave the theme's own sticky sidebar switch off.

The plugin is free in the WordPress.org Plugin Directory.

More on how to make a widget sticky with and without a plugin, how to keep a table of contents in view and, if you use Fixed Widget (q2w3) today, the Fixed Widget alternative page.

Theme facts from the code of the free versions downloaded from WordPress.org on 29 October 2026; behaviour tested the same day as described at the top. Written with AI tools and checked by Quicksloth.