How to Create a Sticky Header in the Free Version of Astra with CSS (NO PRO, NO PLUGIN)
ฝัง
- เผยแพร่เมื่อ 19 ก.ย. 2024
- The free version of the Astra WordPress theme doesn't have a sticky header available. In this video, I show how to use custom CSS to achieve the effect without having to purchase the pro version of Astra.
You can view & copy the code snippet in my blog here - I keep it updated with the latest copies of the code as Astra releases updates - INCLUDING the new 3.0 update:
cgscomputer.co...
*****
The following are affiliate links - if you purchase through the links I may earn a commission. It costs you nothing extra and helps me to fund this channel and my blog.
Astra Pro current pricing: wpastra.com/pr...
Elementor Pro current pricing: cgscomputer.co...
Rank Math SEO Pro current pricing: rankmath.com/p...
![[FREE] How to Create Transparent Sticky Header in WordPress with Elementor](http://i.ytimg.com/vi/ccYnXY2_Kvc/mqdefault.jpg)
![[FREE] How to Create Transparent Sticky Header in WordPress with Elementor](/img/tr.png)
For those wondering - the blog post in the description contains the CSS code updated for Astra version 3.0.
Thank you for helping us! Even with the current updates, one can assemble the code however they want, based on your instructions. 🤘
Excellent tutorial. I had found the code on your website but it didn't work. Seeing this video showed me what to change (.site-header change to .main-header-bar) and it works beautifully, AND I now have the added advantage of seeing how it works. Thank you so much!
This works. CCS class for me is "main-header-bar-wrap" but the same for everything else. ty.
Glad you got it working!
I'm super new to building website. This was so clear for someone like me. Thank you!
I'm glad you liked it. Thanks for watching!
Thank you for your precious video.
I changed top 0 to 1.
Perfect!
Grazie!
You're welcome 😊
Thank you sooooo much, this is all I needed! And I especially appreciate you updating the blog too!
Thanks so much for watching and commenting! I'm glad you got what you needed.
Coincise and perfectly understandable, thank you for sharing your knowledge!
Thanks! I'm glad it was useful for you!
Thank you very much for this. Actually I am lucky to see this. Please do more videos. It is very clear and easily understandable without any long unnecessary contents.
Thanks for watching, I'm glad it was helpful!
Thank you. Been looking for this for a while
Thanks for watching, glad it provided some value to you!
Why I am seeing this video after 3 years? Why?
Thank you bro. Subscribed, liked and will will probably bookmark your channel.
Thank you and you are awesome
Thank you!
YOU'RE A LIFESAVER ILY
Thank you, the tutorial is easy to understand, I tried and it works perfectly !
Great to hear!
Working in 2023. Thanks a lot
You are a life saver brother. Thank you so much.
Thanks for watching! I’m glad you got what you needed from it.
thank you and have a nice day!!! will remember to buy via your affiliate link when I need a pro version...
Please do!
This works fine in the desktop version. In case of mobile the menu doesn't scroll down. When I press the toggle button the menu still comes at the top of the page only. Help please.
Thank you for commenting. The code is set for Astra as it is on the default installation, I just checked again on my test site and the code is still valid on a fresh Astra free installation. However, if you're using other Astra features such as the Custom Headers or you've installed one of their starter templates, you may need to inspect your header elements in the html code to see what CSS selectors to target.
you made my day man! Thanxs a lot!
Glad it worked for you!
thank you for saving me a ton of time!
You're welcome, I'm glad you got something of value from the video :-)
Hi, thank you for making the tutorial and sharing the codes, it works perfectly in 3 different devices. Great Job!
Glad it helped!
The best solution ever
Thanks man!
Really helpful and clear thank you !
YOU ARE AMAZING. Thank you
Thank you for such a nice comment! It's highly appreciated :-)
Thank you! That was so helpful, and so quick!
Glad it helped!
Thank you!!! It works, and I'm very grateful to you!
You're welcome!
Great job!
Thank you very much.
Glad you liked it!
thank you so much for this insight!
You're so welcome!
Thank you so much; you've been a great help
Thank you so much !
Your video was amazing clear. XXxx from France
Thanks for watching, I'm glad you got some value out of it!
Excelente Vídeo. Me funciono muchas gracias por tu aporte. Saludos desde México!
Thanks for watching!
Great job!
Thank you so much :)
Our pleasure!
That`s very usefull. Good job! Thank you so much!
Agata Fratczak thanks so much for watching :)
@@cgswebdesigns You're welcome 🙂
thank you
You're welcome
Thank you!!!!!!! This video is gold!
Glad it was helpful!
thank you so much!! even i as a wordpress beginner could handle this:)
Glad it helped!
Thank you very much for the code. One question: did you put your mic right on the table? Because you can hear every move of your mouse
keep up the good work. Nice
Thanks, will do!
Wow, super helpful!
Thank you, man. So helpful
You're welcome!
It's working! Thank you.
You're welcome!
Thanks! ; )
Welcome!
Great tutorial, does anyone know how to make header shrink on scroll down?
Thanks ❤
Thanks, useful
Glad it was helpful!
Great tutorial and it works for me. what I need to do is, I have a above header and when you scroll down, only the main header will remain sticky and the above header will be pushed above?
I hope you'll help me with this. Thanks!
You would need some Javascript code in order to detect the scrolling. Unfortunately, I don't know how to do that just yet. :(
very nice video you deserve like dear
Thank you! Cheers!
Fantastic! Can you please make a video showing how I make it fully transparent then when i scroll its semi or not transparent anymore after a length of scroll?
Hi, thanks for checking out the article! In order to make the style change on scroll, you would need to write some Javascript code. Unfortunately, I'm not very good with that :/ Sorry!
Thank thank you so much
You're most welcome
Great video!! Thank you a lot! ;)
Glad you liked it!
How to keep sticky header only for desktop? I don't want the sticky header for smaller screens.
You can use media queries in your CSS code the same way we adjust the padding for different screen sizes.
Thank you for this great info!
Is it possible to have only the "primary menu" of the header sticky and not the "below menu?"
Superrrrr thanks very muchhhhhh
Welcome 😊
Hi, this is great! But it is for a post right? It is not working for me as mine is a page. Is there any way to do for that too?
Thank you bro its really help
Happy to help
Thank you!
Thankyou! I did it.❤️
Great job!
Thanks bro
You're welcome 😊
howdy, any idea why this wouldnt work? I followed the instructions and the header is not sticky
I've tried your CSS code on the Astra Mountain template and the menu is sticky, but the background stays transparent no matter what colour or opacity I try in the last bit of your CSS code. It's a transparent header when inspect the style. Any way of making a sticky white background behind the sticky menu items?
Thanks for watching. When I originally made this video, transparent header was a premium feature but now they have it in the free version which means it has its own class - I've never used that template myself, but looking at the example from Astra's Starter Websites it looks like you can target their transparent header class with something like this:
.ast-theme-transparent-header .main-header-bar, .ast-theme-transparent-header.ast-header-break-point .main-header-bar {
border-bottom-width: 0;
border-bottom-style: solid;
border-bottom-color: rgba(0,0,0,0);
background: #FFFFFF;
position: fixed;
width: 100%;
}
The last 3 lines are the ones I added in developer mode in Chrome and that made the header solid white, sticky, and stretched to the full width of the page.
CGS Investments LLC Thanks a lot! That’s great of you to go tot the trouble. 🤗
@@cgswebdesigns Thank you SO MUCH!! Really appreciate your help!!! You are the best!!!
Thank you so much.
You're welcome! Glad it was of use to you :-)
Thanks dude 😎
Happy to help
thank you so much!!!!!
You're welcome!
Grazie!
You're welcome!
great work
Thank you!
lovable gift for us, Thank you so much. big like and subscribe.
Thanks for watching!
Anchor links are not working nicely with the new transparent sticky header of Astra theme. It hides some of the text due to the header. Can you provide the code to solve this problem?
I am using Astra free version and used your code to make it sticky.
Hey thanks for watching, I'm not actually sure how to make that happen. Since this code is applied to the Astra free version, the container and .js adjustments that make it smooth in the premium version don't come in to play. You can check here for possible answers: stackoverflow.com/questions/10732690/offsetting-an-html-anchor-to-adjust-for-fixed-header
Hi, thanks so much for this tutorial, you explain things brilliantly. I'm not quite looking for a sticky header, i like the transparent look, but i want the header to shrink when people scroll, so the header remains at the top, with the menus still visible as they scroll. Does this make sense? I think it's on scroll effect.
Thanks for watching!
I think this is what you're looking for: th-cam.com/video/uIZz3ZpU7gU/w-d-xo.html
It'll make your header sticky and shrink while scrolling.
Work, thank you :O
Thanks for watching!
Great. Tak!
Glad it helped!
Hi, could you please help
what if i want it transparent on top but when i scroll it becomes opaque.
or how to make the very top post come in front of the header, i tried changing z-index of top post but couldn't reach header z index
Thank you
Thanks for watching and visiting my channel. 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.
@@cgswebdesigns In the latest Astra free version, the header by default is transparent. When I used your code to create sticky header it didn't worked well with "Table of Content" links. The transparent header cause the position to move below where it should be.
Example: Visit this link: financevidhya.com/ppf-nps/
Click on "Table of Content links " or the "Subscribe" button in the header.
Can you suggest the code to remove transparent header? I want a solid header. I tried disabling it using Astra options but it didn't worked. May be your code overrides it. Thanks.
Hi, Sharif, this was awesome thank you!
One question tho - I have a free version of Astra and am currently building my website. I cannot find where to change the look of the drop down Menu that comes from the main navigational menu. for example: when I hover over 'services' the drop down menu looks horrible - it is some kind of a bubble and i want to change it but don't know where. (I googled as well, still couldn't find it). Anyway, I would really appreciate if you could help :)
Hi, sorry I missed this question or I would have gotten a reply to you sooner. In Astra free it's pretty limited, but you should be able to find settings in the Header Builder section of the Customizer. Drop the Primary Menu widget into the Header Builder and then select the widget and click the DESIGN tab. That will give you the configurable options that are available. If you know CSS, you can also target the .sub-menu CSS class for your own customizations.
Try to click the link on the description above but I was denid access. can you help! Thanks
What country are you accessing the site from?
how can I do this for the blog site only ?
You could try using the blog selector... try using the same code but add .blog to the beginning of the CSS selector for the elements.
helpfull
Glad to hear that
Hi there, thanks for making this video. I've copy and pasted the code for the Astra 3.0 Header Builder into the Additional CSS section of my site, but the sticky header is not working. All that happens is adding a frustrating 1px line underneath my header without it being sticky. Also the page is private and not published.
Do you have any suggestions for where I may be going wrong?
I just used the beginning of the code and it worked but there's still issues with it sticking on responsive sizes, mobile in particular
/*Make Header Sticky - for Astra 3.0 and later*/
.site-header {
position: fixed;
width: 100%;
}
@@callumyaw1203 Hi Friend, I had the same problem. I resolved with this code:
.main-header-bar {
position: fixed;
top: 100;
width: 100%;
}
.ast-mobile-header-content
{
position: fixed;
top: 0;
padding-top: 100px;
width: 100%;
}
You will need to adjust the padding-top to the size of your menu. I hope it helps you
Thank you for commenting. The code is set for Astra as it is on the default installation, I just checked again on my test site and the code is still valid on a fresh Astra free installation. However, if you're using other Astra features such as the Custom Headers or you've installed one of their starter templates, you may need to inspect your header elements in the html code to see what CSS selectors to target.
@@euliziliskawafune7096 You, yes, you... You are a lifesaver. You... yes, you have to know that. The second line helps me a lot with my page. I had a problem with the submenu that didn't appear in the mobile. but with your second line of code, it works!!! Thanks so much and May the Force be with you...
@ Your welcome and also May the Force be with you... 😁
Olá. Você pode liberar o código css do Sticky Menu Astra? Por favor. Parece-me que seu blog está fora do ar. Obrigado!!! I am fron Brazil.
I'm sorry, I have Brazil blocked via Cloudflare due to the amount of malicious traffic hitting my blog from there. The code is visible in the video. Please check out this code on PasteBin: pastebin.com/A7nbA6jj it is set to expire so I don't have to keep changing it there when Astra changes theme code.
@@cgswebdesigns
It's all right. I teased the code of the video. thanks for sending the code link.
@@ricardoaguiar2522 Nao consigo ver o codigo. tem como me passar por favro
How to increase the font of the main menu in the header with an Astra theme for free?
You may just be able to add: font-size: 24px; to the same CSS IDs I used in the video.
*copy paste this*
/*Make Header Sticky*/
.main-header-bar {
position: fixed;
top: 0;
width: 100%;
}
Thanks for watching :-) I didn't post the actual code here because as theme versions change, the code required is likely to change. My blog post has the latest version.
I can´t enter to the site to see the code. Can you send me please.... Thanks
I changed up my Cloudflare settings, you should be able to get to it now.
not working bro
I've tested this today with a fresh installation of the latest Astra theme, with no additional plugins, and the code still works. If you have additional configuration or plugins overriding the CSS then you may have different results.
Not working after latest update of astra theme. please help.
I checked it again on the latest version today and it still works. Exactly the same code on a fresh Astra theme. If you have installed an Astra site template, this may not be the case as their templates include other header functions that may override this.
It is working now...thanks a lot.
Just one more question. Will this code work in ocean wp theme also or do we need different codes for different themes?
@@lajisjourney3241 You'll probably need different code. in Google Chrome, if you right click the header in OceanWP and choose "inspect" you can search out the CSS IDs of the header and try the code with that replaced to see if it works.
Can i use this for free elementor version? Does it apply to all website?
I haven't tested it on a site running Elementor, it might work though.
your website as for spam verification and nothing happens just the same thing again and agani
I apologize for that. I have a security verification provided by Cloudflare which challenges traffic coming from countries that generate the most attacks on websites, these countries include Brazil, Russa, China, & India. If you're in one of these countries you'll need to pass the verification to see the site. If you can't pass the verification, you'll need to try a different web browser that's up to date and secure.
Where is the CSS code?
The link is in the description of the video - I keep the code updated on the link since I sometimes have to adjust it after Astra updates. The latest working version will always be at the link in the description.
please do it in astra 3.0 free also please
I tested this today with the latest version of Astra and it still works.
Your blog taking too long to open.
Btw it helped a lot. Thankyou from INDIA!
@@vidya__bhushan Thanks for hanging in there! I have some firewall rules applied to traffic from India because I get a lot of bots from there. I'm sorry that it slowed down your experience but I very much appreciate your feedback. :-)
not working anymore
I just tested the current code on my test site and it's still accurate. You may need to double check you're using the code I posted in my blog - that's where I keep the code updated when Astra makes changes that require me to make adjustments. Also, if you're using an Astra site template from their collection of pre-built sites, some of them use different header options that negate the base code and you'll have to adjust it.
Thank you!!!
You're welcome!
thank you so much
You're welcome!