How To Make Sticky Sidebar In Astra Theme?

In this post of Astra tutorial, I will teach you how to make an Astra sticky sidebar to fix your favourite widgets on the visitor’s viewport.

Did you know that sidebars are actually a crucial aspect of any website, especially when it comes to the blog section?

They’re a great way to connect with your audience and keep them engaged.

Plus, they also help reduce your bounce rate while boosting click-through rates on the most important parts of your site. So don’t underestimate the power of a well-designed sidebar!

Following are steps in brief to easily create sticky sidebar in Astra theme

  1. Install the Fixed Widget & Sticky Elements for WordPress plugin
  2. Under Appearance, click on Fixed Widget
  3. From the inspect tool, find out the class of the sidebar widget you want to stick
  4. Write that class name in the Custom Fixed Elements box
  5. Click on Save Changes

But, the Astra sticky sidebar feature is not available with its free and pro versions.

As per WP Astra’s documentation a sticky sidebar feature in the theme customizer is only available for WooCommerce.

Then what about single posts, blog page, and WordPress pages?

Thus, we will not only learn how to overcome the problem, but also learn how to create an Astra sticky sidebar using a plugin as well.

There are two methods to stick a sidebar in Astra theme, one is via using a plugin and another one is by using CSS.

We will see both the methods in detail.

Create An Astra Sticky Sidebar Without Plugin

All sticky sidebar plugins use jQuery, which put additional requests to your site.

Since, a sidebar is almost enabled on the entire site, except for the homepage (in most cases), you can think of going with CSS codes.

We just need a few lines of CSS and we will be able to stick the entire sidebar as well as the last widget.

Make the Entire Sidebar Sticky in Astra Theme

Sticking the entire sidebar shows best results when all the widgets put together do not exceed the screen’s viewport.

This works well when you have 2 to 3 sidebar widgets. Plus, you can also adjust the top margin in such a way that the entire sticky sidebar looks as if it is in the centre.

Right now, the search bar block is the first widget.

I will remove it, and we will be left with 4 more widgets – ‘Recent Posts’, ‘Recent Comments’, ‘Archives’, and ‘Categories’.

Then add the CSS code for creating entire sidebar sticky.

@media (min-width: 769px)
{

.sidebar-main
{
position: -webkit-sticky;
position: sticky;
top: 30px;
}
}
Astra Sticky Sidebar on a Blog Post

In the above image, there is some space below the sidebar. In this case you can adjust the top margin and make your sticky sidebar look centrally aligned.

Make Last Widget Sticky in Astra Theme

To make the last widget sticky apply the following lines of code.

@media (min-width: 769px) {
.ast-container {
  display: flex;
	}
	
.sidebar-main {
  height: 100%;
	}
	
.sidebar-main aside:last-child  {
	position: -webkit-sticky;
	position: sticky;
	top: 60px;
  }
}

You can adjust the top margin as required.

In my case the ‘Categories’ widget is the last widget sticky.

Make Last Two Widgets Sticky in Astra Theme

There are many situations where you’d like to stick more than one widget.

For example, one widget promoting your product and another one that asks your readers to join your social groups.

Let me show you how you can stick last two widgets in Astra theme, using CSS.

In my case the widgets to stick are ‘Archives’ and ‘Categories’

@media (min-width: 769px) {
.ast-container {
  display: flex;
	}
	
.sidebar-main {
  height: 100%;
	}
	
.sidebar-main aside:last-child,.sidebar-main aside:nth-last-child(2)  {
	position: -webkit-sticky;
	position: sticky;
	top: 50px;
  }

.sidebar-main aside:last-child
{
top:300px;
}
}

This will stick last two widgets in Astra theme.

astra sticky sidebar sticking last two widgets

Notice the space between last and second-last widget.

Always keep additional space between both the widgets, or else they will overlap on each other, and none of them will be properly visible.

All the codes are up to date and work perfectly fine for right and left sidebar.

Create Sticky Sidebar in Astra Theme Using Plugin

Before we jump into CSS codes let us first understand how to stick sidebar widget using a plugin.

There are multiple plugins that can help you in creating a sticky sidebar or stick last widget. Out of them I found Fixed Widget & Sticky Elements for WordPress to be lightweight and useful.

This plugin was earlier known as Q2W3 Fixed Widget for WordPress.

It is a free plugin with 100,000+ active installs and 4.7 rating on WordPress.

Step 1- Install Fixed Widget & Sticky Elements for WordPress plugin

First you need to go to your WordPress plugins section, and click on Add New.

Type in Fixed Widget & Sticky Elements for WordPress in the search box.

The plugin is created by Thomas Maier and Max Bond.

last widget sticky in astra theme
Create Sticky Sidebar or Fix Sidebar Widgets in Astra Theme

Install and activate the plugin.

Step 2- Check all the Widgets available in the Sidebar

Before inspecting the elements, have a quick look at how many widgets are available in your sidebar.

Plus, also see whether your website’s sidebar is longer than the desktop’s viewport.

A Blog Page in Astra Theme with a Right Sidebar

Now, we want to stick the last widget, ‘Categories’.

Step 3- Use Inspect Tool to Find the Class of the Sidebar Widget

For sticking the last widget from the Astra sidebar.

Right click on your blog page and click on the Select Element icon.

Hover your mouse in the desired location and click on the sidebar widget.

Note down the ID of the class.

Step 4- Fix the Sidebar Widget (Last Widget Sticky) in Astra Theme

On your WordPress dashboard, hover your mouse on Appearance and click on Fixed Widget.

This will open the Fixed Widget & Sticky Elements dashboard.

fixed widget and sticky elements dashboard in astra website

Over here, you need apply some top margin and write down the class or ID of the sidebar widget that you want to stick.

We wanted to stick the last widget in the Astra sticky sidebar. It had an ID of ‘block-6’

apply top margin and last widget sticky

Thus, write down that class under Custom Fixed Elements and click on save changes.

Now, your sidebar widget is fixed in Astra theme with a top margin of 25 pixels.

Similarly, you can also find out the ID of widget before the last widget and make last two widgets sticky in Astra theme.

Conclusion

I hope this tutorial has been helpful for you.

In this post we’ve learnt

  • How to create Astra sticky sidebar
  • Make last widget sticky
  • Create last two widgets sticky in Astra theme

You can use a plugin on your website or copy my CSS codes, in case you do not want to download an additional plugin.

Share and Enjoy !

Shares
I am in love with WordPress, building websites, doing SEO, and all that kind of stuff. I generally write about WordPress, Blogging, and SEO on BloggingIdol.

Leave a Comment

Shares