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.
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! 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
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. Free users only get options for a transparent header. The free version of Astra requires you to use a plugin or a little CSS to achieve a sticky header.
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!
Hi there, thank you for this CSS, its so easy to apply and the result is pretty good.
You’re welcome! Thank you for the comment.
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?
Never mind. I figured it out. Adding the followings will do it.
li.current_page_item a{
background:#F8F5F4;
}
Thanks anyway.
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.
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?
Hey Makke,
Thanks for the comment! I took a look at your website and found that there are a couple ways to fix that. Try adding this to the top of the code:
.ast-below-header-wrap{
background:white;}
That should do the trick. If you have any other questions or concerns, feel free to ask.
For more help on this, you can check this post as well: https://blogchamps.com/customizing-wordpress-themes-for-beginners/
Thanks for your prompt response, when I added the code the header become no longer sticky did I miss something there?
/*Make Header Sticky*/
.site-header /*header class*/
Shall I paste it below or above this?
Try placing it above everything else.
Thanks,
So the problem was from my end, the color of the header background was transparent I changed it from the header to white
Awesome, I’m glad you got it working!
Hi, I have a promo code above my header and don’t want it to be sticky as well, how can i remove it?
Hello Dana,
I haven’t found a good possible CSS solution for your situation. It isn’t behaving as I hoped, but I am still looking into it.
Feel free to send me an email so I can help you further.
wow!! that a lot
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
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.
Hi, thank you this CSS is great, it works perfectly.
Hey Mitch,
No problem, glad it worked for you!
Hello,
thank you for this valuable code, it really working.
Thank you
The code is great but the only thing is the navbar is not sticky on desktop , the rest is fine, how do i fix that?
Thanks a lot