How to Make your WordPress Sidebar Sticky

Sticky sidebars look really cool. Ever wanted to make one for your site if your theme doesn’t have that option? then you are in the right place! This tutorial will teach you how to make your WordPress sidebar sticky with or without plugins.

This tutorial is specific to the GeneratePress theme. Also, I would highly recommend to switch over to this theme due to the performance improvements. It is also highly customizable.

There are two ways to make the sidebar sticky:

• By using code
• By using plugins

I have made my sidebar sticky with the help of code as it’s lightweight and doesnt increase page size or decrease site speed.

Making the Sidebar Sticky with Code

The main advantage of using this method is no bloat and hence site speed is not affected. Here is how to do it.

1) To make all of the widgets sticky

Open the CSS customization panel in theme customization and enter the following code:

@media (min-width: 769px) {
 #right-sidebar {
 position: -webkit-sticky;
 position: sticky;
 top: 0;
 }
 }

2) To make the sidebar sticky only in posts

@media (min-width: 769px) {
 body.single-post #right-sidebar {
 position: -webkit-sticky;
 position: sticky;
 top: 0;
 }
 }

3) To make only the last widget of the sidebar sticky

@media (min-width: 769px) {
 .site-content {
 display: flex;
 }
.inside-right-sidebar {
 height: 100%;
 }
.inside-right-sidebar aside:last-child {
 position: -webkit-sticky;
 position: sticky;
 top: 70px;
 }
 }

ALSO READ – How to Install a WordPress Plugin

Making the Sidebar Sticky with Plugins

Writing code can be a little unnerving to the non-tech savvy people. So for them, here are some of the plugins which will help you to make your sidebar sticky.

1) WPSticky

WPSticky is a lightweight and fast plugin that is compatible with every theme and pagebuilder. No coding is required for making the sidebar sticky.

Also, you can make your header sticky using this plugin.

Features of the plugin:

• Lightweight
• No need to add any code
• Easy to use

2) Q2W3 Fixed Widget For WordPress

If you only want to fix the last widget in the sidebar, install the Q2W3 Fixed Widget for WordPress plugin. It is a good extension to only make the widgets sticky.

Features of the plugin:

• Completely free
• You can make more than one widget sticky
• Ability to add sticky ads

I really hope that this tutorial has helped to make your sidebar widgets sticky. If you have any queries or suggestions, then please let me know in the comments down below.

ALSO READ – GeneratePress Theme Review