Best Astra Theme Sticky Header Solution For 2022

Blog Champs is reader-supported. By following through with a purchase, I may earn a commission at no expense to you. Thank you for your support.

Are you looking for a free Astra theme sticky header?

Many WordPress themes are either bare-bones or WAY overdone, which is why I love Astra. It comes out of the box with a fair amount of options without being too much. And it's optimized really well too. Perfectly balanced, as all things should be.

Free Astra theme sticky header CSS tutorial.
astra theme sticky header

Pro Tip!

Join me on Cloudways today and get Astra Pro for free to use on as many websites as you want. Check out the free trial and see for yourself what Cloudways can do for you!

The problem with Astra is that the sticky header option is only available in the Pro version. Well, screw that! If all you need is a sticky header, then I've got the solution for you. All you need is a little bit of CSS, and voila!

Check out the live demo and see the sticky header in action:

Astra Theme Sticky Header (Free)

The CSS snippet below has been updated and tested for the most recent version of Astra. Just drop it in your theme's CSS stylesheet, and tweak it to your liking.

Step 1 – Copy CSS Snippet

/*Make Header Sticky*/
.site-header /*header class*/
{
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 9999!important;
}
/*Adjust Desktop Padding*/
@media (min-width: 768px)
{
    .site-content
    {
        margin-top: 80px;
    }
      /*Menu Styling*/
    .main-navigation a
    {
        padding-top: 25px !important;
        padding-bottom: 25px !important;
    }
    .sub-menu a:link
    {
        padding-top: 10px !important;
        padding-bottom: 10px !important;
    }
}
/*Adjust Tablet Padding*/
@media (max-width: 768px)
{
    .site-content
    {
	margin-top: 60px;
    }
    /*Menu Styling*/
    .main-navigation a
    {
        padding-top: 15px !important;
        padding-bottom: 15px !important;
    }
    .sub-menu a:link
    {
        padding-top: 10px !important;
        padding-bottom: 10px !important;
    }
}
/*Adjust Mobile Padding*/
@media (max-width: 480px)
{
    .site-content
    {
        margin-top: 80px;
    }
}

Step 2 – Navigate to Additional CSS

From Astra's customizer menu, navigate to Additional CSS.

Best Astra Theme Sticky Header Solution For 2022 | wordpress add css to theme customizer
astra theme sticky header

Step 3 – Paste CSS Snippet

Paste the CSS snippet from step 1, and we'll go over it.

Astra theme sticky header tutorial - adding additional css
astra theme sticky header

CSS Code Review

This is Astra's header class.

position: fixed

The position property is set to the fixed value, forcing the header to remain in place relative to the viewport.

top: 0

Now that the header is fixed, we have to actually set the .site-header positioning using the top property. This sets the vertical position to the top of the viewport.

width

The width property is used to create a full-length header.

z-index

The z-index property ensures the header remains on top of all other elements on the page when scrolling.

@media

The @media query is used here to control the breakpoints for different devices (screen sizes).

.site-content

This is the class for Astra's main content.

padding-top

The padding-top property controls the space between the header and Astra's main content.

Here we target the individual buttons in Astra's main navigation. We use the padding-top and padding-bottom properties to increase the button size (independently of the sub-menu).

We use this selector to target Astra's sub-menu buttons to control the size with the padding-top and padding-bottom properties (independently of the main top-level buttons).

Astra Theme Sticky Header (Paid)

If you already have Astra Pro, then this task is much simpler. To enable Astra's sticky header feature, follow these three simple steps.

Step 1: Install Pro Plugin

Astra's sticky header module is a Pro feature. If you haven't already, you must have the Astra Pro plugin installed and activated on your target website.

Step 2: Activate Sticky Header Module

From your WordPress dashboard, you can activate the Sticky Header module from the Astra options menu by navigating to Appearance > Astra Options.

Step 3: Configure Settings

To configure Astra's sticky header after enabling the sticky header module, navigate to Appearance > Customize > Header > Sticky Header.

Astra Free vs. Astra Pro Sticky Header

Technically speaking, Astra free doesn't have a sticky header option; however, creating a sticky header using CSS is possible. While this method works fine, you lose out on a couple small features found in the Sticky Header module in Astra Pro:

  • Sticky header shrink effect
  • Ability to use promo bar with sticky header
  • Different sticky header logo
  • Different logos for different devices

Pro Tip!

Join me on Cloudways today and get Astra Pro for free to use on as many websites as you want. Check out the free trial and see for yourself what Cloudways can do for you!

Frequently Asked Questions (FAQ)

What is Astra?

Astra is a free WordPress theme, created in 2017 by Brainstorm Force to become one of the most successful WordPress themes to date.

Does Astra theme have a sticky header?

Yes, but options for making the header stick are locked behind the premium version. The free version of Astra requires you to use a plugin or a little CSS.

What is a sticky header?

The visible top portion of a website (usually containing the website's title or logo) that remains visible when scrolling is generally referred to as a “sticky header.”

Conclusion

That's all there is to it. This Astra theme sticky header solution works out of the box. All you need to do is copy and paste.

Note that if your menu is really tall, the bottom portion may not be visible/scrollable. If this doesn't quite work for you, I highly recommend GeneratePress because their main navigation is a bit more flexible. In fact, I've created 6 free sticky header solutions for GeneratePress.

And If you need more styling help, check out my CSS Styling Guide for Beginners. If you have any questions, I'd love to hear them.

Questions? Let me know what you think in the comments section below!

Photo of author

About the Author

Forced out of Colorado because of the housing market, Kyle now writes WordPress guides out of his Florida apartment, hoping one day to return to the mountains from which he came.
Why I Left SiteGround and How I Found My Next Hosting Provider

After many years with SiteGround, I finally made the switch, and I'm glad I did. Read the full story here.

16 thoughts on “Best Astra Theme Sticky Header Solution For 2022”

  1. Hi Kyle,

    I am using Astra Professional Services template. Your CSS works great with this template. However, is it possible to highlight the current page in the header?

    Reply
    • Never mind. I figured it out. Adding the followings will do it.

      li.current_page_item a{
      background:#F8F5F4;
      }

      Thanks anyway.

      Reply
      • Hey Mark,

        Glad you were able to figure it out! Just drop me a line if you have any more CSS-related questions as it pertains to WordPress themes. I’m always happy to help.

        Reply
  2. Hi Kyle,

    Thanks for the code. The code worked fine for me on desktop. However, part of it becomes transparent on the mobile phone when I scroll. Is there any specific reason behind that?

    Reply
  3. Hi, kyle.
    I appreciate your effort but I got a different result. I thought it was because I used a transparent header, but that wasn’t the case after I deactivated the transparent header.
    Please help. I use basic Astra, and elementor page

    Reply
    • Hey Stephen,

      I’m not sure what options you have selected, but I removed my code from your website, and it appears to do what I imagine you want.

      Are you using any sticky menu plugins (or menu plugins in general)? There might be an interference.

      Reply

Leave a Comment