How to create a Transparent Header Menu in Wordpress with Elementor Pro

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.

[@thecozyconstellation]

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!!!

[@rinodeboer]

Great to hear!

[@LordJHouse]

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.

[@MuhatasimShad]

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.

[@rinodeboer]

Awesome to hear, thank you!

[@theenchanted3069]

Have been searching for this solution for half day. Thank you!!

[@charley3849]

Just purchased Elementor Pro, feeling very glad now as I watched this helpful video, thanks!

[@rinodeboer]

Great to hear!

[@brandon5614]

Glad I found this channel. Just bought Elementor Pro for my Cybersecurity/IT Journey.

[@shiranjude]

super video. you were singing from start to finish and we all danced. everything is clear and easy to understand.

[@jennyfuchs666]

would love to see that the background color changes when you scroll down

[@namubakclothing3007]

yes please

[@marekgabik2898]

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.

[@ArnoldBaldeNL]

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!

[@foodcity9996]

Thanks a whole lot, you're helping me solve a huge web project with my company

[@kevinveg]

I searched for ages to find out how to do this, so thanks very much.

[@ambrishsudhanandan7098]

the bottom -90 margin thing was what i was looking for ! TY so much !

[@robindegroot5629]

Just 50 secondes into this video, and I already know it's gonne be good. Thanks for the content man and keep it up!

[@brunobogdan7822]

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!

[@Dr.JayPrasad7]

You are damn good man. So easy, crisp. No time waste. You nailed it man. Thank you soo much brother. keep it up

[@rahmotulla]

I am newbie, this tutorial is so much easy to understand for me.

I am very grateful for this video, now my menu looks fabulous. Very well explained, you are fantastic. Thank You!

[@awakekat]

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!!

[@rinodeboer]

Thank you. My intention was to use the English spelling, so I changed it. Thanks again!

[@robsonvieira1080]

One of the best tutorials on the internet. Thank you

[@moonbeetle]

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.

[@almakisingokay]

this is amazing now i know how to create transparent header menu in WordPress using elementor

[@brianbh1528]

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!!!!!!

[@zelthyXD]

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".

[@bamideleoyekanmi9958]

One of the best (maybe the best) tutorial I've seen. Well done!

[@patrick64240]

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

[@levindeheer2056]

Heel erg bedankt Rino, het ziet er altijd zo makkelijk uit wanneer jij het doet 😉

[@rinodeboer]

Hahah!

[@craigcastle4605]

Rino, as always you're the best! Keep these videos coming. Thank you.

[@sommyincrease]

This video solved my confusions. Thanks for it

[@morph.6487]

Legend! Spent an hour looking for how to remove the white bar!

[@tsunsol]

Rino, you are wonderful. Thank you for this nice tutorial. It helps me to improve my knowledge and my homepage.

[@skiller1081]

Been your subscriber for long. Learnt alot from your videos. thanks

[@komalzafar4799]

Thank u so much for this tutorial. It really helped me🥺

[@twbashar]

Nice one rino. We always wait for your video.

[@kierantelos]

Subscribed, liked and downloaded Elementor Pro via your link. Really appreicate the clean delivery of information!

[@rinodeboer]

Thank you so much 🙏🏻

[@asjka67]

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 !

[@mujtaba135]

Your video deserve a Million Subscribe.

[@MrBioneto]

You make a good stuff, took a lot for my websites. Thank you man!

[@nicolenixxon]

For anyone new to WordPress who wants to start creating their own websites, this guidebook will prove to be quite helpful. By using ElementsReady, the procedure will be sped up and made easier for novices.

[@lethalsin]

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!

[@Haroldus26]

Thanks a lot for this video. It's explained incredibly simple way and without unnecessary details.

[@yuliashor6298]

You are amazing! Thank you so much for your videos, they help me to progress with my website building.

[@shahfaisal4227]

That's great sir i have learned many things from you in this one small video and also subscribed your channel🎉🎉❤

[@gabrielrodrigomarquesduglo9130]

Thank you from Brazil. You helped me a lot. ✌️

[@uboxtech]

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👍

[@Purcella13]

Easiest way by far that I have found to get what you want.

[@BryanGranse]

this video you've got 2.36k subs but now, just wow.. congrats Rino

[@rinodeboer]

Wow! I didn’t realise that. Thank you 🙏🏻

[@nychto2642]

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

[@LobsangRivas]

Thank you for the amazing content. Hope your channel grows bigger.

[@rivenlikemakar]

