Last updated on January 22nd, 2021 at 09:02 am


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

WP Astra

Image Credit: WPastra Website

This post contains affiliate links. We may earn a commission if you purchase an item through our links. It costs you nothing and helps us to fund this blog. Please see our Affiliate Disclosure & Notification 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 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:

Astra 3.0 Header Builder

/*Make Header Sticky - for Astra 3.0 and later*/
.site-header {
    position: fixed;
    width: 100%;
}

/*Adjust Content Padding - adjust this based on your layout*/
.site-content {
    padding-top: 175px;
}

/*Adjust Content Padding for Mobile - adjust this based on your layout*/
@media (max-width: 800px) {
    .site-content {
        padding-top: 150px;
    }
}

/*Adjust Content Padding for Mobile - adjust this based on your layout*/
@media (max-width: 650px) {
    .site-content {
        padding-top: 135px;
    }
}

Astra Prior to the 3.0 Header Builder

/*Make Header Sticky - for Astra prior to 3.0*/
.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;
    }
}

Depending on your site layout, you may need to adjust the padding-top settings in the above code to get the spacing the way you want it.

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 (this is no longer necessary as Astra now includes the transparent header as part of their free version):

 .ast-above-header-bar .ast-builder-grid-row-container-inner {
     background: rgba(150,20,230,0.5);
 }
 .main-header-bar {
     background: rgba(340,0,0,0.5);
 }
 .ast-below-header-bar .ast-builder-grid-row-container-inner {
     background: rgba(40,50,50,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.

Subscribe to Our Mailing List

If you found the information in this post helpful, we'd love to have you join our mailing list. We promise we won't spam you, we only send out emails once a month or less.

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

  1. Hi Sharif, thank’s for the value! I don’t want the header to be sticky on mobile, I only need a sticky header on desktop and tablet. Is it possible? If so what changes do I have to make?
    Thanks in advance!

    1. Hey Gerrit, all you need to do is use one of the media screen queries and apply the sticky command there. For example:

      @media (max-width: 800px) {
      .site-header {
      position: fixed;
      width: 100%;
      }
      }

  2. Thanks! Your sticky menu code partially worked in my WordPress Astra theme site.

    The menu is sticky but on mobile, the top 2 menu items are cut off from view. I only see the last 3:
    https://monacella.ca/wp2021/

    Here is your code I used (mobile part only)

    /*Adjust Content Padding for Mobile – adjust this based on your layout*/
    @media (max-width: 800px) {
    .site-content {
    padding-top: 0px;
    }
    }

    Do you know of a way to see all menu options in the drop-down mobile menu?

    Thanks again!

    Carl

    1. Hi, your dropdown menu is behind your header and so it must also need to be padded downward in order to bring the higher items down into viewport. I looked at your site through Chrome’s inspection tool and it looks like you may be able to try this code to fix it:

      .ast-builder-menu-1 .ast-builder-menu .ast-flex .ast-builder-menu-1-focus-item .ast-builder-layout-element .site-header-focus-item {
      padding-top: 100px;
      }

      You might not need ALL the selectors in the custom CSS but that’s what Chrome’s inspection tool is showing.

    2. UPDATE:
      With many thanks to Sharif, here is the CSS code to show all the menu items:

      /*Adjust Menu Padding For Mobile*/
      .ast-mobile-header-content {
      padding-top: 100px;
      }

      I can wholeheartedly recommend hiring him for custom work.
      And don’t forget to read his blog articles, they are packed with gems!

      Thanks again Sharif, you’re a stand up guy.

  3. Mine is Astra Child theme but I can’t for the life of me get it to work, .main-header-bar
    or .site-header doesn’t seem to be the correct header. Maybe I have a customer header or something. I tried the name in inspect tool but can’t. If anyone can check my site and let me know that would be great https://unlockmysim.com/

  4. Hi,
    Thank you for your video, the solution you provided worked fine, however, I still have a problem with the mobile version, when I am at the bottom of the page and click on the menu button, the menu expands on the top and it is not visible from where I am at the moment, so I need to scroll back to the top to see the menu. How to fix that?
    https://lifebitgroup.co.uk/
    Thank you

    1. Hi, I looked at your site and it looks like since your menu dropdown actually pushes the content down when it expands, your best option to get what you want will be to change the CSS selector for the dropdown menu to have a fixed position instead of relative (which appears the be the default). I can’t tell you exactly which selector to target without access to your site, but through Chrome’s inspection tool it looks like you may need to target one (or more, or all) of these:

      .main-header-menu .ast-nav-menu .ast-flex .submenu-with-border .astra-menu-animation-fade .stack-on-mobile

      You could try this to start (again, you might not need all the selectors but you’ll have to experiment):

      .main-header-menu .ast-nav-menu .ast-flex .submenu-with-border .astra-menu-animation-fade .stack-on-mobile {
      position: fixed;
      }

      1. Hi Sharif,
        Thank you very much for your time and dedication, to deep into the issue and answer for everyone.
        If someone else has the same problem here is the piece of code you can Copy&Paste:
        .ast-header-break-point .ast-mobile-header-wrap .ast-flex.stack-on-mobile{
        position:fixed;
        }
        Thank you very much and good luck.

  5. thank you! this worked great for me. i had tried a few sticky header plugins, elementor sticky header, and sticky everything!, and the elementor one was jumpy, and the sticky everything! didn’t resize properly when changing from landscape to portrait on mobile devices. your code really saved the day!

  6. Hello. Thank you for the code, it is very helpful. I think there is one glitch with the header when the site is viewed with an iPhone. If the phone is in the normal way, it it ok but if the phone is on it’s side to get a more landscape view, the hamburger menu does scroll and it hides the content (which is normal as the screen height is minimal).

    1. Thanks for stopping by and reading – I didn’t test this code with every screen configuration, but present it as a good starting point. There should be enough information there for you to figure out how to modify the CSS to fit your particular use-case.

  7. Just wanted to leave a thankyou for that info! super valuable to me. Just starting to learn all this and trying to do it all free since the bank account is thin right now!

  8. Very unfortunate, but it does not work on the website I am building. The Astra team has created a new Header Builder with version 3.0.1 of their theme. Things have probably changed in their new version?

    1. Thanks for checking us out, I was just playing with the new version and I believe you just need to change .main-header-bar to .site-header and adjust the padding a little bit.

  9. Thank you for this post. It worked for my site. I’m still trying to change the transparent head bar color after scrolling. If you’ve figured it out it’ll definitely be a lot of help. Thanks again

  10. Thank you so much for the share. In my case the mobile version was looking odd with this padding so I changed the padding for mobile tо 57px and for tablet to 78px. Hope this helps someone else too.

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

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

    1. I don’t believe the mobile header has a different class. At least not in the example I used in the article & video. Depending on your template it may be different though – for example, I know in the Pro version of Astra, the sticky header and transparent header are different elements entirely where one of them is hidden depending on the scroll-state of the page.

    1. Hi thanks for stopping by, check out the comments as this question has already been asked. The short answer though is that it would take much more code to do so – Astra doesn’t assign a CSS state to the header after scrolling so there’s no way to change its style based on that criteria. Even their own pro header doesn’t do it this way, the pro header actually loads both headers and hides one depending on the page scroll state.

  11. Hello, thank you for the video. Helped a lot. What to do to make the home page have a different space than the rest (or not to have it)?

    1. There is a way to apply custom CSS to a single page via page ID I believe – you’ll have to google it, but the code would be the same just with a different color setting & CSS target.

  12. Thanks for the codes, but when I placed the header color code, the menu color is being very unclear. Is there are css code so that I change the main menu text color as my mind.

    1. Thanks for stopping by, but I don’t understand what you’re asking. If you’re looking to change the color of the text in the menu, then you could try the following CSS changing the #ffffff to the color code you desire:

      .ast-theme-transparent-header .main-header-menu, .ast-theme-transparent-header .main-header-menu a, .ast-theme-transparent-header .ast-masthead-custom-menu-items, .ast-theme-transparent-header .ast-masthead-custom-menu-items a, .ast-theme-transparent-header .main-header-menu li > .ast-menu-toggle, .ast-theme-transparent-header .main-header-menu li > .ast-menu-toggle {
      color: #ffffff;
      }

        1. It looks to me like your site is mobile-friendly, including the header. The only thing that looks off is your site description which you have not adjusted the text for screen size in your CSS. You’d need to target the following CSS class for that:
          .site-header .site-description

      1. Abdelmoneim Rashwan

        Hello thank you for the article … I was able to change the background color of the menu but i also wanted to change the links color/hover color . can you please help..

        1. Use developer mode in Chrome to find the CSS class of the links in the header. Simply right-click the link and choose ‘inspect’. Then you can see the CSS class you need to target.

  13. 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

  14. 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.

  15. 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.

  16. 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.

  17. 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.

  18. 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.

  19. 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);
    }

  20. 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?

  21. 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.

  22. 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.

  23. 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 *

You May Also Like:

Affiliate Link

15585

Astra is available in both an annual and lifetime deal

This site requires the use of cookies to ensure you get the best experience.

Scroll to Top