How To Add Transparent Header To The Astra Theme - Free Version
ฝัง
- เผยแพร่เมื่อ 25 ก.พ. 2019
- In this Astra tutorial, I'll show you how to add a transparent header option to your WordPress website using the free version of Astra. Of course, it's good for the pro version as well.
Checkout Astra Pro www.wpcrafter.com/astra
EXCLUSIVE WORDPRESS DEALS 2023
🟡 SureCart -- www.wpcrafter.com/surecart (SAVE 50% Auto Applied)
🟡 SureMembers -- www.wpcrafter.com/suremembers (SAVE 50% Auto Applied)
🟡 Presto Player -- www.wpcrafter.com/prestoplayer (SAVE 33% Auto Applied)
🟡 Astra Theme -- www.wpcrafter.com/astra (SAVE 10% Coupon WPCRAFTER)
🟡 CartFlows -- www.wpcrafter.com/cartflows (SAVE 40% Auto Applied)
🟡 Cloudways -- www.wpcrafter.com/cloudways (SAVE 20% Coupon WPCRAFTER)
🟡 BuddyBoss -- www.wpcrafter.com/buddyboss (SAVE 10%)
* Want to offer a discount to WPCrafter subscribers, contact me on my website
BEST WORDPRESS PAGE BUILDERS
🟡 Spectra -- www.wpcrafter.com/spectra
🟡 Elementor -- www.wpcrafter.com/elementor
🟡 Beaver Builder -- www.wpcrafter.com/beaverbuilder
🟡 Divi -- www.wpcrafter.com/divi (SAVE 20%)
BEST WORDPRESS HOSTING
🟡 Full List -- www.wpcrafter.com/hosting
🟡 Cloudways -- www.wpcrafter.com/cloudways (SAVE 20% Coupon WPCRAFTER)
🟡 Hostinger -- www.wpcrafter.com/hostinger (SAVE 75%)
🟡 NameHero -- www.wpcrafter.com/namehero (SAVE 70%)
🟡 SiteGround -- www.wpcrafter.com/siteground (SAVE 70%)
CONTACT WPCRAFTER
☑ Website -- www.wpcrafter.com
☑ Facebook Group -- / wpcrafter
☑ Twitter -- / wpcrafter
☑ Twitter -- / adampreiser
All of the opinions expressed in this video are my own, I was not paid to make this video. Whenever there is a link in any of my videos, if there is a referral program available, please assume that you are clicking on a referral link. - แนวปฏิบัติและการใช้ชีวิต
WoW, thank you Adam for the video. This is great. I will now switch from oceanwp free to Astra free for the transparent header.
Happy to hear that! And they keep adding these Pro features to the free version of Astra.
THANK YOU!!! You've taught and help me so much!!!
Thanks !!! I was looking something like this for a long time!!!
Absolutley brilliant mate you have just solved a massive headache I was having thank you
Great tricks. I did the transparent header, but in the wrong way, enabled on the entire website, desktop + mobile. After watching the video disabled on the entire website, and enabled only on the home page. Thanks.
Hello! Is it possible to make the transparent header smaller? I would like it a little bit shorter on the page but I can't seem to figure out how to do that.
Thanks Adam. Quick question. I have astra Pro and elementor Pro. Is it best to customize things like fonts and colors using elementor or is it better to do it in the astra theme customizer? A best practice video on what to do in Astra theme customizer and what to leave out for elementor will be well appreciated.
Thanks you very much Sir, I am very happy with it
Hi Adam,
Thank you for the video 👍
Is it possible to make this header sticky ?
Thanks, Adam! Very helpful! I'm trying to make my footer transparent, can you please help?
Any suggestions as to how to make this work on mobile? I have a transparent header on my desktop site, but just a white block that obscures the top portion of the mobile screen. Thanks in advance for any suggestions.
Great tutorial, Adam! I've never used Elementor and I'm just about ready to dive into Gutenberg. Aren't they both page builders? Since Gutenberg is free, shouldn't I just use that instead of Elementor? Thanks!
Hello I'm new in wordpress. What is blog index page in "disable on blog index page". Is it like blog archives page or different? Thank you
Hello, if I have enabled Transparent Headers in Astra Header, how can I adjust the menu breakpoint? Didn't see any option for mobile header....>
This is Great! This should be the new 2019 default WordPress theme.
It certainly should.
I dont want a transparent header, but is there a way to apply my header to all websites ? (free elementor &free astra)
Thank you
Perfect 😊🤟🏼
what I do if this is not working?
Hi Adam, thanks for that! It appears that the transparent header option does not work with custom headers, have tried with Astra's Header & Footer builder as well as with Elementor's. I am hoping I'm wrong and you or someone else has figured it out! ^^
Thank you for the valuable info. I had a nice transparent header but somewhere along the line it's turned into a solid black background. I've ensured transparent header is enabled for the page (my home page). I've using Elementor Pro, and the free version of Astra. I'm very new to this, so wanted to see if you have any suggestions as to why my header is now solid. Thanks!
I knew as soon as I asked the question I'd figure it out. Simply had to change the margin of the top section containing the picture to -154.
Tnx sir. Really sir your video is very helpful for me
Thank You
You're welcome, thanks for watching.
Thought you will explain how to make a blog page with transparent header
Thanks Man
What do you think of using native theme customisation vs Page Builder like Elementor? Or can you do both on the front end?
I still prefer using what the theme offers. However I am tempted to start using Elementor header and footer's.
Great tutorial! Do you know if you can do a transparent side nav menu? Or know any theme that can do this? Cheers!
Unfortunately the Astra Theme does not have a side menu. They really should add one though.
I've followed this video and adjusted all the settings, but my header still has a white background. what am I missing? It's driving me nuts!
Astra has changed a lot in 1year :")
I'm afraid this solution doesn't work anymore. I always get a white background header on my menu although I choose transparent header.
Top!
Yes the header is at the top of the page ;-)!
Using the free version of Astra Theme, I've created a solution that allows you to get a fully customisable and animated sticky header. It's even better than the pro version in my opinion. Definitely worth checking it out. Full guides are on my channel. 👌
Is there a way to add an area above header to add links?
That is an option in the Pro version.
Great video Adam. Question: How do I create a sticky transparent header that shrinks when you scroll?
This might be an option in the Pro version but I'm not positive. I'm pretty sure it is though. I'm sure there's documentation on it over at their website.
@@WPCrafter 🤔 I'll have to look for it because I've had pro for 2 years now and never thought to look for it. I saw a video by another TH-cam but he used code in Elementor to shrink the header but when I tried it, it didn't work for me. Guess I'll do some digging around.
@@ThePracticalIntuitive I'll look into it. Maybe you will see a video soon on it :-)
GOOD
the real question is how do I get rid of transparent header in astra theme?
I guess, faced with Elementor Pro Theme Builder, BrainStorm Force decided to allow a very simple feature. I still prefer making my own header through Elementor.
Yo adam,great video but your link in description is wrongly typed and its not working
Hey thank you, someone also let me know the day I posted it and I fixed it right away. Thanks for looking out for me.
dr evil? is that you
This didn't really teach how to add a transparent header as your theme already had one.. How do you make a theme with a solid header transparent?
Here's the link to the official instructions (seems it slipped Adam's mind!)- wpastra.com/docs/astra-transparent-header/
Is anybody having problems having tranparent headers on mobile?
This doesn't work anymore, it looks like they blocked this behind a pay wall.
I really love your videos. You are too awesome. I would like to get your personal email address. Thank you
Looks like wpengine.com design lol
and disable the title
ROSA RAYHicimosELAMORutub
Glike.