How To Add WordPress Sticky Sidebar With GeneratePress Theme? (With & Without Plugin)

WordPress-sticky-sidebar

Do you want to make the WordPress sidebar sticky?

Or wish to learn how to create a sticky floating sidebar widget in WordPress?

Well! Let me tell you the ways to execute both features through this article!

Before getting into the details, I would suggest you get GeneratePress, the fast-loading, flexible WordPress theme to get the job done in seconds.

We have started using this light-weight theme a couple of years ago, and its performance is just amazing.

And recently, I have made the below sticky widget for specific blog posts to boost our sales & conversions. Look at the sidebar in the below image!

wordpress-sidebar-sticky

You can also make a nice one like this!

So, if you are not using the GeneratePress theme, I would advise you to get this superfast loading template and take your site performance to the next level. You will get a 10% discount as well! Grab it now!

Now, I can help you add a sticky sidebar while scrolling the WordPress site!

Let’s get into the topic now!

You might be in the dilemma whether to enable WordPress sticky sidebar or not! Don’t worry; look at the benefits of doing it!

Why WordPress Sticky Sidebar?

The sticky sidebar is nothing but the fixed navigation of the sidebar throughout the page, and yes, it will not disappear when your visitors scroll down the page. It is considered as one of the essential structures of modern websites because of its anytime accessibility.

Its advantages are:

1. Improves User Experience

Through the sidebar of sticky type, you are offering an opportunity for your readers to navigate your website with ease. Sometimes, they may get the exact information with it and hence save their time and efforts.

It works well on actionable sites like eCommerce since they intend to buy a product. You are making the readers oriented and providing them with more control which finally results in increasing the customer experience.

2. Boosts Your Visibility

Branding is the recent trend of online businesses. It creates a memorable impression of your product/service among your customers.

By enforcing a specify thing like asking them to subscribe or requesting to read your eBook, you are creating brand awareness for your business website. You may add any valuable asset for your readers through the sticky sidebar, and yes, it would boost your visibility on the web.

3. High Conversions

When your visitors get specific content permanently in front of their eyes, they will react for sure. So, if you have a particular discount or exclusive offer related to the page that they are reading, then they would keenly interested to grab the deal.

As you are increasing the chances of people converting, it is more likely to increase the conversion rates and boost your revenue. Sticky sidebar/widget is the best element to promote a particular product and make sales.

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

I hope, you are clear with the merits of making the sidebar sticky in WordPress. Now, let me tell you how to execute it without any third-party plugin.

Yeah! Most of the site owners care about the site loading speed and hence don’t want to install several plugins as they could affect the speed performance.

If you are also looking for the Sticky sidebar WordPress CSS code for the GeneratePress theme, get those codes now!

To Make Sidebar Sticky With GeneratePress Theme

Just add the following code to your Site Custom CSS section

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

To Make Sidebar Sticky In Single Posts of GeneratePress

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

To Make the Last Widget Sticky In Sidebar Of GeneratePress

Add Following code to your Site Custom CSS section,

@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;
 }
 }

How To Activate WordPress Sticky Sidebar & Widget With Plugin?

The non-tech savvy users might hesitate to add or edit the codes and look for the best plugin to get the job done efficiently in minutes.

For them, here I have found two helpful sticky sidebar plugins for WordPress. These extensions are compatible with all the WordPress theme, including GeneratePress as well.

1. WP Sticky Sidebar

WP Sticky Sidebar is an excellent plugin that helps you to make your floating sidebar menu permanently visible when scrolling at all the times.

It has a premium version with additional features. At the time of writing this article, this WordPress sticky sidebar plugin has crossed 10,000 active installations and earned 65 5-star reviews.

Best Features

  • Easy to install and use
  • Offers CSS class and ID of the sidebar element to be sticky
  • Top margin in pixels can be added to the floating sidebar
  • Gives the “Disable” option if the screen width is small
  • The menu height of the sidebar can be updated; troubleshooting option is given
  • Contains more “Disabling” option (Pro version)
  • Create and add your custom sidebar (Pro version)
  • Support and updates are available for one year (Pro version)

I would advise you to use its free version first, and if you feel satisfied with the settings & features, then you may update to the Pro version of WP Sticky Sidebar.