You're a legend thanks for making this video

[@mubashirali4741]

Thanks for guiding us this video is very helpful for me

[@lauregarelvoyages1406]

Trankil you for your advice. You add joy on my day 🙂

[@Vivazart]

hEY BUDY, ITS AMAZING! GREAT WORK! HI FROM BRAZIL

[@cynthiamanor6565]

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!!

[@DKingFisher]

Clean smooth video. Thank you bro. Really helpful. Calmness 100

[@felixotten8434]

Thank you very much! This tutorial was very great and saved me a lot of time!

[@scrollsequence]

Nice, will use that on our site. Simply clever setup!

[@biswajitnarzary5071]

Easy to understand and very helpful. Thank you

[@ancastan4069]

Thank you so much very helpful!!! I used your link to buy the Pro version.

[@rinodeboer]

That’s awesome! Thanks so much

[@lmp2428]

Thank you so much for this video , i really got what i want ! this is a really usefull video

[@winatabarijin]

Very good tutorial Very helpful Thank you.

[@saidsoultani8831]

Oh man, thank you so much ,Thank you for this video

[@ezk10003]

You the man! Haha, I bought your course, really busy at the moment, but looking forward to getting started soon!

[@nadeemmurad]

excellent explanation. I gained and applied. thanks a lot

[@danburdie]

I was looking for that kind of tutorial for a very very long time so I kinda figured it out myself but using free plugins. It was not that easy and as much customizable but it did the job well. However this tutorial is awesome and definitelly will use that for myy customers websites.

[@nataliesalander7840]

Fantastic tutorial! I really appreciate you sharing this information :) such a great contribution! Thank you.

[@YaShortsBoi]

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?

[@AbhaySonak]

This was a very helpful video. Thank you so much.

[@ramonalisa4187]

Thank you sooo much. As always, your video was super helpful to me!

[@urduhadeesworld]

God Bless you brother. Very nice tutorial.

[@sannicsan]

Gracias Capo, un excelente tutorial.

[@nastja3294]

This helped me so much!!! Thank you 🙏🏼🤍

[@sunnyvelikova7193]

Thank you for your help! I used your affiliate link today :)))

[@sandrotomic9128]

Thanks mate. Helped me a lot

[@lequipedusalonvirtuelchass1212]

Amazing tutorial. Automatic follow. Cheers !

[@everydayovercomer]

I just used your affiliate link!!! Thanks for the tutorial!!!

[@rinodeboer]

Awesome! Thank you as well 👌🏼

[@vaibhavdwivedi]

That was a great tutorial, friend. Thank you!

[@sarafigueiredo3938]

Iam not a web designer and I built my website from scratch watching KZbin 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!

[@rinodeboer]

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!

[@sarafigueiredo3938]

@@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!

[@anddroidgland103]

Thanks bro... Your video helped me a lot 👌

[@pawbuddydog]

thank you so much bro you save my day.

[@ircu]

Excelente me ayudo el tutorial en unos cuantos minutos, gracias problema resuelto.

[@ymegananda]

thanks a lot for the video, have been looking for this effect. easy to follow. God bless you!

[@Dexquest3d]

Oh wow wow wow wow wow. I love this. Thank you so so much

[@lilreep]

Wow your tutorials are just amazing!

[@rinodeboer]

Thank you

[@samitbhattacharya1455]

You are my favourite. Thanks !! :)

[@ar_dani_]

Rino must be best KZbinr

[@vpd6771]

Excellent explainer video. Thanks

[@outlanderproduction90]

I can tell you that you are an excellent mentor. Thank you for this :D . I laughed too at 8:01 xD...

[@mohammadakram599]

Thank you very much, I was looking for exactly this

[@MayMay-gt6ld]

You are one of the best! Keep up the good work...Cheers!

[@SunilSindhey]

Thanks for this wonderful video

[@TamiePryor]

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?

[@mikecraft4506]

Seriously GOOD!

[@animedreamz2009]

In the css just find the rgb of the hex code. Use rbga(red, blue, green, alpha); Alpha is from 0 -1 so 0.8 is a good start.

[@KatLuzern]

Thank you so much for this video =) Really helpful

[@CavinAmble]

This is straight fire

[@sabrinaafrinsimi6964]

That was so helpful. thanks

[@bk18169]

thank you so much.. so helpful

[@thaiscamargo5468]

Wow! Awesome tutorial! Thanks for the help :)

[@Jnewton_br]

Thank you very much!