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

→ Starter Guides for Beginners

→ Full A-Z Courses

→ Social media

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.

[jennyfuchs]

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

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

[andromeda]

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

[theenchanted]

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

[robindegroot]

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

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

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

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

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

[twbashar]

Nice one rino. We always wait for your video.

[kevinveg]

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

[shiranjude]

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

[marekgabik]

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.

[charley]

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

[bamideleoyekanmi]

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

[brandon]

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

[robsonvieira]

One of the best tutorials on the internet. Thank you

[Dr.JayPrasad]

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

[ambrishsudhanandan]

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

[brianbh]

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