In this short tutorial, I’ll be teaching you how to use make your sidebar (or your last sidebar widget) sticky using the Kadence theme.

The best part is that we can make the entire sidebar or the last widget sticky in Kadence without using a plugin.

It’s so easy that all it takes is the flip of a toggle switch. 🙂

Yes, you heard that correctly. You can make your entire sidebar or the last widget in your sidebar sticky in Kadence with the flip of a switch. No manual CSS needed.

Many other themes or tutorials tell you to install a plugin such as the Q2W3 Fixed Widget plugin to get a fixed sidebar widget, but there are two things wrong with that.

First of all, who wants to install and manage a separate plugin for something so simple?

Secondly, many of these “plugin” solutions use things such as jQuery. Trust me, the less dependency on jQuery that your site has, the better.

WordPress has been making major changes on the jQuery side of things and, if you can, try to avoid plugins that use jQuery.

In fact, the Kadence theme has been changing some of their more legacy plugins to not use jQuery anymore – yet another reason to love Kadence!

Things in the CSS world have been changing and you can now make elements sticky on your website without any JavaScript or plugins.

This means that you can create a sticky sidebar (or make the last widget sticky) in Kadence and still maintain the super fast speeds that Kadence is known for.

Having a sticky sidebar or sticky widget is sure to increase CTR (click-through rates) which means more conversions. Otherwise, you could use it for many other use cases such as having a sticky table of contents, sticky “About the Author” section, and so much more!

If you aren’t already using the Kadence theme, you probably should be. 😉 The Kadence theme is packed with more features in the free theme than most premium WordPress themes have.

And, as you’ll see from this tutorial, the Kadence theme gives you the ability to really quickly spruce up your website with the flip of a switch.

You can read my full Kadence review if you want to learn more.

How To Make Sticky Sidebar Or Last Widget In Kadence Tutorial

Let’s jump right into the tutorial.

Start Blogging 101 is reader-supported. If you purchase through a link on my site, I may earn a commission. Disclosure Policy

How to Make Your Entire Sidebar Sticky Using The Kadence Theme

If you want to make your entire sidebar sticky using the Kadence theme, it’s very simple. From your WordPress customizer go to General → Sidebar.

Once you are in that section, you’ll see a toggle at the bottom that says “Enable Sticky Sidebar.”

Enable Sticky Sidebar Kadence Theme Customizer

Enable that option and voila! Your entire sidebar in Kadence will now be sticky. As the user scrolls down your page, your sidebar will stay in place.

How many WordPress themes allow you to make your entire sidebar sticky with the click of one button? Hint: Hardly any.

As a best practice, if you have your entire sidebar sticky, you may want to make sure that your sidebar is shorter in length.

This is because if the sidebar extends past the vertical area shown on the screen, it will get a scroll bar.

You very well may want a scroll bar on your sidebar, but keep in mind that this may shift elements in your sticky sidebar and cause unwanted layouts.

As with any layout change, I suggest you test your sticky sidebar at various resolutions to make sure that it behaves the way you want.

If your sidebar is longer in length, you may want to look at the next option where I’ll show you how to make only the last widget in your sidebar sticky.

How To Make The Last Widget In Your Sidebar Sticky Using The Kadence Theme

Now that I’ve shown you how to make your entire sidebar sticky using the Kadence theme, I’m going to show you another option that can be extremely beneficial for some sites.

Say you don’t want your entire sidebar to be sticky, but rather you only want the last widget section to stick as the user scrolls down the page.

Well, luckily for you, Kadence released an update so you can also make only your last widget sticky with the flip of a switch.

After you toggle on the “Enabled Sticky Sidebar” toggle, you’ll see another toggle show that says “Only Stick Last Widget.”

Flip this on and you’re good to go!

Kadence Sticky Sidebar Only Stick Last Widget Customizer

Almost every other WordPress theme out there such as Astra, GeneratePress, or Blocksy make you enter manual CSS to make the last widget in your sidebar sticky. With Kadence, there are 2 toggles. Easy peasy.

Manually With CSS

In the background, Kadence is using some simple CSS to make the last widget sticky.

In some cases (say, if you’re using Kadence element hooks to place elements dynamically into the sidebar), the last widget may not stick correctly when toggling the automatic switch.

I have some very simple code that you can paste in your Additional CSS section that will automatically make the last widget in your sidebar sticky for sites using the Kadence theme.

From your WordPress customizer, click on the Additional CSS section.

Copy and paste the following code to make the last sidebar widget sticky using the 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;
    }
}

You may have to tweak the code by inspecting your last widget and looking at the HTML to see how it should be written, but this will be a good start. 🙂

There are a couple of things that I want to note about the custom CSS above.

First of all, this piece of CSS code is using a media query to only make the last sidebar widget sticky as long as the minimum width of the screen is at least 1024 px.

