How to make entire sidebar sticky in Kadence theme

In this article, I will show you how you can make the sidebar sticky in Kadence Theme. you can easily enable a sticky sidebar in WordPress just by toggling the settings on the theme customizer. In most other themes, either we have to use a separate plugin like WP Sticky Sidebar or we have to use CSS or Javascript manually. But, there is no need for an external plugin for a simple task like a sticky sidebar. Just follow the steps as shown below and you will be able to make the entire sidebar sticky or the last widget in the sidebar sticky.

Table of Contents

But, Before that let’s understand, why you need a sticky sidebar on your website? A sticky sidebar helps in various cases like if you want to show a widget always visible unless the user scrolls down below the page. You can also show a banner ad or a Table of contents block in the sidebar that will always be visible to the users. In that case, you can make the last widget sticky.

How to make entire sidebar sticky in Kadence theme

To make the entire sidebar sticky in the kadence theme, Go to the Appearance > Customize. Now You need to go to the General option and Select the Sidebar Option as shown in the below screenshot.

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

Just Toggle that option and the sticky sidebar is enabled in the kadence theme.

Now you can Make The Last Widget In Your Sidebar Sticky Using The Kadence Theme.

After you enable the first option, it will show a separate option “ Only Stick Last Widget “. Just enable that and the last widget of your sidebar will stick instead of the entire sidebar.

How to Make sidebar sticky using Custom CSS

If you are using the kadence hook element then the toggle switch may not work in some cases. So, You can use the below CSS in the Additional CSS section and enable a sticky sidebar on 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 provided does two important things:

It makes the last sidebar widget sticky, which means it stays in place on the screen as you scroll down, but only if the screen is at least 1024 pixels wide. This is because, on some websites using the Kadence 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.

It decides how much space the sticky widget should have from the top of the screen. In the code we gave you, we set it to have 20 pixels of space from the top. If you want the widget to stick right at 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 another line of code.

top: 20px;

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

Conclusion

I have shown you Two different ways to enable a sticky sidebar in Kadence Theme. You can either make the whole sidebar sticky or make the last widget sticky. If you have any doubt, feel free to ask me in the comment section.