How to Create a Sticky Header With The Free Astra WordPress Theme

This post contains affiliate links. Please see our Affiliate Disclosure & Notification page for details.

If you want to avoid paying for the premium version of Astra just for the sticky header feature, this post is for you.

There are lots of great themes out there and Astra definitely ranks among the best when it comes to speed and concise coding. Like most themes, Astra comes in both a free and paid version. And while there are plenty of good reasons to purchase the premium version of Astra, in many cases the free version will do everything you need – especially if you’re pairing it up with a page builder such as Elementor.

If you’re reading this post, you probably already have the free version of Astra, but just in case, you can get it from the WordPress repository here.

Use Elementor Pro

Since Astra works so well with Elementor, I figured I’d talk about this method first since a large portion of Astra users already have it installed. If you have sprung for the pro version of Elementor (and I highly recommend you do), you already have all the tools you need to make a sticky header without having to get into any code whatsoever.

Elementor Pro has a theme builder that allows you to override any theme’s header and footer with one of your own design – which is great for removing developer credits, a feature that most themes want you to pay for. Here’s a video right from the folks at Elementor on how to do create a header. They talk about the stick option right after the 3-minute mark.

Use Custom CSS

But if you don’t have a pro version of Elementor, then what? Luckily, it’s really easy to add some custom CSS code into the Astra Customizer to make the header sticky. Once you’ve used the Customizer to set your header the way you want it, you simply have to add this code to your custom CSS field:

.main-header-bar {
	position: fixed;
	top: 0;
	width: 100%;

If you want to make the header semi-transparent, you’ll also want to add this code as well:

.ast-theme-transparent-header .main-header-bar, .ast-theme-transparent-header.ast-header-break-point .main-header-bar {
    background: rgba(0,0,0,0.70); /*Change this value to adjust color and transparency*/

Final Thoughts

If you there are multiple premium features from the Astra theme that you wish to implement, I’d recommend purchasing the premium version. However, if you really just need to do one or two things, it’s sometimes worth it to find a workaround with the free version.

Featured Image Source: Pixabay

Sharif Jameel is a business owner, IT professional, runner, & musician. His professional certifications include CASP, Sec+, Net+, MCSA, & ITIL and others. He’s also the guitar player for the Baltimore-based cover band, Liquifaction.

If you found the information in this post to be useful, please consider subscribing up to our email list. There's no spam, we currently only send emails once a month or less.

* indicates required
/ ( mm / dd )

Related Posts

Scroll to Top

This website uses cookies to ensure you get the best experience on our website. We'll assume you accept this policy as long as you are using this site.