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:

/*Make Header Sticky*/
.main-header-bar {
    position: fixed;
    top: 0;
    width: 100%;
}

/*Adjust Content Padding*/
.site-content {
    padding-top: 75px;
}

/*Adjust Content Padding for Mobile*/
@media (max-width: 800px) {
    .site-content {
        padding-top: 175px;
    }
}

/*Adjust Content Padding for Mobile*/
@media (max-width: 650px) {
    .site-content {
        padding-top: 200px;
    }
}

If you want to make the header semi-transparent, you’ll also want to add this code as well adjusting the rgb value for the color & transparency you want:

 .main-header-bar {
    background: rgb(340,0,0,.5);
}

Here’s a video of these CSS changes being applied to a demo site running the free version of Astra:

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.

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.

share this article:

Share on facebook
Share on twitter
Share on linkedin
Share on reddit
Share on whatsapp

2 thoughts on “How to Create a Sticky Header With The Free Astra WordPress Theme”

    1. Thanks for watching, and yes you’re absolutely right. When I was recording the video, it didn’t look that big on the the small preview screen I was using with OBS – after I was finished I thought it was too big but I wasn’t going back and re-recording the video to fix it. Maybe if I was a YouTube star with thousands of subscribers, it would be worth it to go back and redo it… but I’m not. Hopefully you were able to get it working though. Thanks again for watching.

Leave a Comment

Your email address will not be published. Required fields are marked *

If you found this article useful, please consider helping us out and subscribing to our mailing list. We won’t spam you. We rarely send more than a few emails each year and you can always unsubscribe.

Subscribe

* indicates required
/ ( mm / dd )

share this article:

Share on facebook
Facebook
Share on twitter
Twitter
Share on linkedin
LinkedIn
Share on reddit
Reddit
Share on whatsapp
WhatsApp
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.