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;
}
}Code language: CSS (css)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); }Code language: CSS (css)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.
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.
You’re welcome 🙂
I am trying to get a sticky button on my site. It wil be a button with the telephone number that i like to follow dow at the page when scrolling on moblie. Is that possible? I just cant find a way to fix that in Astra. I have a Astra Pro and a free Elementor, if that mattes…..
Thanks a lot in advance. The website are not published yet….
Best regards
Linda
Hi Linda,
With Astra you can add an extra element at the end of your menu (Customize > Header > Primary Menu > Last Item in Menu) and can be a button or anything else. If you select the button you’ll be able to customize the text and URL and the button will inherit the sticky feature of your menu 😉
Hello Fernando,
Thank you so much for this post – it really helped me! The header of my site is now beautifully sticky, but the second part of the post “make Astra’s sticky header semi-transparent and apply an overlay color to it” doesn’t seem to work. Have Astra added something to the code in an update to prevent this? Adding {!important} to it made no difference.
Thank you so much for your help so far!
François
Hi François,
Not really, nothing didn’t change. I’ve just tested the code in this blog and works fine (without the !important)
Hi Fernando,
Thanks for this! any idea on how to add a slight drop shadow to the bottom of the menu bar? I’m using Astra with Elementor.
Thanks
Harrison
Hi Harrison,
It would help add some additional CSS like this one:
#main-header-bar {box-shadow: 0px 10px 5px #27272780; -webkit-box-shadow: 0px 10px 5px #27272780; -moz-box-shadow: 0px 10px 5px #27272780; position: relative; z-index: 999999;}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
WOAH!!! This worked beautifully, thank you so much! I hate having to install tons of plugins for every small thing so this post was a lifesaver. Just one tiny issue, since I have a little bar over my header with contact info and social buttons, when I use this code, that bar disappears and only the main header is shown (and is stickied). Any workarounds? Thanks a ton!
I used this code within the Astra theme and Elementor Free, but when I used it, half of the menu bar is cut off at the top.
Any ideas on a fix?
I have the same problem with tablet and mobile versions… If I open it on top of the page I don’t have access to the first link, and if I click the menu in the middle or end of the page, I don’t even see it.
Is there any sollution? Thanks
I am having issues with the sticky header (added as additional css in elementor customize). The header sticks but the drop-down menu becomes hidden behind the header (below the menu) and the Menu Header. Only on tablet and mobile.