How to create a Transparent Header Menu in Wordpress with Elementor Pro
HTML-код
- Опубликовано: 28 янв 2025
- 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: livingwithpixel...
Siteground for premium webhosting: livingwithpixel...
Elementor for no-code web-development: livingwithpixel...
Figma for Web Design: livingwithpixe...
All recommended software & discounts: livingwithpixe...
→ Starter Guides for Beginners
Elementor Starters Guide: livingwithpixe...
Figma Design Starters Guide: livingwithpixe...
→ Full A-Z Courses
Elementor Pro Mastery Course: livingwithpixe...
Figma Design Mastery Course: livingwithpixe...
Business Course: livingwithpixe...
→ 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.
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!
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!
Till the 4:00 min was enough to me undestand what i need to do here. Transparent menu!! Thank you!!
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!
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.
I searched for ages to find out how to do this, so thanks very much.
super video. you were singing from start to finish and we all danced. everything is clear and easy to understand.
would love to see that the background color changes when you scroll down
yes please
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!
Glad I found this channel. Just bought Elementor Pro for my Cybersecurity/IT Journey.
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.
Have been searching for this solution for half day. Thank you!!
Just 50 secondes into this video, and I already know it's gonne be good. Thanks for the content man and keep it up!
Heel erg bedankt Rino, het ziet er altijd zo makkelijk uit wanneer jij het doet 😉
Hahah!
Just purchased Elementor Pro, feeling very glad now as I watched this helpful video, thanks!
Great to hear!
One of the best tutorials on the internet. Thank you
Nice one rino. We always wait for your video.
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!
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.
Rino, thanks so much for this useful tutorial. I noticed when I duplicate the nav-menu, in the PC version it goes a bit up (like if it had a negative top margin). I see in your video that happened too, but on your live website it's fixed. How did you managed that? I did it by duplicating the whole section (logo, menu, socials...) and hiding them from PC or mobile. Just wondering how you did it to see if there's a better solution. Thanks!
Exactly , happens every single time
One of the best (maybe the best) tutorial I've seen.
Well done!
the bottom -90 margin thing was what i was looking for ! TY so much !
Rino, as always you're the best! Keep these videos coming. Thank you.
Subscribed, liked and downloaded Elementor Pro via your link. Really appreicate the clean delivery of information!
Thank you so much 🙏🏻
I am very grateful for this video, now my menu looks fabulous. Very well explained, you are fantastic. Thank You!
Thanks a whole lot, you're helping me solve a huge web project with my company
Legend! Spent an hour looking for how to remove the white bar!
You are damn good man. So easy, crisp. No time waste. You nailed it man. Thank you soo much brother. keep it up
I am newbie, this tutorial is so much easy to understand for me.
Iam not a web designer and I built my website from scratch watching RUclips videos, I spent days looking for a video to show me how to make a transparent header and didn’t find it! I ended up installing a sticky header plugin, it worked but it wasn’t exactly what I was looking for, and now I found this video.
I’m building a blog inside my website, is it possible to change de header just in the blog pages?
Your videos are really good, the best I have seen, and I’ve seen a lot!
That’s awesome to hear. Thanks a lot. And yes this is possible. You do this with Conditions. So if you save a header there is the Condition option, where you can tell Elementor which pages the header needs to show (or not show) on. For already saved headers you can find the conditions inside of the Update button. I hope this helps!
@@rinodeboer thank you so much! I am always afraid of messing things up everytime I make changes, but now i made a copy of my website so i can experiment before implementing on the online website, i'll try to do as you said and i'll give you feedback!
Very nice video! Thanks man, only issue I have is right at the end the menu items aren't aligned to the button. Yours is the exact same, can you help me ammend this, not sure why it happened right at the end. I'm guessing it's something to do with the extra menu for mobile?
this is amazing now i know how to create transparent header menu in WordPress using elementor
this video you've got 2.36k subs but now, just wow.. congrats Rino
Wow! I didn’t realise that. Thank you 🙏🏻
Been your subscriber for long. Learnt alot from your videos. thanks
btw you don't need to actually open your website on your phone, you can simulate it on chrome browser by opening inspect menu, and then click on the little mobile icon on the top left of inspect window, and then select the screen size of mobile to simulate the website for mobile phone👍
Your video deserve a Million Subscribe.
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".
Hello, sorry for my poor english, i am Swiss, french mother tongue (nobody is perfect). Just a short message for say : Realy nice and good tutorial. The result is WOW !
Now i go to find in your account if you do something for footer. We never know, maybe you do that. Thank you for this video, thumb up for me !
How do I add this menu to my existing site? When I refresh my page, the changes don't show on the site. I'm assuming it's not attached to my site. Thanks
Great video. The 'edit header' orange tab has disappeared from my header and I can't select it to edit it. Any idea how to fix that? Thanks.
Hi, thank you for sharing this! Just want to ask if it’s possible for me to only use the transparent header for the homepage/main page. Because besides the main page, all other pages background will be white. Thank you!
Rino, you are wonderful. Thank you for this nice tutorial. It helps me to improve my knowledge and my homepage.
You the man! Haha, I bought your course, really busy at the moment, but looking forward to getting started soon!
You make a good stuff, took a lot for my websites. Thank you man!
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!
This video solved my confusions. Thanks for it
Thank you! it was really good with very clear explanation.
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!!!!!!
Thank you for the amazing content. Hope your channel grows bigger.
Hello Rino
I want to express my gratitude for your enlightening video on creating transparent navigation. While following your instructions, I encountered an issue with the submenu topics that gave me a bit of pause.
I noticed that the top hierarchy cannot be activated when a user is on a subpage. This could potentially lead to visitors not being certain about which page they are currently on, especially when navigating through the submenu.
Have you come across any solutions to this problem? It would be fantastic if you could share your insights. Perhaps this could also make for an interesting topic for one of your upcoming videos.
Thank you for your remarkable work and your continuous willingness to share your knowledge.
Best regards,
Christoph
Great tutorial, for some reason I am getting white space going over the top of my header despite following your guide in full, I think it mabe my theme causing the issue but I can figure out how to disable it. I am using an Astra Starter theme. Can you provide any advice how I can sort this out. Many thanks!
He Alex. I've also worked with Astra. Astra adds a few extra bars on top of your page. You really need to dive into the customizer and find where they hide it. Sometimes it's called: "Top Bar" or something like that, or "Title bar". Sorry I can't tell you exactly where it is, so I hope this helps!
@@rinodeboer I worked it out in the end, had to play around with the margins to get it where I needed. Thanks very much for your response!
@@alexbucklandphoto Hey Alex I am having the same issue here! How did you get rid of the white bar at the top? Thank you!!
Wow your tutorials are just amazing!
Thank you
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
Great video! I did what you did and I do still have a small box in white in the header. I can NOT figure out how to get ride of it. Any advise, i checked the themes setting but not finding the magic button to fix this. Thanks
Great tutorial, what if i want to show button in the mobile menu? Is there way to keep the button in the mobile menu please help, thanks
You're a legend thanks for making this video
That's great sir i have learned many things from you in this one small video and also subscribed your channel🎉🎉❤
Rino must be best RUclipsr
Thank u so much for this tutorial. It really helped me🥺
Thank you from Brazil. You helped me a lot. ✌️
Thanks for your video. I've made a new transparante header. Everything worked fine. Now the hamburger menu is not working in the mobile. But on the pc/elemetor/wp its works. Any advice what I need to do? Thank you
Hi , another small issue I ran into also was when I create the mobile menu it throws everything out of alignment on the desktop.
How did you change the underline color when hover on menu navigation items. Please do let me know
Thanks mate for the content. This is a great tutorial. The problem I run into is implementing a sticky menu with color changes for scroll down. Do you have a solution for this?
I can make a video about this. Thanks for the idea!
@@rinodeboer I have the same question. In case you haven't made it yet, I would appreaciate it a lot!
hEY BUDY, ITS AMAZING! GREAT WORK! HI FROM BRAZIL
That was a great tutorial, friend. Thank you!
Thank you so much you really help me to know a lot of things about Elementor i wish you all the best keep going and we are waiting always for more videos
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?
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!!
Nice, will use that on our site. Simply clever setup!
hey, could u tell me what is your elementer page setting while u created the header?
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
I can tell you that you are an excellent mentor. Thank you for this :D . I laughed too at 8:01 xD...
I have two sets of arrows in my dropdown menu, which doesn't make sense :D
can you elaborate on the "customize" menu of the theme and what to take care of there is necessary?
Great Video! love it
I just used your affiliate link!!! Thanks for the tutorial!!!
Awesome! Thank you as well 👌🏼
Clean smooth video. Thank you bro. Really helpful. Calmness 100
Thanks for guiding us this video is very helpful for me
Great video. In there a way to show the menu as transparet on some pages and not transparent on others?
Which themes do you suggest to use with elementor without facing any problem like header, footer etc?
Very good tutorial Very helpful Thank you.
Thank you for your help! I used your affiliate link today :)))
Nice work, Could you tell me Theme do use to set the Pages?
excellent explanation. I gained and applied. thanks a lot
You are amazing!
Thank you so much for your videos, they help me to progress with my website building.
This helped me so much!!! Thank you 🙏🏼🤍
Easy to understand and very helpful. Thank you
Great video! It's working, but in a weird way. I set the minimum height to 90, but after I have to change the margin to -177 in order to no see the background anymore. I also have a video in the background, like you have, but it looks like the video is cropped and not showing the full height. What could be the issue causing this?
Same happened to me.
Hi Rino.. thank you the tutorial video. at the end you mention about white background in header section. Yes, i am facing same issue, whenever the page is refreshed, it is showing white background in header before loading the design. i am using Hello Elementor theme. but i dont know how to fix this. Can you please help
Amazing tutorial. Automatic follow. Cheers !
Great video! I have a problem. I added a background image and followed your video. However when i choose mobile view I do not see the background image only on desktop and tablet. What am I doing wrong ? I have spent the past hour trying to work it out :(
hi! i love your tutorial and I was able to follow your seps and it looks fantastic in desktp and tablet mode. Just looks awful mobile mode... what can I do? I would be really dishearntened if I had to disable it completely and go back to the normal menu... :-(
God Bless you brother. Very nice tutorial.
hey bro you have any tutorial on creating a custom dashboard for clients with form & update entries. customers can only view their dashboard while the super admin can view all
When i make changes to my header regarding widget sizes and location, it affects it on the desktop version as well - How can i fix this?
@livingwithpixels What is the best size and format for video upload?
Hi. Thanks. I have been doing this process on a few sites but is there a way to allow the header to turn opaque and sit at the fixed to the top as you scroll down the page? TIA
Trankil you for your advice. You add joy on my day 🙂
Hi thanks once again. Can I ask how do you insert the video and have it overlay with the header? I understand it as you insert a video first, but how do you add a header on top of the video?
I dont know why, when i set an image, it gives me other extra white margin or padding and I can not make it totally transparent. When i go more than certain width it starts to giving me this white row from top. Ok problem solved to give -170 pixels on the bottom margin of section.