How to Make Your Sidebar Sticky in the Kadence Theme

In this article, I will show you how to make the sidebar sticky in Kadence Theme. You can easily enable a sticky sidebar in WordPress just by toggling the settings in the theme customizer.

Most other themes require you to use a separate plugin like WP Sticky Sidebar or to manually add CSS or JavaScript. However, Kadence Theme has a built-in sticky sidebar feature, so you don’t need an external plugin.

Just follow the steps below to make the entire sidebar sticky or to make the last widget in the sidebar sticky.

Why you need a sticky sidebar

A sticky sidebar can be useful in a variety of cases, such as:

• To keep a widget visible at all times, even when the user scrolls down the page.
• To display a banner ad or table of contents block in the sidebar that is always visible to users.
• To keep a contact form or other important information accessible at all times.

Steps to make the sidebar sticky

1. Go to Appearance > Customize > General > Sidebar.
2. Toggle the Enable Sticky Sidebar option to On.
3. If you want to make only the last widget sticky, toggle the Only Stick Last Widget option to On.
4. Click Publish.

Your sidebar should now be sticky.

How to Make Your Entire Sidebar Sticky Using The Kadence Theme

To make the entire sidebar sticky in a Cadence theme, go to Appearance > Customize.

Now you have to go to General option and select Sidebar option as shown in the screenshot below.

Now you will see the option “Enable Sticky sidebar“.

Simply toggle that option and the sticky sidebar will be enabled in the Cadence theme.

You can now make the last widget in your sidebar sticky using the Cadence theme. After you enable the first option, it will show a separate option “Only stick last widget”.

Just enable it and the last widget on your sidebar will stick to the entire sidebar instead.

How to Make sidebar sticky using Custom CSS

If you are using the Kadence Hook element, the toggle switch for the sticky sidebar may not work in some cases. In this case, you can use the following CSS in the Additional CSS section to enable a sticky sidebar in your Kadence theme:

/* Make last sidebar widget sticky in Kadence */
@media (min-width: 1024px) {
    #wrapper {
        overflow: visible;
    }
	
    .sidebar-inner-wrap {
        display: block;
        height: 100%;
    }
	
    .sidebar-inner-wrap section:last-child {
        position: -webkit-sticky;
        position: sticky;
        top: 20px;
    }
}

The custom CSS we provide performs two important functions:

A. This makes the last sidebar widget sticky, meaning it stays in place on the screen when you scroll down, but only if the screen is at least 1024 pixels wide. This is because, on some websites that use the Cadence theme, the sidebar disappears at that width. If your site behaves differently and you want to change this behavior, you can adjust a specific line of code.

B. Determines how much space the sticky widget should occupy from the top of the screen. In the code we’ve given you, we’ve set the space to 20 pixels from the top. If you want the widget to stick to the very top, you can use 0 pixels, or if you want to move it down a bit, you can change the number. You can do this by editing the second line of code.

top: 20px;

So, if you want to change when the widget becomes sticky or how far it sticks, you can modify those lines of code. That’s all you have to do!

Conclusion

I’ve shown you two different ways to enable sticky sidebar in Cadence theme. You can either make the entire sidebar sticky or make the last widget sticky.

If you have any doubts, feel free to ask me in the comments section.

FAQs about sticky sidebars in the Kadence theme