How to add a sticky sidebar in the Generatepress theme?

Want to add a sticky sidebar widget in WordPress without using any plugins then this guide will be super helpful to you. 

In this guide, I will share with you the techniques to add a sticky sidebar in the Generatepress theme using a simple line of CSS code. You don’t need any plugin for that. 

But before that let’s understand how sticky bars work and what are the benefits of using it. 

What is a sticky sidebar?

A sticky sidebar in wordpress is a fixed sidebar that is locked into a specific position when the user scrolls down the page. 

It doesn’t disappear with a scroll and helps show additional information without disturbing readers. 

How do I make my WordPress sidebar sticky?

There are two ways you can make your wordpress sidebar sticky one is by using an external plugin and the other one is by adding a simple CSS code. 

Some themes have inbuilt sticky sidebar options in the theme customization sections. But in the Generatepress theme, there are no built-in features to add a sticky sidebar, so you have to add this feature manually. 

How To Make A Sticky Sidebar In GeneratePress Theme Without Plugin?

To add a sticky sidebar in the Generate press theme follow the below steps. 

1. Go to your Wordpress Dashboard and click on the Appearance section.
2. Now click on Customize and open the Additional CSS section.
3. Now paste the below CSS code in it and hit the publish button.

Now your sticky sidebar Widget is created and applied in your Generatepress theme and it will work for the whole website.

CSS code for the sticky sidebar [For the Whole website]

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

Sticky sidebar for single posts

If you want to add the sticky sidebar for single posts only and don’t want to add it for the whole website then you can use the below CSS code.

CSS code for sticky sidebar [Singe post]

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

Create Last Widget Sticky in GeneratePress

There are more customization options while using the sticky/ floating sidebar widgets. You can also Create a Sticky Sidebar [Last Widget] only using the code below.

When a user scrolls down the page only the last widgets will stay sticky and the rest stays hidden in the above.

CSS code for Sticky Sidebar [Last Widget]

/* GeneratePress Sticky Sidebar */

@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: 40px; /*Adjust position */
  }
}

Sticky sidebar with Blog posts exclude

Now you have seen three types of sticky sidebar options in the Generatepress theme. You can further customize this option and exclude a single page for the sticky option and apply it to the rest of the pages.

Here it uses body classes to identify the page and the: not pseudo-class to ignore a page e.g. this won’t apply to the blog.

CSS code for sticky sidebar with page exclude

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

sticky sidebar [ Both Left & Right]

If you are using two sidebars [Left and right ] & want to apply the stickiness to both the sidebars then you can use the below CSS code.

CSS code for sticky sidebar [ Both Left & Right]

@media(min-width: 1024px) {
    .both-sidebars .site-content {
        display: flex;
    }
    .both-sidebars .site-content > div {
        left: unset !important;
    }
    
    #left-sidebar {
        order: -1;
    }
    
    .inside-left-sidebar, .inside-right-sidebar {
        position: -webkit-sticky;
        position: sticky;
        top: 60px;
    }
}

You can choose any one of the above 5 CSS codes to add a sticky sidebar in the GeneratePress theme. These CSS codes are designed for different use cases and most of you need the first CSS code only.

How To Activate WordPress Sticky Sidebar & Widget With Plugin?

You can also activate the sticky sidebar using a plugin [Not recommended] if you don’t want to add additional CSS code.

You just need to install and activate the plugin and it will do this job automatically. Here is the list of sticky sidebar plugins for WordPress.

1. WPSticky
2. WP Sticky Sidebar
3. Q2W3 Fixed Widget For WordPress

Conclusion

I hope this guide will help you add a sticky sidebar in your GeneratePress theme and solve your problem.

Now I want to hear from you, Which method are you going to use on your WordPress website? – Let me know in the comment section.

Also, don’t forget to sign up Newsletter for upcoming posts related to Blogging and SEO.

PS: How to add an Author box in the GeneratePress theme using inbuilt Block Element?