The Astra theme, one of the most popular on WordPress, is available in both free and premium versions. While the free version has several limitations, considering the Pro version of Astra allows you to utilize its features without restrictions.
While you can find various articles on how to make the sidebar sticky in the Astra theme through a Google search, someone has informed us via the comments on this blog that most of these methods are now obsolete. Indeed, upon testing, CSS codes did not work effectively. If you are using the free version of Astra and wish to make the sidebar sticky, please try the method below.
For reference, magazine themes like Newspaper generally offer this feature by default, making it easy to create a sticky sidebar. Additionally, page builders like Elementor also allow you to make elements sticky using their Sticky feature.
WordPress Astra Theme: Setting Up a Sticky Sidebar
In the Astra theme, the existing sticky method code does not work properly. It seems like the Astra theme also doesn’t operate the original code correctly as it changes the Flexbox layout.
If you use the following code, when you scroll down, the sidebar content also goes up and when the bottom of the sidebar content is displayed, the bottom of the sidebar is fixed at the bottom of the site.
/* Ensure the main container uses Flexbox layout in the WordPress Astra Theme */
@media (min-width: 992px) {
.ast-container {
display: flex;
justify-content: space-around;
align-items: flex-start;
}
#secondary {
position: -webkit-sticky;
position: sticky;
bottom: 0.1rem; /* Adjust value as needed */
align-self: flex-end;
}
}In case you want the sidebar to first be fixed and then, when scrolling down, move upward, modify the "#secondary" part as follows:
#secondary {
position: -webkit-sticky;
position: sticky;
top: 0px; /* Adjust value as needed */
align-self: flex-start;
}The aforementioned code works well even with the free version of the Astra theme.
Implementing a Sticky Sidebar in WordPress Using CSS with the GeneratePress Theme
If you want to make the sidebar sticky in the GeneratePress theme, you can use the code below. Applying the following code means that as users scroll down the page, the sidebar will move upwards along with the scroll until all sidebar content has moved up, after which the bottom of the sidebar will remain fixed at the bottom of the site.
/* Applying a sticky sidebar in the GeneratePress Theme */
@media (min-width: 1025px) {
.site-content {
display: flex;
justify-content: space-around;
align-items: flex-start;
}
#right-sidebar {
position: -webkit-sticky;
position: sticky;
bottom: 2rem; /* Modify this value according to your needs */
align-self: flex-end;
}
}Similarly, if you wish for the sidebar to remain fixed at the top as you scroll down, and for the remaining sidebar content to move upwards as you scroll the content down, modify the #right-sidebar section as follows:
#right-sidebar {
position: -webkit-sticky;
position: sticky;
top: 0px; /* Adjust the value as needed */
align-self: flex-start;
}The above code also works effectively with the free version of the GeneratePress theme.