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

WP Astra
Image Credit: WPastra Website

This post contains affiliate links. If you purchase certain products through our links, we may earn a commission on the sale. This costs you nothing and truly helps us fund our blog! See our Affiliate Disclosure & Notification page for more 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 and you can check out our article Astra Free vs Pro for a detailed look at what you get with the paid version.

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: rgba(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

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

  1. Thanks a ton, Sharif. My website, https://employmentassam.com is working with your css code. However, I made some changes in the “top padding” of the code, adjusted it to be 75px in every case. Otherwise, there was a big gap between the contennts and the header. Also I changed the header colour. Thank you again for giving the codes. Thumbs up!!!

    1. I’m glad it worked for you, all of these settings are a matter of taste and could vary depending on how else you may have changed your layout. Thanks for stopping by and commenting!

    1. awesome content
      is it possible for one to have a off canvas sidebar using the astra free theme. I mean, you have a filter button and when its clicked the sidebar shows up. I don’t like it as the side bar to going to the bottom of the page.
      And is it possoble for it to be only done on mobile view

      1. Hi thanks for visiting. Anything is possible, but for such a change, you would require more than just CSS. If I understand what you’re asking for, what you really want is a sidebar on Desktop view, but on mobile you want the sidebar to be able to slide in over the existing content upon the user tapping a trigger item. Expecting a user to activate a trigger might be considered poor UX (though this is highly subjective) because it doesn’t guarantee that your site visitor will see your sidebar content. By nature, mobile users scroll to the bottom and by using a sidebar which scrolls after the main content would be consistent with what most site visitors expect to see.

        Still, if you wanted to do this, you’d need more than CSS. You’d need some custom code beyond the scope of this post. You may look into a pop-up builder (Elementor has a good one) and create a slide-in pop-up that contains your sidebar content. That would be probably the easiest way to do it.

        1. Thank you
          IS it a good idea for me to position the sidebar on top on the main content instead of below the main contents

  2. Thanks so much, could you please add the shrink on scroll to this code?
    I am trying to do it myself, but I seem to be skipping smth

    Thanks!

    1. You may be having trouble because this method doesn’t add an additional CSS ID to the header after scrolling (you would then have 2 sets of custom CSS applied – one before scrolling and one after scrolling). That feature is likely deeper in the theme and is frankly, beyond my coding skill level.

    1. There may be a way, but I am not sure of how to do it. You’ll want to search and find if Astra assigns a different CSS ID after scrolling and then target that with the new style. On the free version, this may not be the case though. I believe even the pro version doesn’t modify the existing header on scroll, it actually loads 2 headers – the sticky one before scrolling starts, and then the sticky one after scrolling and then uses CSS to only display one of them depending on where you are in the page.

  3. Hi,

    I’m having an issue using this. I am using astra free and also elementor free and using elementor header and footer builder.

    I adjusted this to replace – main-header-bar to this – [hfe_template id=’4188′] which is the shortcode for the menu bar but it doesn’t work. Can you point me in the right direction – this is my first time making a website so not so knowledgable about this.

    1. The shortcode won’t work, you have to target a CSS class. If you’re not using the Astra header, then the CSS class is different (which you already know). You can find the class by right-clicking your new header and choosing ‘inspect’ (Chrome web browser) and then look at the class listed in the Elements tab.

  4. Not working for me, nothing happening after adding in additional CSS field in customize option. tried this only,

    /*Make Header Sticky*/

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

    1. This still works, I just tested it on my demo site by directly copy/paste what you’ve put in your comment. Are you using the Astra header or have you hidden it and replaced it with another header from Elementor Pro or maybe Astra Header Footer plugin? If so, those will have a different CSS ID you need to target instead of .main-header-bar.

  5. Hi,
    Thanks a lot for this tutorial. A question thought: how can you adjust the color/color of the header when you scroll down?
    Let say when I’m on top, my opacity is at 50%, when I scroll 200pixel, if turns progressivly to 75% and change color.

    Thank you in advance.

    1. Good question, and honestly I don’t know how to do that. You may have to use jquery to perform that. With CSS you can make the color change based on time, but not on scroll distance. You can check out how to do it by time Stack Overflow.

    1. No because that depends on the specifics of your site. However, if you use developer mode in Chrome to determine the CSS Class of your side bar container, you may be able to fix the position with similar code to what’s used for the header.

  6. Hi,
    Thanks for your help.
    Is there a CSS code snippet to make the transparent menu bar solid, after scrolling?
    So, it is fixed and transparent when then page loads, but as soon as you start scrolling the bar continues to be fixed but with a solid background.
    Thanks,
    Sam

    1. Thanks for visiting. I’m sure there’s a way to do it, but I don’t know offhand – it would be specific to the Astra theme. Even in their pro theme, the way it’s done is that there are actually 2 headers in place (one transparent and one opaque) and one is hidden depending on whether you’ve scrolled down or not.

      I would recommend using developer mode in Chrome and doing an inspect on the header before scrolling & after scrolling to see if there is an additional CSS class that gets applied – if there is, then you may be able to target the additional class with an RGBA snippet like the one I have that uses a solid color.

  7. Lo logré, pero todo transcribirlo do al inglés dejo como es:
    /*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 (ancho máximo: 650px) {
    .site-content {
    relleno superior: 200px;
    }
    }

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

    /*Make Header Semi Transparent*
    .main-header-bar {
    background: rgba (340,0,0, .5);
    }

  8. Hi,
    thank you for this useful post!
    Is there a way not to mask a part of the sticky header when you are logged in?

  9. Hi, thanks for the post. What about headers in single pages? I use Astra free theme and elementor free version. All ok for Homepage, but how can i put header area before any single post in my site?

    Thanks a lot,
    Chris

    1. If you’re talking about using a different header for single posts, Elementor Pro provides that functionality. Since you don’t have Elementor Pro though, you might want to try Elementor – Header, Footer & Blocks by Brainstorm Force – it’s the same guys who make the Astra theme and they use it preloaded on lots of their templates. I haven’t worked with it, but try it out and see if it does what you need.

  10. FOR ME THAT IS BETTER:

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

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

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

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

    1. I’ve found that in some cases the code needs to be adjusted – especially if you’re using one of Astra’s site templates. Those can insert different layouts – there’s one I was testing that’s a portfolio site template where in order for the transparent CSS snippet to work, it had to be followed with the !important tag.

  11. I believe instead of rgb it should be rgba as the last value is opacity. Like so :

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

    1. Thanks for pointing that out, major typo – oddly enough, it still worked in the demo which is funny. I went back tonight and re-did it on a brand new fresh install and leaving the a out still works (even though, as you said, it’s not correct).

    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.