At 1024 px, this is where the sidebar disappears on my sites using Kadence right now. If yours is different and you want to change that, all you have to do is adjust the line that says:

@media (min-width: 1024px) {

The second thing I want to point out is that you can adjust how far down you want your widget to stick in your sidebar.

In the code above, I give the widget 20px of padding from the top. However, if you want the widget to stick to the very top, you could use 0px or you could push the widget down even more.

In order to adjust the padding of your sticky sidebar widget, all you have to do is adjust the line that says:

top: 20px;

That’s it!

Kadence Sticky Sidebar Use Cases

There are a ton of use cases for using a sticky sidebar or making your last sidebar widget sticky using Kadence.

To supercharge things even more, you can pair using Kadence Element Hooks to conditionally show sticky elements on whatever posts you want!

I have an entire tutorial teaching you how to use Kadence element hooks for endless customization on your website.

Combine the power of a Kadence sticky sidebar widget with Kadence element hooks and imagine all the possibilities you could create!

  1. Show a sticky ad or affiliate banner conditionally based on category or tag
  2. Show a sticky “About the Author” section (see Kadence “About the Author” sidebar element tutorial)
  3. Show a sticky Table of Contents that uses “scroll spy” where the section lights up depending on where the user is currently scrolled on your post (see Kadence Table of Contents block tutorial)
  4. Show a different lead magnet email signup conditionally based on category or tag

It’s safe to say that having the ability to make your entire sidebar or the last widget in your sidebar sticky with the click of a button o gives Kadence yet another 1-up on many of the most popular WordPress themes out there.

I hope you enjoyed this tutorial and stay tuned for the next one!

Jake ✌

Join the Community

Join the completely free Start Blogging 101 Community on Skool and connect with an awesome community of rockstar individuals who are passionate about building fast, profitable WordPress sites to grow their businesses. Come say hi! 👋

Similar Posts

11 Comments

    1. Hey Gill! You’re most welcome. Yes, you absolutely can make a sticky Table of Contents in your sidebar. One option would be to use Kadence Element Hooks to replace your sidebar with a Table of Contents on all your pages (or even specific pages that you choose) and then make your sidebar sticky in the Kadence customizer.

      You could also add a Table of Contents to the end of your sidebar using Element Hooks and try toggling the option to make the last widget sticky. I’m honestly not sure if that would work with that toggle as I haven’t tried it out yet. Even if that toggle doesn’t work, tweaking a little bit of custom CSS as shown in this article should do the trick 🙂

  1. Thats a great tutorial, brother. But, if you could make a tutorial on how to make a sidebar, the way you have made, it would be even better. And , also the best to add TOC to sidebar and maybe to make it sticky.

    1. Hey Nitin! For my sidebar, I just have some widgets added for Recent Posts, a search bar, Categories, and then a custom HTML section where I put all the resources I use.

      As for the best way to add the Table of Contents to the sidebar and make it sticky, I created a specific video that you can see in the Start Blogging 101 Facebook Group 🙂

  2. can you tell me how do you make the item “HOW TO PASS CORE WEB VITALS” sticky, please, I see it is a column, right?

    1. Hi Paul! That piece is an element I built and placed there using Kadence Hooks. Then, using the custom CSS as outlined in this post, that’s how I got it to be sticky after users scroll down.

  3. Worked great except for one thing. Whenever Recaptcha pops up to verify it’s a real human…..the box where all the recaptcha stuff is in shows up behind the content on the actual page. You can barely see the outline of the Recaptcha box. Kind of hard to describe through text. I’m not sure if there is a way to send a snapshot on here to better explain? As soon as I deleted your code the recaptcha box worked fine.

    I don’t have Recaptcha enabled, but I was told that WordPress will force the recaptcha box if something looks fishy (ex: someone using Incognito Mode; or someone with same email signs up; etc..) It happened to me when I was testing out. You have any idea how to fix the recaptcha issues?

    1. Hi Chad. You mentioned that the Recaptcha box shows up behind the content on the actual page. If I had to guess, this may be a z-index issue. I would personally reach out to Kadence support and see if they would be able to help fix the issue so that the Recaptcha stuff stops showing behind all the content.

  4. Thanks Jake!
    I am not using the default sidebar, I have created a template to render the posts and I added a section as the sidebar.

    I can make it sticky and with some animations, but I want it to stay hidden until the user starts scrolling then only it will appear.

    Any idea how do I do that?

    Thank you and keep up the good work!

    Regards,
    – steve

    1. Hi Steve! One idea would be to create a “Fixed Element” using Kadence Pro and create the content that you want to show in your sidebar. Then, for your settings, you can choose to show that element only after scroll and choose the scroll length. Rather than use the “Placement” settings, you can save the fixed element without any placement settings and then use a shortcode that is assigned to that Kadence element and paste that in your sidebar section where you want it. That should create a section within your sidebar that would only show after scroll.

Leave a Reply

Your email address will not be published. Required fields are marked *