Creating Sticky Sidebars In Kadence

We are covering three ways of creating sticky sidebars using Kadence, CSS code, or a plugin. When set up, you’ll want to ensure that your sidebar is always visible to make it easy for your readers to scroll through the page.

Here’s how you can achieve your sticky sidebar:

Sticky Sidebar Using Kadence

If you have Kadence Theme Pro, you can easily enable sticky sidebars without adding an additional plugin.

To enable the Sticky Sidebar, go to Appearance > Customize, then navigate to General > Sidebar Layout. Enable the “Sticky Sidebar” option, then adjust the padding or offset settings to ensure it works well with your content. Once enabled, save your changes, cache your website, refresh, and preview the page to ensure the sticky sidebar works as expected.

Sticky Sidebar Using Custom CSS

If you prefer using custom code to create a sticky sidebar, create or edit a page or post in the WordPress block editor (Gutenberg). Use Kadence Columns or Row Layout blocks to create a two-column layout, where one column contains your main content and the other contains the sidebar widgets that you want to display.

NOTE: You are effectively creating your ‘content – sidebar‘ using a post or page.

After setting up your columns, you’ll need to apply custom CSS to make the sidebar sticky, use the following CSS code:

.sidebar-class {
position: -webkit-sticky;
position: sticky;
top: 20px; /* Adjust this value based on your header height */
}

Replace .sidebar-class with the class of the element you want to make sticky (you can add a custom class in the block settings under “Advanced” > “Additional CSS Class” that’s in the settings to the right on your post or page).

Ensure that the sticky sidebar works well on both desktop and mobile devices. You may want to disable the sticky functionality on smaller screens by adding media queries:

@media (max-width: 768px) {
.sidebar-class {
position: static;
}
}

Once enabled, save your changes, cache your website, refresh, and preview the page to ensure the sticky sidebar works as expected.

Sticky Sidebar Using A plugin

We do not recommend using many plugins because too many can cause performance issues and incompatibilities. If you prefer a plugin over the other choices above, we recommend Q2W3 Fixed Widget. It is a free forever plugin and can be downloaded from Instawp.

Download the plugin from Instawp and leave it in zip format. Upload, install, and activate the plugin on your website, then go to Appearance > Widgets. Open the widget settings for any widget you want to be sticky and check the “Fixed Widget” option. In the plugin settings, you can configure additional options like margins, offsets, and stopping points for your sticky widgets.

NOTE: If some of these options are unavailable, you most likely do not have the Kadence Pro installed.