Sticky Sidebar in Wordpress

How to make the sidebar sticky in Wordpress

Wordpress is the favorite cms of millions. It is used globally for creating several types of websites including blogs, ecommerce sites and portfolio sites as well as other types of sites. The popularity of Wordpress depends on several factors including the ability to customize nearly every part of your website, the availability of thousands of themes and plugins that help extend website functionality and the flexibility to create awesome looking sites with the CMS.

There are several more content management systems also in the market. However, Wordpress ranks at the top. It offers a lot of free themes that can be used to give the website the desired look.

You can create awesome looking headers and some themes provide the ability to make the header and the menu sticky so that when readers scroll down, the menu sticks to the top of the viewport. Sometimes, you may also want to make the sidebar sticky or have a few plugins that stick in the sidebar as the readers scroll down.

Sticky sidebars can also be useful when you are using sticky ads in your website. There are quite a few ways to make the sidebar sticky including css, themes that offer the sticky sidebar feature and a plugin to make the sidebar or the sidebar widgets sticky.

In this article, we will highlight the various methods that you can use to make the entire sidebar or a sidebar widget sticky. Primarily, there are three ways to achieve a sticky sidebar in Wordpress and the most commonly used method is the use of a plugin to make sidebar or sidebar widgets sticky. So, let’s first discuss how to make the sidebar or sidebar widgets sticky using a plugin.

Make the sidebar sticky using a plugin

The plugin method for making the sidebar sticky is the most commonly used method. You do not need to edit any code. Just install one of the plugins and then make the complete sidebar or specific sidebar widgets sticky.

In some cases, while you would want to make the entire sidebar sticky, in others you might need only a specific widget like an ad widget or a news widget to be sticky. There are two awesome plugins in the wordpress plugin repository to help you with a sticky sidebar or sticky sidebar widgets.

Fixed Widget and Sticky Elements for Wordpress (Q2W3)

Fixed Widget, previously called Q2w3 is an awesome plugin for having fixed or sticky widgets in the sidebar.

This plugin is also very easy to set up and use and you do not need to have any coding knowledge to use this plugin. It can be installed like just any other plugin.

You need to go to the wordpress plugin repository and search for a fixed widget. The plugin is owned by Advanced Ads, one of the most popular advertising plugins for Wordpress. Now, install the fixed widget plugin and activate it.

Any widget that you add to the sidebar can be made sticky with the help of this plugin. Just add the widget from your wordpress dashboard by going to Widgets and then ticking the box for making the widget static.

WP Sticky Sidebar plugin

The WP Sticky Sidebar plugin is also a popular plugin that can be used to make any theme’s sidebar sticky. The plugin is rated 4.9 out of five stars in the wordpress plugin repository. However, in some cases you will need to provide the sidebar css class of your theme to make the sidebar sticky.

Add the css class inside the box at the top and then save the settings. Apart from that, if you want additional top or bottom margin, you can change that setting to. Now, you can add widgets to the sidebar which will stick as the user scrolls up or down.

Use Astra or another theme with a sticky sidebar feature

Well, the theme method to make sidebar sticky is perhaps the easiest method for making sidebar sticky in Wordpress. If you are using the Astra theme you can easily make the sidebar sticky by using the customizer. Open the customizer and go to the sidebar settings. Check the box to make the sidebar sticky and the entire sidebar will become static. Some other themes also offer this feature. However, Astra is one of the most popular themes that has included this feature.

Make the sidebar sticky using CSS

If your theme does not offer a sticky sidebar feature and you do not want to use a plugin to make the sidebar sticky, you must use css to create a sticky sidebar. All you will need to do is to make the position of the sidebar sticky with the help of CSS.

Use the sidebar class and add position: sticky.

For example, here is the css code to make the sidebar sticky in the generatepress theme:

@media (min-width: 769px) {
    .inside-right-sidebar {
        position: sticky;
        top: 100px;
    }
}

The code makes the sidebar sticky in the Generatepress theme with a top margin of 100px. The css class may differ from theme to theme for the sidebar but you can check it out from your theme’s stylesheet.