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.
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!!!
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.
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.
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!!
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!
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!
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!
2 ปีที่แล้ว
I am very grateful for this video, now my menu looks fabulous. Very well explained, you are fantastic. Thank You!
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".
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?
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.
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 !
Iam not a web designer and I built my website from scratch watching TH-cam 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!
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👍
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
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!
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?
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
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! 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?
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!
Great tutorial, I'm new to Elementor Pro and recreated it directly. However, in the mobile view, in the header, I have a white background at the beginning and this cannot be removed. When scrolling down, the header is then as it should be.
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
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, 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!
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 :(
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!
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
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?
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
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!!
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?
If you have a height problem, go to padding and change it to 0. Even though it's empty it's applying hidden padding ... Just ridiculous and annoying. If you have padding in your CMS at least show what's currently applied instead of blank goddamn ... Just wasting my time for no reason.
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
Great tutorials!! An idea about some new ELEMENTOR video ( and because I keep struggling with it:) for beginners: it is the RESPONSIVENESS (mostly of headers, logos etc) into mobile.. what is the best approach using PX/%/VH/VW - when to use this modes. And what about landscape version of the mobile view?
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... :-(
@Alisdair Manser Hey I tried this but still it's not showing correct alignment, what am I missing. And after all done, on mobile hamburger shows the correct left side but not in tablet view. It comes a long way from the left. Anyone can help me with this, it's much appreciated. Thanks in advance.
![[FREE] How to Create Transparent Sticky Header in WordPress with Elementor](http://i.ytimg.com/vi/ccYnXY2_Kvc/mqdefault.jpg)
![ILLSLICK - KILLSHOT REMIX [FULL VERSION]](http://i.ytimg.com/vi/RIK8RrqIAzE/mqdefault.jpg)
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!
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!
Till the 4:00 min was enough to me undestand what i need to do here. Transparent menu!! Thank you!!
would love to see that the background color changes when you scroll down
yes please
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.
Glad I found this channel. Just bought Elementor Pro for my Cybersecurity/IT Journey.
Have been searching for this solution for half day. Thank you!!
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.
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!
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!
Just purchased Elementor Pro, feeling very glad now as I watched this helpful video, thanks!
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!
I searched for ages to find out how to do this, so thanks very much.
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.
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!
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.
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!
I am very grateful for this video, now my menu looks fabulous. Very well explained, you are fantastic. Thank You!
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".
One of the best (maybe the best) tutorial I've seen.
Well done!
Nice one rino. We always wait for your video.
Legend! Spent an hour looking for how to remove the white bar!
the bottom -90 margin thing was what i was looking for ! TY so much !
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?
Thanks a whole lot, you're helping me solve a huge web project with my company
Heel erg bedankt Rino, het ziet er altijd zo makkelijk uit wanneer jij het doet 😉
Hahah!
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.
I am newbie, this tutorial is so much easy to understand for me.
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 !
this is amazing now i know how to create transparent header menu in WordPress using elementor
Iam not a web designer and I built my website from scratch watching TH-cam 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!
You are damn good man. So easy, crisp. No time waste. You nailed it man. Thank you soo much brother. keep it up
Rino, as always you're the best! Keep these videos coming. Thank you.
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👍
Been your subscriber for long. Learnt alot from your videos. thanks
this video you've got 2.36k subs but now, just wow.. congrats Rino
Wow! I didn’t realise that. Thank you 🙏🏻
Your video deserve a Million Subscribe.
This video solved my confusions. Thanks for it
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
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
Subscribed, liked and downloaded Elementor Pro via your link. Really appreicate the clean delivery of information!
Thank you so much 🙏🏻
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 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?
Thank you for the amazing content. Hope your channel grows bigger.
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.
Nice, will use that on our site. Simply clever setup!
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
Rino, you are wonderful. Thank you for this nice tutorial. It helps me to improve my knowledge and my homepage.
You make a good stuff, took a lot for my websites. Thank you man!
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
Thanks a lot for this video. It's explained incredibly simple way and without unnecessary details.
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, 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!
Thank u so much for this tutorial. It really helped me🥺
Easy to understand and very helpful. Thank you
Thank you from Brazil. You helped me a lot. ✌️
Great tutorial, I'm new to Elementor Pro and recreated it directly.
However, in the mobile view, in the header, I have a white background at the beginning and this cannot be removed. When scrolling down, the header is then as it should be.
Me too
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
You're a legend thanks for making this video
Thanks for guiding us this video is very helpful for me
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, 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!!
Very good tutorial Very helpful Thank you.
Vous utilisez quel modèle de page ? Par défaut ou elementor Canevas ?
Clean smooth video. Thank you bro. Really helpful. Calmness 100
Easiest way by far that I have found to get what you want.
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 :(
Rino must be best TH-camr
Amazing tutorial. Automatic follow. Cheers !
hEY BUDY, ITS AMAZING! GREAT WORK! HI FROM BRAZIL
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
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!
That was a great tutorial, friend. Thank you!
God Bless you brother. Very nice tutorial.
I just used your affiliate link!!! Thanks for the tutorial!!!
Awesome! Thank you as well 👌🏼
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
Great video. In there a way to show the menu as transparet on some pages and not transparent on others?
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!
Which themes do you suggest to use with elementor without facing any problem like header, footer etc?
This helped me so much!!! Thank you 🙏🏼🤍
You the man! Haha, I bought your course, really busy at the moment, but looking forward to getting started soon!
You are amazing!
Thank you so much for your videos, they help me to progress with my website building.
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
Thanks for this tutorial!
By the way, how did you do to put your logo under the WordPress dashboard section?
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!!
Great Video! love it
How did you change the underline color when hover on menu navigation items. Please do let me know
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?
Thanks for the tutorial. However, when I do minimum height 90 my box is way taller than 90 pixels. Do you know this is?
did you find a fix for this by any chance?
If you have a height problem, go to padding and change it to 0. Even though it's empty it's applying hidden padding ... Just ridiculous and annoying. If you have padding in your CMS at least show what's currently applied instead of blank goddamn ... Just wasting my time for no reason.
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
Great tutorials!! An idea about some new ELEMENTOR video ( and because I keep struggling with it:) for beginners: it is the RESPONSIVENESS (mostly of headers, logos etc) into mobile.. what is the best approach using PX/%/VH/VW - when to use this modes. And what about landscape version of the mobile view?
Thank you very much! This tutorial was very great and saved me a lot of time!
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... :-(
Amazing video. I learned a lot from it. Thank you.
Hey, loved the tutorial, thank you. just one question, at 14:05 your menu and button were no longer aligned, how did you fix this?
@Alisdair Manser Hey I tried this but still it's not showing correct alignment, what am I missing. And after all done, on mobile hamburger shows the correct left side but not in tablet view. It comes a long way from the left. Anyone can help me with this, it's much appreciated. Thanks in advance.
Wow your tutorials are just amazing!
Thank you
That's great sir i have learned many things from you in this one small video and also subscribed your channel🎉🎉❤
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.
Trankil you for your advice. You add joy on my day 🙂