Free Sticky / Fixed header in Astra Theme

Fixed headers, which follow the user as they navigate down your page from your content, offer a constant opportunity to offer your services, other content or whatever you have on your menus.

No matter what theme you use, if you have the opportunity to make the header stay fixed, accompanying the users’ navigation, you have a fantastic marketing catch at hand.

Besides, it’s very easy, and not long ago we saw how to make the header of any theme fixed.

Why Astra?

Many themes already have this sticky header functionality, like Divi, or the paid Pro version of the Astra theme, a fantastic theme that we use here at WP Help blog, for its performance, fast loading and customization capabilities, even in the free version.

I’ll talk more about this theme, a real revolution, because recently Astra has been the first theme – not been a default theme – to beat the million installations.

How to make sticky Astra theme header

If you do not want to purchase the Astra Pro license for this feature alone, it is not necessary, just do this little trick.

Open the WordPress Customizer, either from the homepage of your site in the “Customize” icon on the admin bar, or from the WordPress desktop, in “Appearance > Customize“, whatever.

Once there, go to the section called “Additional CSS” and add the following code:

/* Astra sticky header */ .main-header-bar { position: fixed; top: 0; width: 100%; } /* Fix content padding */ .site-content { padding-top: 75px; } /* Fix content padding in mobile */ @media (max-width: 800px) { .site-content { padding-top: 175px; } } /* Fix content padding in mobile */ @media (max-width: 650px) { .site-content { padding-top: 200px; } }

When you publish the changes you’ll move from the standard Astra header…

To an sticky header like this one:

Plus: Semi-transparent Astra’s sticky header

To crown things off, you can make Astra’s sticky header semi-transparent and apply an overlay color to it at the same time.

All you have to do is add the following code:

/* Semi-transparent Astra Sticky Header */ .main-header-bar { background: rgba(40, 118, 157,.5); }

Changing the rgba values to the ones you want or to the ones that better suit the design of your web.

With the previous values it would look like this…

I hope you enjoyed this uncomplicated tutorial.

Soon there will be more tips and guides about Astra.

Click to rate this post!
[Total: 2 Average: 5]

2 thoughts on “Free Sticky / Fixed header in Astra Theme”

  1. I would like to thank you for this amazing post. I tried a lot of code for making sticky header but it didn’t work as I am not that technically savvy. But this code works perfectly on desktop and mobile. What I did just followed your instruction and copy-paste the code.

    Great work. Will keep following you for more updates on Astra themes and wordpress.

Leave a Comment

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

Scroll to Top Skip to content