Last updated on July 7th, 2024 at 10:50 am
If you want to avoid paying for the premium version of Astra just for the sticky header feature, this post is for you.
Image Credit: WPastra Website
This post may contain affiliate links. We may earn a commission if you purchase an item through our links. It costs you nothing and helps us to fund this blog. Please see our Affiliate Disclosure & Notification for details.
If you want to avoid paying for the premium version of Astra just for the sticky header feature, this post is for you. We provide 2 different ways to get that sweet Astra sticky header – one with a plugin, and one with pure CSS.
Astra Sticky Header Tutorial – Introduction
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:
Astra 3.0 Header Builder
Updated March 2023
This code has been updated to include adjustments for the off-canvas menu to also be sticky and has been tested on Astra 4.1.2.
/*Make Header Sticky*/
.site-header {
position: fixed;
top: 0;
width: 100%;
}
/*Adjust Content Padding*/
.site-content {
padding-top: 170px;
}
/*Adjust Content Padding for Mobile*/
@media (max-width: 800px) {
.site-content {
padding-top: 100px;
}
/*Stick the Off-Canvas Navigation Menu - Adjust Top Margin for your Layout*/
.main-navigation {
position: fixed;
margin-top: 0px;
}
}
/*Adjust Content Padding for Mobile*/
@media (max-width: 650px) {
.site-content {
padding-top: 150px;
}
/*Stick the Off-Canvas Navigation Menu - Adjust Top Margin for your Layout*/
.main-navigation {
position: fixed;
margin-top: 60px;
}
}Astra Prior to the 3.0 Header Builder
/*Make Header Sticky - for Astra prior to 3.0*/
.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;
}
}Depending on your site layout, you may need to adjust the padding-top settings in the above code to get the spacing the way you want it.
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 (this is no longer necessary as Astra now includes the transparent header as part of their free version):
.ast-above-header-bar .ast-builder-grid-row-container-inner {
background: rgba(150,20,230,0.5);
}
.main-header-bar {
background: rgba(340,0,0,0.5);
}
.ast-below-header-bar .ast-builder-grid-row-container-inner {
background: rgba(40,50,50,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. The easiest ways to get the Astra sticky header feature are:
- Buy Astra Pro (which is what we’re trying to avoid in this post)
- Use Elementor Pro (which also costs money)
- Use CSS in the Astra customizer – COMPLETELY FREE
FAQs
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 bands, Liquifaction and Minority Report.
Amazing work! Thanks a lot! 🙂 I was wondering if there is a way to add shrink effect so it would change logo to a smaller one when scrolled down through website? I was trying to find out myself but I’m a total beginner 🙁
Thanks for stopping by and reading my post! I don’t believe you can do what you’re asking using just CSS. JavaScript is usually required once you want scroll effects – unfortunately, I’m not a JavaScript guy. The paid version of Astra has this feature though if you really need it.
Helpful
Pingback: 4 Simple Ways to Speed Up Your Website - Website Design Baltimore | SEO Baltimore | CGS Computers
Thanks, but can you please update the CSS for Astra v4.1.5 ?
The mobile padding top is not working.
Hey Adam, thanks for checking out my site. I have tested this code on Astra 4.1.5 and it still works. Could you share the URL of your site and if I have time I’ll check it out and see why it’s not working for you.
Hi,
I am using this theme but the CSS is not working.
https://wpastra.com/templates/daycare-02/
Hey Adam, I’m sorry for taking so long to get back to you on this – it totally went to the back of my to-do list and I just realized it while updating this post. I have looked at the url for the template and I can actually use Google Developer panel to add my code to the .site-header class and it works. There must be something else in your implementation that’s taking precedence.
Hey, that works great. But in my case, I am using the default breadcrumb after the site header. And when I am using your code it actually covers the breadcrumb position. Is there any way to make the header sticky and show the breadcrumb after the header bar?
Hey! Thanks for stopping by and commenting. If you share the url of your site, I may be able to come up with something 🙂
Simple Solution.
header {
position: sticky;
top: 0;
}
Very helpful! Don’t forget to add ” z-index: 9999; ” to make it on top of all layers. Jest change the margin-top in order to fix the off canvass issue.
I found why it wouldn’t work for me with transparent header. There was some existing theme CSS setting a position:absolute, so I had to target that using the same selectors to override it with position:fixed. I also had to specifically not set any top padding when the transparent header is used.
So putting them together:
.ast-theme-transparent-header #masthead {
position:fixed;
}
body:not(.ast-theme-transparent-header) .site-content {padding-top:11px;} /* adjust value to your needs */
Not sure if it matters but I am using Astra free latest version but I opted not to switch to the Header/Footer builder (only grandfathered users like myself can choose whether to switch; new installs have no choice).
If you’re using the old Header/Footer builder, then yes the code may be a bit different. I have kept the code in this blog post updated with the latest version and features since that’s what people were usually asking about 🙂 Thanks for stopping by!
Thanks a lot for this helpful code add-on! I’m using Astra 3.9.4 and it works fine for me on desktop and mobile!
Thanks, I’m glad you were able to get the Astra Sticky Header working from my code!
Hi, thanks a lot for this comment. I couldn’t find out why on some pages the header became sticky and on some not… but this fixed it, and the problem probably was in the transparency that I made earlier to some pages, because the pages with transparent header were not sticky. Working on newest Astra 3.9.4
Awesome Joan, I’m glad it’s working for you. Wishing you all the best!
Thank you Sharif and Nate.
I used your code and it works well for desktop and mobile.
However, I have a problem with the notepad version – both the transparent menu and the regular menu appear on the screen. This does not look very good.
Any ideas how to solve this?
Thanks again
Hey Ron, thanks for stopping by and reading my blog. You may need to add a display: none; to the transparent or regular menu based on the screen size and which one you actually want to appear.
Hi Sharif,
I applied the CSS for sticky header, but now the anchor of ‘Proefmassage’ is too high and how do I lower it with an extra CSS code?
Hi! Thanks for visiting!
Looking at your site, I’m not positive if you mean the first top item on the front page? If so, I see your .site-content is set to a top padding of 110 instead of 170 like my code example says. If you change it to 170, it will look better.
header is not being fixed. Using version 3.8
Hi and thanks for stopping by and reading. My demo site that I use to test my code is running version 3.8.1 and the code still works – it’s identical to what’s in this blog post. You’ll have to see what differs in your own installation of Astra and apply the CSS to those selectors.
Hello Sherif, Thanks for bringing your coding skills into play here. You’re already helping thousands if not millions. I began using information from your site way before I knew anything about WordPress and Astra theme. You know, I was building my site, but from nothing -no skills, no knowledge to start me off, but your site, man, HELPED me. Am glad to tell you that my website is now super-functioning. I build it myself. Thanks for your free advice.
Hi, thanks for stopping by and reading. I wish much success to you!
Hi ! Thx for the code. In free Astra (3.7.3) I had to add !important after position:fixed in .site-content . Then it got sticky but with transparent background (default?) Setting background:#fff; or any other color in same class fixes that.
Thanks for stopping by and letting me know – it’s been a challenge keeping up with all of Astra’s changes. The new header builder I have found there isn’t really a ‘silver bullet’ code that works in every situation, it really depends on which elements you used. I’m glad you were able to get it figured out!
Hi there,
Since the Astra update to 3.6.4, the sticky header doesn’t work on desktop anymore. It still works on mobile and tablet. I tried everything, but it doesn’t stick. Does anyone know a solution to this problem?
Thanks in advance!
So I was digging through my demo site that I use to check this code and it appears that if you go back to using the code from prior to Astra 3.0, you will have the sticky header back again.
Hello Sharif,
You are a hero!
Now I have a new problem and help you can have a look.
On mobile phone, the header has a large “white pace”/”padding” to the primary content (homepage) there, Could you please help share the code to remove that? I search on google and I understand it is a pro feature that allow users to control the “white pace”/”padding”
Thank you for sharing tutorial. i am looking for it for long way, although i managed to do only breadcrumb section only but now i did whole header section thanks again.
Hello Sharif,
Great Work! Thx for sharing 🙂 I installed the Astra Free Theme and got the Elementor Pro version. I Build a Header in elementor Pro, but can´t deactivate the Astra Header. I created a new Header with the Elementor Header builder and activated it. On the Homepage is still the Astra Header.. Can u help me with this?
Best regards
Hi,
Tried this in my website.
The desktop version is fine. Unfortunately in case of mobile or tablet clicking the toggle button doesn’t adjust the off canvas menu to the current position of the screen. So it doesn’t fulfil the need of sticky header in mobile devices. Can you help please??
Hello, I have updated the code to include a new adjustment for the off-canvas menu. Please go back and take a look at the updated version. You’ll need to adjust the top-margin setting in the provided code for your specific layout for it to work. I’ve tested it on Astra 3.6.2.
You saved my day man!! WallArte.co.uk ! Thanks for the code!
Awesome I’m glad it worked for you!
Hello, Thank you for sharing this code for sticky menu. However I want my header to be transparent on top and want some background color on scroll. Can you please provide me code? My website is https://alraassociates.com/ and I want its header like https://groveresidency.com/
Unfortunately as I have dug into the theme code for Free Astra, it doesn’t appear there is separate selector built-in for changing the color of the header after scroll. Even the Pro version of Astra doesn’t apply a scroll property – the Pro theme accomplishes the task using two separate headers, one of which is hidden based on the current scroll position.
Any way to change the background color to a hex code? Thanks
Yes, just swap out rgba(340,0,0,0.5) with the hex color you wish to use.
Thank you for helping!
I finally succeed to fix my header on top
but the situation is that I would like to separate my logo and main menu
if I slide down, only my logo sticky, main menu become into left side in the page
it could become?
sorry, my English is not really good.
I believe that is possible, but is beyond the scope of this article.
Thank you! I was bumping my head the whole day about that, but after I made it sticky nothing seems to create a sticky background as well so now I have no background behind the header.
I’m not sure I understand the issue. I looked at your website and the sticky header is working and looks to be fine.
Hi Sharif, thank’s for the value! I don’t want the header to be sticky on mobile, I only need a sticky header on desktop and tablet. Is it possible? If so what changes do I have to make?
Thanks in advance!
Hey Gerrit, all you need to do is use one of the media screen queries and apply the sticky command there. For example:
@media (max-width: 800px) {.site-header {
position: fixed;
width: 100%;
}
}
Thanks! Your sticky menu code partially worked in my WordPress Astra theme site.
The menu is sticky but on mobile, the top 2 menu items are cut off from view. I only see the last 3:
https://monacella.ca/wp2021/
Here is your code I used (mobile part only)
/*Adjust Content Padding for Mobile – adjust this based on your layout*/
@media (max-width: 800px) {
.site-content {
padding-top: 0px;
}
}
Do you know of a way to see all menu options in the drop-down mobile menu?
Thanks again!
Carl
Hi, your dropdown menu is behind your header and so it must also need to be padded downward in order to bring the higher items down into viewport. I looked at your site through Chrome’s inspection tool and it looks like you may be able to try this code to fix it:
.ast-builder-menu-1 .ast-builder-menu .ast-flex .ast-builder-menu-1-focus-item .ast-builder-layout-element .site-header-focus-item {padding-top: 100px;
}
You might not need ALL the selectors in the custom CSS but that’s what Chrome’s inspection tool is showing.
Thanks for your quick reply. Unfortunately that code didn’t work.
I sent you a message on Facebook for custom work.
UPDATE:
With many thanks to Sharif, here is the CSS code to show all the menu items:
/*Adjust Menu Padding For Mobile*/
.ast-mobile-header-content {
padding-top: 100px;
}
I can wholeheartedly recommend hiring him for custom work.
And don’t forget to read his blog articles, they are packed with gems!
Thanks again Sharif, you’re a stand up guy.
Thanks for the kind words, I’m glad I was able to help!
Mine is Astra Child theme but I can’t for the life of me get it to work, .main-header-bar
or .site-header doesn’t seem to be the correct header. Maybe I have a customer header or something. I tried the name in inspect tool but can’t. If anyone can check my site and let me know that would be great https://unlockmysim.com/
I looked at your site and the header is sticky. So it looks to me as if you’ve figured it out already.
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
Hi, I looked at your site and it looks like since your menu dropdown actually pushes the content down when it expands, your best option to get what you want will be to change the CSS selector for the dropdown menu to have a fixed position instead of relative (which appears the be the default). I can’t tell you exactly which selector to target without access to your site, but through Chrome’s inspection tool it looks like you may need to target one (or more, or all) of these:
.main-header-menu .ast-nav-menu .ast-flex .submenu-with-border .astra-menu-animation-fade .stack-on-mobile
You could try this to start (again, you might not need all the selectors but you’ll have to experiment):
.main-header-menu .ast-nav-menu .ast-flex .submenu-with-border .astra-menu-animation-fade .stack-on-mobile {position: fixed;
}
Hi Sharif,
Thank you very much for your time and dedication, to deep into the issue and answer for everyone.
If someone else has the same problem here is the piece of code you can Copy&Paste:
.ast-header-break-point .ast-mobile-header-wrap .ast-flex.stack-on-mobile{
position:fixed;
}
Thank you very much and good luck.
thank you! this worked great for me. i had tried a few sticky header plugins, elementor sticky header, and sticky everything!, and the elementor one was jumpy, and the sticky everything! didn’t resize properly when changing from landscape to portrait on mobile devices. your code really saved the day!
Awesome I’m glad it worked for you!
Hello. Thank you for the code, it is very helpful. I think there is one glitch with the header when the site is viewed with an iPhone. If the phone is in the normal way, it it ok but if the phone is on it’s side to get a more landscape view, the hamburger menu does scroll and it hides the content (which is normal as the screen height is minimal).
Thanks for stopping by and reading – I didn’t test this code with every screen configuration, but present it as a good starting point. There should be enough information there for you to figure out how to modify the CSS to fit your particular use-case.
What Tablet? What’s the code for tablet padding?
Here is my Site please Help: https://legithacks.tech
You should be able to use the same screen size queries in this post, just add one for the tablet size you’re designing for.
Just wanted to leave a thankyou for that info! super valuable to me. Just starting to learn all this and trying to do it all free since the bank account is thin right now!
Haha free is always better! I will say that some of the additional features that come with Astra Pro are well worth the money. Good luck to you!
Thanks, this saved me. Very grateful.
Awesome, I’m glad it was helpful. Thanks for stopping by!
Really helpful post. Thanks Sharif for share it.
You’re welcome, I’m glad it worked for you.
Very unfortunate, but it does not work on the website I am building. The Astra team has created a new Header Builder with version 3.0.1 of their theme. Things have probably changed in their new version?
Thanks for checking us out, I was just playing with the new version and I believe you just need to change .main-header-bar to .site-header and adjust the padding a little bit.
Thank you for this post. It worked for my site. I’m still trying to change the transparent head bar color after scrolling. If you’ve figured it out it’ll definitely be a lot of help. Thanks again
Thank you so much for the share. In my case the mobile version was looking odd with this padding so I changed the padding for mobile tо 57px and for tablet to 78px. Hope this helps someone else too.
/*Adjust Content Padding for Mobile*/
@media (max-width: 650px) {
.site-content {
padding-top: 57px;
}
/*Adjust Content Padding for Tablet*/
@media (max-width: 800px) {
.site-content {
padding-top: 78px;
}
}
Im able to change the background color for header on desktop but not mobile. Does the mobile header have a different class name?
I don’t believe the mobile header has a different class. At least not in the example I used in the article & video. Depending on your template it may be different though – for example, I know in the Pro version of Astra, the sticky header and transparent header are different elements entirely where one of them is hidden depending on the scroll-state of the page.
I want to make header semitransparent on scroll from transparent
I don’t have a way to do that right now. Please look at other comments in this post referencing changing the header on-scroll.
You made my day. Seriously.
Thanks for stopping by, glad I could be of help!
What if we want to shrink the sticky header when scrolled.
Hi thanks for stopping by, check out the comments as this question has already been asked. The short answer though is that it would take much more code to do so – Astra doesn’t assign a CSS state to the header after scrolling so there’s no way to change its style based on that criteria. Even their own pro header doesn’t do it this way, the pro header actually loads both headers and hides one depending on the page scroll state.
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.
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.
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 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 It’s working 🙂
Thanks for stopping by and checking it out!
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 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.
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.
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.
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,
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.
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 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.
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,
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!
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!
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.
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).
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.