How to create a Transparent Header Menu in Wordpress with Elementor Pro
Вставка
- Опубліковано 31 січ 2020
- In this tutorial, you shall learn one of the huge trends in web design right now, which is how to create a transparent header. In this video, I shall demonstrate how you can create a transparent header menu in WordPress with Elementor Pro from scratch.
→ Software I recommend
Hostinger for affordable webhosting: livingwithpixels.com/hostinger
Siteground for premium webhosting: livingwithpixels.com/siteground
Elementor for no-code web-development: livingwithpixels.com/elementor
Figma for Web Design: livingwithpixels.com/figma
All recommended software & discounts: livingwithpixels.com/links/
→ Starter Guides for Beginners
Elementor Starters Guide: livingwithpixels.com/elemento...
Figma Design Starters Guide: livingwithpixels.com/design-g...
→ Full A-Z Courses
Elementor Pro Mastery Course: livingwithpixels.com/elemento...
Figma Design Mastery Course: livingwithpixels.com/design-c...
Business Course: livingwithpixels.com/business...
→ Social media
Tiktok: / rinodeboer
Instagram: / rinodeboer
Twitter / X: / rinodeboer
Some of the links above are affiliate links, which means that I earn a commission when you make a purchase via my link. Thanks a lot if you decide to do that! I couldn't make all these videos without it. - Навчання та стиль
would love to see that the background color changes when you scroll down
yes please
Have been searching for this solution for half day. Thank you!!
seriously, you are the best wp/elementor instructor here on YT! i lost a whole year trying to build a blog but after i found your channel i was able to make my own theme in a few weeks. it's still not done but it's already looking amazing! thank you so so much!!!
Great to hear!
Just 50 secondes into this video, and I already know it's gonne be good. Thanks for the content man and keep it up!
Glad I found this channel. Just bought Elementor Pro for my Cybersecurity/IT Journey.
3 years later and this video is still applicable. I followed another video on the same subject a few days ago, but it suggested adding a negative margin to the hero section, not the header. While this works, I found that I would have to apply a negative margin to every page if I took this route, instead of just adding it to the header (once) per your recommendation. Thanks for the tip, I will apply this tip moving forward.
Oh man, thank you. You teach me how to make transparent menu but you explain to me a lot of another detail things, which help me too.
One of the best (maybe the best) tutorial I've seen.
Well done!
Very nice tutorial that shows that you can creat all this without additional plugins or a special theme. Just one question, as soon as you start scrolling, you will want to header to get some background color for legibility. Would be cool if there was a follow-up video on that.
One of the best tutorials on the internet. Thank you
super video. you were singing from start to finish and we all danced. everything is clear and easy to understand.
Nice one rino. We always wait for your video.
You the man! Haha, I bought your course, really busy at the moment, but looking forward to getting started soon!
Thanks a lot for this video. It's explained incredibly simple way and without unnecessary details.
Just purchased Elementor Pro, feeling very glad now as I watched this helpful video, thanks!
Great to hear!
I was facing the heading problem for a couple of week. I couldn't join on fiverr for this. I've searched for this solution in so many websites and videos. But all of them shows some Bullshit css coding and that is so awful.
But Here you gave the best solution of ever. No coding,No Css. just a simple trick. You're amazing man. God bless you and keep it up.
Awesome to hear, thank you!
I am very grateful for this video, now my menu looks fabulous. Very well explained, you are fantastic. Thank You!
the bottom -90 margin thing was what i was looking for ! TY so much !
Been your subscriber for long. Learnt alot from your videos. thanks
Rino, as always you're the best! Keep these videos coming. Thank you.
I have been going around for hours searching for a solution (also tried to exclude the main menu from some pages but my elementor bugged and that option is not working)
I cannot thank you enough for this video, man!
Clean smooth video. Thank you bro. Really helpful. Calmness 100
I searched for ages to find out how to do this, so thanks very much.
Thank you for the amazing content. Hope your channel grows bigger.
For those who don't use a specific height for the header just put an html element inside the page you want the transparent effect to take place and give the header a negative margin using its offsetHeight property with javascript!
Thanks a whole lot, you're helping me solve a huge web project with my company
Perfect!! I loved this menu style
thanks man, leuk om een mede Nederlander deze tutorials te zien geven. je hebt mn site gered, dit lukt, ik ga mijn website even aanpassen. geniet van je avond!
Easiest way by far that I have found to get what you want.
such great content! simply amazing!
Nice, will use that on our site. Simply clever setup!
Thanks so much for sharing this tutorial! I wish I had watched it before trying to make a transparent header on my own.
I recently got Elementor Pro, and your channel has REALLY been helpful to me. Keep up the AWESOME work!!
That was a great tutorial, friend. Thank you!
This video solved my confusions. Thanks for it
This was a very helpful video. Thank you so much.
Easy to understand and very helpful. Thank you
Amazing tutorial. Automatic follow. Cheers !
Best I have seen! Thank you very much !
You make a good stuff, took a lot for my websites. Thank you man!
You are amazing!
Thank you so much for your videos, they help me to progress with my website building.
Rino, you are wonderful. Thank you for this nice tutorial. It helps me to improve my knowledge and my homepage.
Wonderful tutorial! Thanks a lot!
thanks a lot for the video, have been looking for this effect. easy to follow. God bless you!
You are damn good man. So easy, crisp. No time waste. You nailed it man. Thank you soo much brother. keep it up
Subscribed, liked and downloaded Elementor Pro via your link. Really appreicate the clean delivery of information!
Thank you so much 🙏🏻
WoW..... Very nice tutorial. Thank You.
Thank you very much, I was looking for exactly this
Thank you from Brazil. You helped me a lot. ✌️
Thanks mate. Helped me a lot
Thank you very much! This tutorial was very great and saved me a lot of time!
This is a great tutorial. Thank you so much!
This helped me so much!!! Thank you 🙏🏼🤍
I am newbie, this tutorial is so much easy to understand for me.
Awesome!!!! Very thorough... ❤
Well explained!. Thank you for sharing.
Thanks for guiding us this video is very helpful for me
Heel erg bedankt Rino, het ziet er altijd zo makkelijk uit wanneer jij het doet 😉
Hahah!
Helpful video. Thank you.
You are one of the best! Keep up the good work...Cheers!
You're a legend thanks for making this video
Merci beaucoup pour votre tuto, très clair et qui fonctionne du premier coup
Thank you very much for your tutorial, very clear and which works the first time
Thank you so much! Such a helpful video.
Yess, so easy. Thanks for sharing!
Thank you sooo much. As always, your video was super helpful to me!
Fantastic tutorial! I really appreciate you sharing this information :) such a great contribution! Thank you.
Wow your tutorials are just amazing!
Thank you
Hi Rino, I created my first website with your support. Thank you for all your content - it's very impressive. Can you please tell me what font and font size you use for your header? I'm wondering if 14 as font size is a little too much (that's what I use).
Gracias Capo, un excelente tutorial.
Thank you for this video, it was exactly what I was looking for! I used your information to correct the top white space problem created when I made a transparent header following someone else's video.
I think I might have done something wrong, though. My home page is fixed, but it did not correct the header on the rest of my website. How can I fix this?
This is awesome!!! Thanks a lot!!!
Thanks for this tutorial!
By the way, how did you do to put your logo under the WordPress dashboard section?
Amazing video. I learned a lot from it. Thank you.
Thanks you so much for the video,, You helped me alot, usually i'm not commenting but you support made me to express my feeling. Many Thank!!!!!!
this is amazing now i know how to create transparent header menu in WordPress using elementor
Really helpful tutorial. Thanks a lot
Very nice mate!
Great tutorial 🔥🔥 Thanks! 👍
Thanks a lot that was an amazing tutorial, we appreciate it !!!
Seriously GOOD!
Thanks this looks great!
awesome as usual!!!
Oh wow wow wow wow wow. I love this. Thank you so so much
Thanks for this clear tutorial, I made everything and it works in the page builder, however on my website the result is completely different, my menu is still separated from the block below. any ideas ?
Great video!! U're the best!
Oh man, thank you so much ,Thank you for this video
That was so helpful. thanks
Trankil you for your advice. You add joy on my day 🙂
Great video. In there a way to show the menu as transparet on some pages and not transparent on others?
Thank you for this cool vid! I was wondering why didn't you just vertically align: middle the whole container instead of individually at around 6:20?
excellent explanation. I gained and applied. thanks a lot
Great tuto and very easy. Just one question, how can i get this same effet on mobile, do you have to add/change a few things in the css for it to work ? Thanks
Excellent explainer video. Thanks
I was kind enough to google your spelling of transparant thinking you misspelled it, but not so. You are using the Dutch spelling. I learned something today. Rock on, great video!!
Thank you. My intention was to use the English spelling, so I changed it. Thanks again!
Amazing! Thank you
Great Video!!! Thank you so much!
Amazing quality and content thanks 👍❣️
God Bless you brother. Very nice tutorial.
Thank you so much. What I do is select the header container and set the background to be transparent. Then go to advanced (with the container selected), scroll down to where it says "position" and select "absolute". Then I go down to where it says "z index" and put "1".
Thank you! This helped a lot
Thank you Rino, good job :)