Adding A Sticky Sidebar Using 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.