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 design options without being too much. And it's optimized really well too. Perfectly balanced, as all things should be.

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

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

Astra Theme Sticky Header (Free)

The custom 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.

Step 3 – Paste CSS Snippet

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

CSS Code Review

.site-header

This is Astra's header class.

position: fixed

The position property is set to a fixed value, forcing the primary 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 custom 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.

.main-navigation a

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

.sub-menu a:link

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 Theme 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

Frequently Asked Questions (FAQ)

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!