How to Make Sidebar Sticky in Astra Theme (Last Widget)?

In this guide, we are going to make sidebar sticky in Astra Theme without using a plugin.

Also in this, we are going to try the use of a plugin to make the sidebar sticky.

Here, you can make a left or right sidebar sticky with a simple code or plugin method.

For the plugin purpose, we are going to use Q2W3 Fixed Widget for the WordPress plugin by the Advanced Ads Team.

And for another method, we are going to use CSS code only through Customizer. You just have to copy & paste the code.

How to make sidebar sticky in Astra Theme

Make Sidebar Sticky in Astra Theme without plugin

If you are using the free or pro version of Astra WordPress Theme then the method is going to work.

It is one of the simple & easiest methods to make the last widget sticky in Astra Theme.

Basically, you can use the last widget for different purposes. Later we are going to learn about the uses of the last widget in the sidebar.

First, let’s go through the process in detail.

CSS code for Last Widget in WPAstra
  • Go to Dashboard > Appearance > Customize.
  • Now, Go to Additional CSS.
  • Copy & Paste the below CSS code.
  • Finally, Hit Publish button.
  • Now, you will be able to see the last widget sticky in Astra Theme
@media (min-width: 769px) {
.ast-container {
  display: flex;
	}
	
.sidebar-main {
  height: 100%;
	}
	
.sidebar-main aside:last-child {
	position: -webkit-sticky;
	position: sticky;
	top: 50px;
  }
}

I have tested the code for both the left sidebar and right sidebar in Astra.

Also, using media query @media (min-width: 769px), we have enabled the code on the screen with more than 769 pixels. That is if the screen size is more than 769 px wide, the code is only going to work.

Make Sidebar Sticky in Astra Theme using Plugin

I am testing the newest version of the Q2W3 Fixed Widget version of the plugin compatible with Block Editor. The old version of this plugin was only working with Classic Editor.

The block Editor version process is somewhat different than in Classic Editor. so let’s do it in Astra Theme, you can use this method with any other theme.

This plugin uses jQuery so if you don’t want to add extra requests to your site then you can use the CSS solution.

  • First, Go to Dashboard > Plugins > Add New
  • Search Q2W3 Fixed Widget for WordPress Plugin.
  • Install and Activate it.
  • Now visit the front end, and inspect the last widget from the sidebar & copy the widget ID> (Follow the Screenshot below).
  • Go to Appearance > Fixed Widget Options
  • Paste the sidebar ID or Class name into the Custom Fixed Elements box.
  • Hit Save Changes.
Last Widget in Astra Theme
First Inspect the last widget
Sidebar ID in Astra WordPress Theme
Copy the Widget ID
Custom Fixed Elements in Q2W3 Plugin
Paste the sidebar’s last widget ID to the Q2W3 plugin.

Check This Too: Add Last Updated Date in Astra Theme

Sticky Widget Use Case in WordPress

With many use cases of the sticky widget in the sidebar, I am going to list some of the benefits.

You can promote the affiliate banner in the sidebar by making it sticky.

You can promote the tools that you use like I recommend to my visitors.

If you want to collect emails then you can simply make the subscriber box sticky with the help of the above code.

You can also show featured posts or popular posts to increase the click by making it fixed in the sidebar.

Since there are unlimited benefits to making a fixed, you can give it a try and let me know what you are promoting.

How to: Add JavaScript in Astra Theme?

Final Outcome

This is the whole process to make the sidebar sticky in Astra Theme i.e. the above code is to create the last widget sticky in WPAstra Theme.

You can use any of the methods but the CSS code method is quick, and clean & if you don’t want any dependencies. I am too using the CSS method in my WPLogout site too.

The above code works if you are using either the left sidebar or the right sidebar in Astra Theme.

Other than that you can check our Astra Theme Category to read the latest tutorials.

Share:

I am obsessed with WordPress and write articles about WordPress Speed Optimization, SEO, and Blogging. I mostly publish tutorials on GeneratePress, Astra, Kadence, and GenerateBlocks.

11 thoughts on “How to Make Sidebar Sticky in Astra Theme (Last Widget)?”

  1. The guide on “How to Make Sidebar Sticky in Astra Theme (Last Widget)?” looks effective and informative. I would like to appreciate you for this guide which would help me in creating sidebar sticky in Astra Theme. All the best for your journey.

    Reply
  2. Thanks Suraj!
    I am working on just this addition to my site.

    When I add your Additional CSS the only item that remains sticky (after a vertical scroll) is the last child. Is there a way to fix this so nothing in the menu scrolls at all?

    Reply
    • Hi Sergio,
      I haven’t tried making the whole sidebar sticky.
      I think it’s difficult using CSS code.
      You may have to use a plugin for this purpose.

      Thanks

      Reply
  3. Hi.
    I tried this out and it worked. But unfortunately, my homepage settings were modified. Even the blog title on my blog page vanished.
    I had to delete the css. I don’t know what else was modiefied.

    But thanks for help.

    Reply

Leave a Comment