If you want to avoid paying for the premium version of Astra just for the sticky header feature, this post is for you.
There are lots of great themes out there and Astra definitely ranks among the best when it comes to speed and concise coding. Like most themes, Astra comes in both a free and paid version. And while there are plenty of good reasons to purchase the premium version of Astra, in many cases the free version will do everything you need – especially if you’re pairing it up with a page builder such as Elementor.
If you’re reading this post, you probably already have the free version of Astra, but just in case, you can get it from the WordPress repository here and you can check out our article Astra Free vs Pro for a detailed look at what you get with the paid version.
Use Elementor Pro
Since Astra works so well with Elementor, I figured I’d talk about this method first since a large portion of Astra users already have it installed. If you have sprung for the pro version of Elementor (and I highly recommend you do), you already have all the tools you need to make a sticky header without having to get into any code whatsoever.
Elementor Pro has a theme builder that allows you to override any theme’s header and footer with one of your own design – which is great for removing developer credits, a feature that most themes want you to pay for. Here’s a video right from the folks at Elementor on how to do create a header. They talk about the stick option right after the 3-minute mark.
Use Custom CSS
But if you don’t have a pro version of Elementor, then what? Luckily, it’s really easy to add some custom CSS code into the Astra Customizer to make the header sticky. Once you’ve used the Customizer to set your header the way you want it, you simply have to add this code to your custom CSS field:
/*Make Header Sticky*/
.main-header-bar {
position: fixed;
top: 0;
width: 100%;
}
/*Adjust Content Padding*/
.site-content {
padding-top: 75px;
}
/*Adjust Content Padding for Mobile*/
@media (max-width: 800px) {
.site-content {
padding-top: 175px;
}
}
/*Adjust Content Padding for Mobile*/
@media (max-width: 650px) {
.site-content {
padding-top: 200px;
}
}
If you want to make the header semi-transparent, you’ll also want to add this code as well adjusting the rgb value for the color & transparency you want:
.main-header-bar {
background: rgba(340,0,0,.5);
}
Here’s a video of these CSS changes being applied to a demo site running the free version of Astra:
Final Thoughts
If you there are multiple premium features from the Astra theme that you wish to implement, I’d recommend purchasing the premium version. However, if you really just need to do one or two things, it’s sometimes worth it to find a workaround with the free version.
Sharif Jameel is a business owner, IT professional, runner, & musician. His professional certifications include CASP, Sec+, Net+, MCSA, & ITIL and others. He’s also the guitar player for the Baltimore-based cover band, Liquifaction.
This video would have been great if you didn’t have that big image on the top right-hand corner.
Thanks for watching, and yes you’re absolutely right. When I was recording the video, it didn’t look that big on the the small preview screen I was using with OBS – after I was finished I thought it was too big but I wasn’t going back and re-recording the video to fix it. Maybe if I was a YouTube star with thousands of subscribers, it would be worth it to go back and redo it… but I’m not. Hopefully you were able to get it working though. Thanks again for watching.
I believe instead of rgb it should be rgba as the last value is opacity. Like so :
.main-header-bar {
background: rgba(340,0,0,.5);
}
Thanks for pointing that out, major typo – oddly enough, it still worked in the demo which is funny. I went back tonight and re-did it on a brand new fresh install and leaving the a out still works (even though, as you said, it’s not correct).
FOR ME THAT IS BETTER:
/*Make Header Sticky*/
.main-header-bar {
position: fixed;
top: 0;
width: 100%;
}
/*Adjust Content Padding*/
.site-content {
padding-top: 73px;
}
/*Adjust Content Padding for Mobile*/
@media (max-width: 800px) {
.site-content {
padding-top: 67px;
}
}
/*Adjust Content Padding for Mobile*/
@media (max-width: 650px) {
.site-content {
padding-top: 67px;
}
}
I’ve found that in some cases the code needs to be adjusted – especially if you’re using one of Astra’s site templates. Those can insert different layouts – there’s one I was testing that’s a portfolio site template where in order for the transparent CSS snippet to work, it had to be followed with the !important tag.
Hi, thanks for the post. What about headers in single pages? I use Astra free theme and elementor free version. All ok for Homepage, but how can i put header area before any single post in my site?
Thanks a lot,
Chris
If you’re talking about using a different header for single posts, Elementor Pro provides that functionality. Since you don’t have Elementor Pro though, you might want to try Elementor – Header, Footer & Blocks by Brainstorm Force – it’s the same guys who make the Astra theme and they use it preloaded on lots of their templates. I haven’t worked with it, but try it out and see if it does what you need.
Solved! I created a header for the single posts with Header Footer plugin and everything is great… Thank a lot!
Awesome, I’m glad you got it working!
Hi,
thank you for this useful post!
Is there a way not to mask a part of the sticky header when you are logged in?
I’m not sure exactly what you’re asking, but it sounds like you’re looking to apply a different CSS to a user when they’re logged in. I’ve never done it before, but with a quick Google search I found this: Change CSS when user is logged in on Stackexchange. There is also a similar example here: WordPress.org support. Both refer to a .logged-in CSS modification which may work.
Thanks a lot!
Lo logré, pero todo transcribirlo do al inglés dejo como es:
/*Make Header Sticky*/
.main-header-bar {
position: fixed;
top: 0;
width: 100%;
}
/*Adjust Content Padding*/
.site-content {
padding-top: 75px;
}
/*Adjust Content Padding for Mobile*
@media (ancho máximo: 650px) {
.site-content {
relleno superior: 200px;
}
}
/*Adjust Content Padding for Mobile*
@media (max-width: 650 px) {
.site-content {
padding-top: 200 px;
}
}
/*Make Header Semi Transparent*
.main-header-bar {
background: rgba (340,0,0, .5);
}
Hi,
Thanks for your help.
Is there a CSS code snippet to make the transparent menu bar solid, after scrolling?
So, it is fixed and transparent when then page loads, but as soon as you start scrolling the bar continues to be fixed but with a solid background.
Thanks,
Sam
Thanks for visiting. I’m sure there’s a way to do it, but I don’t know offhand – it would be specific to the Astra theme. Even in their pro theme, the way it’s done is that there are actually 2 headers in place (one transparent and one opaque) and one is hidden depending on whether you’ve scrolled down or not.
I would recommend using developer mode in Chrome and doing an inspect on the header before scrolling & after scrolling to see if there is an additional CSS class that gets applied – if there is, then you may be able to target the additional class with an RGBA snippet like the one I have that uses a solid color.
Hii, Sharif
Thanks a Lot. As you can see with your codes I created a sticky headbar. Can you plzz write codes for sticky sidebar.
No because that depends on the specifics of your site. However, if you use developer mode in Chrome to determine the CSS Class of your side bar container, you may be able to fix the position with similar code to what’s used for the header.
Hi,
Thanks a lot for this tutorial. A question thought: how can you adjust the color/color of the header when you scroll down?
Let say when I’m on top, my opacity is at 50%, when I scroll 200pixel, if turns progressivly to 75% and change color.
Thank you in advance.
Good question, and honestly I don’t know how to do that. You may have to use jquery to perform that. With CSS you can make the color change based on time, but not on scroll distance. You can check out how to do it by time Stack Overflow.
Not working for me, nothing happening after adding in additional CSS field in customize option. tried this only,
/*Make Header Sticky*/
.main-header-bar {
position: fixed;
top: 0;
width: 100%;
}
This still works, I just tested it on my demo site by directly copy/paste what you’ve put in your comment. Are you using the Astra header or have you hidden it and replaced it with another header from Elementor Pro or maybe Astra Header Footer plugin? If so, those will have a different CSS ID you need to target instead of .main-header-bar.
Hi,
I’m having an issue using this. I am using astra free and also elementor free and using elementor header and footer builder.
I adjusted this to replace – main-header-bar to this – [hfe_template id=’4188′] which is the shortcode for the menu bar but it doesn’t work. Can you point me in the right direction – this is my first time making a website so not so knowledgable about this.
The shortcode won’t work, you have to target a CSS class. If you’re not using the Astra header, then the CSS class is different (which you already know). You can find the class by right-clicking your new header and choosing ‘inspect’ (Chrome web browser) and then look at the class listed in the Elements tab.
Hey awesome work! Is there a way to add a little shadow under the header when you start to scroll? A bit like what they have here: https://www.megalytic.com/
Thanks!
There may be a way, but I am not sure of how to do it. You’ll want to search and find if Astra assigns a different CSS ID after scrolling and then target that with the new style. On the free version, this may not be the case though. I believe even the pro version doesn’t modify the existing header on scroll, it actually loads 2 headers – the sticky one before scrolling starts, and then the sticky one after scrolling and then uses CSS to only display one of them depending on where you are in the page.
Thanks so much, could you please add the shrink on scroll to this code?
I am trying to do it myself, but I seem to be skipping smth
Thanks!
You may be having trouble because this method doesn’t add an additional CSS ID to the header after scrolling (you would then have 2 sets of custom CSS applied – one before scrolling and one after scrolling). That feature is likely deeper in the theme and is frankly, beyond my coding skill level.
What if I only want to apply it in the mobile ui version? is that possible?
Yes. You should just be able to take the content padding for mobile that I posted and include the sticky CSS there.
awesome content
is it possible for one to have a off canvas sidebar using the astra free theme. I mean, you have a filter button and when its clicked the sidebar shows up. I don’t like it as the side bar to going to the bottom of the page.
And is it possoble for it to be only done on mobile view
Hi thanks for visiting. Anything is possible, but for such a change, you would require more than just CSS. If I understand what you’re asking for, what you really want is a sidebar on Desktop view, but on mobile you want the sidebar to be able to slide in over the existing content upon the user tapping a trigger item. Expecting a user to activate a trigger might be considered poor UX (though this is highly subjective) because it doesn’t guarantee that your site visitor will see your sidebar content. By nature, mobile users scroll to the bottom and by using a sidebar which scrolls after the main content would be consistent with what most site visitors expect to see.
Still, if you wanted to do this, you’d need more than CSS. You’d need some custom code beyond the scope of this post. You may look into a pop-up builder (Elementor has a good one) and create a slide-in pop-up that contains your sidebar content. That would be probably the easiest way to do it.
Thank you
IS it a good idea for me to position the sidebar on top on the main content instead of below the main contents
In my opinion, no.
Thanks It’s working 🙂
Thanks for stopping by and checking it out!
Thanks a ton, Sharif. My website, https://employmentassam.com is working with your css code. However, I made some changes in the “top padding” of the code, adjusted it to be 75px in every case. Otherwise, there was a big gap between the contennts and the header. Also I changed the header colour. Thank you again for giving the codes. Thumbs up!!!
I’m glad it worked for you, all of these settings are a matter of taste and could vary depending on how else you may have changed your layout. Thanks for stopping by and commenting!
Thanks for the codes, but when I placed the header color code, the menu color is being very unclear. Is there are css code so that I change the main menu text color as my mind.
Thanks for stopping by, but I don’t understand what you’re asking. If you’re looking to change the color of the text in the menu, then you could try the following CSS changing the #ffffff to the color code you desire:
.ast-theme-transparent-header .main-header-menu, .ast-theme-transparent-header .main-header-menu a, .ast-theme-transparent-header .ast-masthead-custom-menu-items, .ast-theme-transparent-header .ast-masthead-custom-menu-items a, .ast-theme-transparent-header .main-header-menu li > .ast-menu-toggle, .ast-theme-transparent-header .main-header-menu li > .ast-menu-toggle {color: #ffffff;
}
thankyou, but my website with your code result is page not mobile friendly, how to fix it? can you check my website? http://www.buanasinergi.com thank you
It looks to me like your site is mobile-friendly, including the header. The only thing that looks off is your site description which you have not adjusted the text for screen size in your CSS. You’d need to target the following CSS class for that:
.site-header .site-descriptionHello thank you for the article … I was able to change the background color of the menu but i also wanted to change the links color/hover color . can you please help..
Use developer mode in Chrome to find the CSS class of the links in the header. Simply right-click the link and choose ‘inspect’. Then you can see the CSS class you need to target.
Thanks a lot. It worked for me.
Thanks for stopping by, I’m glad it worked!
hi there i am confused its not working in my site theme is also astra. please help thanks.
The code may not work if you’re using custom header & footer blocks instead of Astra’s default header. Otherwise, check the code & make sure you copied it correctly.
Hello, thank you for the video. Helped a lot. What to do to make the home page have a different space than the rest (or not to have it)?
There is a way to apply custom CSS to a single page via page ID I believe – you’ll have to google it, but the code would be the same just with a different color setting & CSS target.
What if we want to shrink the sticky header when scrolled.
You made my day. Seriously.