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

Hello. Thank you legend

Thank you very much!

When I try to add a template i get an error message that says "This content is not found on your page" im not sure how to proceed here…

Thanks for this wonderful video

How to make the secondary menu transparent ?

I'm trying to modify the color of my website's header menu text based on scroll behavior. Initially, the text is white, but when I scroll down, I want it to change to black to ensure better visibility and contrast. I've tried using CSS to accomplish this, assigning the 'header-menu' ID to the menu and the 'scrolling-menu' class to target the color change upon scrolling.

Despite attempting various CSS approaches, such as adjusting the text color based on the body's scroll state, the desired effect isn't working on my WordPress site built using Elementor Pro. I've added the provided CSS code to the theme's custom CSS section and the Elementor's CSS editor, but the text color remains unchanged upon scrolling.

I'm looking for a solution to dynamically change the header menu text color from white to black when scrolling down and back to white when scrolling back up. Can someone provide an effective CSS or solution specifically for WordPress/Elementor to achieve this color transition effect based on scroll behavior?"

Thank you!

Hi Rino! Would love to learn how to do this with containers. #NewContentIdeas

i try it like you show us with elementor pro, but a few issues came up that was not ocure in your video ……

One of the best tutorials on the internet. Thank you

great Sir thank you….
but its hide my submenu tell me the solution…???

Obrigado!

Thanks you so much

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.

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.

Great tutorial 🔥🔥 Thanks! 👍

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?

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

I have an issue where my containers and elements are not fully at the top of my page and there is an empty space there

Thanks so much.

So basically you have to create a new set of header per devise so that when it is on mobile view the desktop view will be hidden right? 🙂

You , Are, Genius !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

Hi Rino! Ik heb een mooie transparante header gemaakt, alleen krijg ik de drop-down niet transparant. Heb jij enig idee hoe ik dat voor elkaar krijg? Geen kleur invullen heeft geen zin, dan vult Elementor zelf de kleuren in. Ik heb ook de kleuren via site settings aangepast, maar ook dat helpt helaas niet.

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

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!

Maybe that is an idea for another video, because on YouTube there aren't videos about this topic: How do I change the colour or the font of the menu, without any extra PlugIns, that I have to pay for?

Is my video background not showing because I am using YouTube link?

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.

thank you so much.. so helpful

great

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

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

That was so helpful. thanks

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

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!

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

thanks شكرا спасибо gracias

thank you

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

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

Thank you

Thank you so much man

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.

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

Hi,
Thanks for this video now i am able to make beautiful transparent header. but I need one more thing that how can we apply this header in complete site means on every page of my site i want to show this header.
kindly guide me if u have any solution
Thanks

WHERE IS CSS ?

Hello everyone! How to make it to overlay the background? If I'm making a menu, it is above my header image with a white background. How can I make the elements to be on each other? If add it before or after it is before or after with a white background. I've seen several pre-made templates but I can't figure out ow to make the elements overlay each other.

Gracias Capo, un excelente tutorial.

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

This video solved my confusions. Thanks for it