2. Q2W3 Fixed Widget For WordPress

When you want to fix the last widget sticky to the sidebar of your site, just install Q2W3 fixed widget for WordPress plugin. It is a great extension to create the sticky widgets stay visible when the page gets scrolled up or down.

However, you may get the compatibility issue and hence check their theme requirements. It has 100,000 active installations till now.

Best Features

  • Define the top and bottom margin to prevent overlapping with the footer
  • Suitable to add sticky ads for the user interaction and enhances CTR (Click-through-rate)
  • Possible to fix multiple widgets
  • 100% free (No Pro version available)
  • Disable the plugin on mobile devices

Frequently Asked Questions

1. What Is Sticky Sidebar?

Ans. The sidebar of any WordPress theme is static by default. It will disappear when the visitor scrolls down the page. It is not the case with the Sticky sidebar! It remains visible and offers constant navigation for your readers which gently pushes them to respond to your CTA.

2. How do I make my WordPress sidebar sticky?

Ans. You can use either third partly plugin or add CSS code given in this article to get the task done. I would suggest you use the GeneratePress theme.

3. Does sticky sidebar work with GeneratePress theme?

Ans. Yes! You may add the CSS code given or install the plugin mentioned in the blog post.

4. Is the sticky sidebar a distraction element?

Ans. Yes, almost! because it scrolls side-by-side! However, you can make it attractive and straightforward to win your readers’ heart. Also, make sure that it does not overlap the footer.

5. Where should I activate the WordPress sticky sidebar?

Ans. It would be better to enable for the conversion-focused articles than informative articles. If you have any special discount for the product that you are promoting, then you may add the offer details to the sidebar, make it sticky and display the matter in the relevant blog posts.

As you are using the GeneratePress theme for your business site, I would suggest you check “How To Display Last Updated Date In GeneratePress Theme” to reap the SEO benefits.

Conclusion

After adding a few sticky widgets to our blog, WPGlossy, I have been receiving enquires from my readers and followers to make their doubts clear in activating the sticky sidebar for their website. Thus, I have decided to write a tutorial and hence, accomplished it!

I have clearly explained the benefits of enabling the WordPress sticky sidebar and hope you agree with them. I should admit that it is a distractive element, however, when it is done precise & straightforward, then you will make the leads, sales or subscribers for sure.

So, which method would you like to implement? Adding the CSS codes or install the plugin to your GeneratePress theme? Share your viewpoints in the comment section; let’s discuss. Also, if you need any help in enabling the sticky sidebar or making the last widget sticky, just leave your message, I’ll assist you in fixing the things!

by Sakthi
Sakthi is a thoughtful guy who specializes in WordPress Setup & Design. He is interested in designing the functional & attractive WordPress themes for the Digital marketers & Bloggers and helping them attain their goals with a tailored site. Look his ThemeForest Portfolio.

7 thoughts on “How To Add WordPress Sticky Sidebar With GeneratePress Theme? (With & Without Plugin)”

  1. Sakthi, this is some sweet coding here buddy. I love the look of a sticky sidebar. Makes things a bit more professional if done the right way. I reckon going sticky can boost conversions for specific ads too. Keep those eyes glued to it during the entire trip to your blog. Smart.

    Ryan

    Reply
  2. Hey Sakthi

    Indeed, a useful post.

    I am using 2 widgets on the right sidebar but both are not fixed.

    Will try to implement the above techniques to make them sticky.

    Thanks

    Reply
  3. Hello Sakthi,

    Another useful post from you.

    We followed your previous tips about the last updated date and it was very useful. Now, this post helped me in adding a sticky sidebar without a plugin.

    Previously, I was using Q2W3 Fixed Widget and now I have uninstalled it.

    Your code did the trick easily.

    It would be great if you can share another tutorial about showing the author bio on Generatepress without a plugin. I tried a few codes from Google but none worked.

    Thanks in advance.

    Reply
  4. Hi Sakthi,

    Thanks for the wonderful article.

    The sticky sidebar will make user interaction and user experience even better.

    I use Wp Sticky Sidebar, it’s a very nice plugin and it’s simple to customize the options.

    I have another blog where I can implement the Q2W3 Fixed Widget plugins.

    Thanks & Regards
    Sai Mithun

    Reply

Leave a Comment