Once again you've saved my life! I've been doing this the hard way all along. Not only the transparent menu BUT that trick with the overlay blend is what I needed in my life! Thank you!
👏🙌 I didn't even watch the video. I followed along with the written tutorial. Love how you format the written tutorials. In my opinion, they are easier to follow than ET's written tutorials 😉
In your video, you talk about adding an overlay to the image to make the transparent menu stand out a little more, and that works fine but if instead of an image I use a 7 seconds video the overlay doesn't show, that's all. Thank you again. You are a patient man.
Hi Pilo, okay I'm not sure but you can use CSS to make a simple overlay and put it in the section "after" CSS area. content:""; display: block; height: 100%; position: absolute; top: 0; left: 0; width: 100%; background-color: rgba(0,0,0,0.6);
@@PeeAyeCreative Thank You once again, Nelson! , that is exactly what I needed . Your CSS tips are jewels hard to find on youtube and in your channel are plenty of them. Thanks.
Thank you! I always wondered why I couldnt do it. In the older version as you said, I just made the background transparent, but i keep getting that white section :D
Thanks. But if you. have a menu with a second, sticky alternative state, this does not work as you must have it on relative in that case. Any idea how to fix that issue?
Thanks for the video! How do I fix the mobile and tablet version? My background images disappear and essentially on mobile all I see is the bottom footer! Thanks
Hi... I always love your works... I have a question... How to make the header blurry transparent while scrolling? It should be transparent on top and only while scrolling it should be blurry transparent.. Would be great to see this tutorial.. Thank you
Hi there. Firstly thank you so much for your amazing videos they are priceless. Question: So i have 2 global headers that get used on different pages, Iam also using the code you provided in another video to push content down so that they dont overlap with the header. YAY. But now the problem is that the one global header needs to be transparent so that it can been seen over my background picture.... any help here for me please.
@@PeeAyeCreative Thank you Nelson for answering my question, I’ll try to explain it better. I was trying to darken the screen to be able to see the transparent menu better as you show in the video, the background is a fullwidth video and it didn’t work so tried with an image and it worked fine. All this is in the theme builder so instead of a regular section I tried a fullwidth header section and works fine but I would rather use a regular section. I also tried loading the page in the browser to do it with the visual builder but it loads the theme builder. Thank you Nelson I hope I explained it better. I don’t know what I would do without your tuts.
I'm still not sure what you mean. You mentioned overlay but also background. So I'm not sure what you are trying to describe. Also don't use anything "fullwidth" as those are depreciated.
Question, when appliening its grabbing a portion of my header underneath, do you know how i get the space beneath look normal and not like it took a part of my slider?
It’s solved. What I meant was that the menu was overlapping my page, but I followed your other tutorial to apply a jquery script to push the page content down properly!
@@PeeAyeCreative when changed it from relative to absolute. It doesn't show immediately but when i go to the preview of my site the entire header is transparent. thanks for replying.
@@PeeAyeCreative I know. It's got me stumped and I'm a semi-retired web developer! Everything I saw in your tutorial, up until changing the header section position to Absolute, matched what I'd done following along. That included seeing the header in "white" above my hero section. When I went into Theme Builder and set the header section position to Absolute, the header became transparent but everything else moved up, as you would expect when moving an element out of the document flow by using Absolute positioning. I saw another tutorial by MAK with Elegant Themes where he did kind of the same thing as you. He also set positioning to Absolute, and it didn't appear his content was impacted either. It's a brand new page, so I doubt there are any correlated issues causing this to happen. Very puzzling.
@@PeeAyeCreative I mean that when you use theme builder to make your own menu in Divi - you have to make also your own version of mobile menu. You can not just use this on desktop and have a default Divi version of menu on mobile, can you? And this is the biggest minus of Divi for me. And making a mobile menu is not as easy as this kind of menu like you have on the movie... It needs more movies ;)
So easy yet I have been struggling to figure this out for so long! THANK YOU SO MUCH!
Once again you've saved my life! I've been doing this the hard way all along. Not only the transparent menu BUT that trick with the overlay blend is what I needed in my life! Thank you!
You're welcome!
👏🙌
I didn't even watch the video. I followed along with the written tutorial. Love how you format the written tutorials.
In my opinion, they are easier to follow than ET's written tutorials 😉
Thank you, I'm glad you like the style! 🙂
Thank you so much! Who would ever think to try Absolute position for it to work.
Happy to help! Yes sometimes it is something so simple.
Wonderful Video For Divi Transparent Header. Thanks
@Pee-Aye Creative
You're most welcome!
In your video, you talk about adding an overlay to the image to make the transparent menu stand out a little more, and that works fine but if instead of an image I use a 7 seconds video the overlay doesn't show, that's all. Thank you again. You are a patient man.
Hi Pilo, okay I'm not sure but you can use CSS to make a simple overlay and put it in the section "after" CSS area.
content:"";
display: block;
height: 100%;
position: absolute;
top: 0;
left: 0;
width: 100%;
background-color: rgba(0,0,0,0.6);
@@PeeAyeCreative Thank You once again, Nelson! , that is exactly what I needed . Your CSS tips are jewels hard to find on youtube and in your channel are plenty of them. Thanks.
Awesome man. Long time follower. Thank you for taking the time to make this
My pleasure!
Great Guy, good and quick explanation. Greating from Hamburg/Germany
Glad you enjoyed it! Nice to hear from you!
this guy solved my any problems.
I'm always so happy to hear that! 🙂
Awesome man! Fast and easy, I love your channel.
Thank you so much.
Greetings from Bogotá, Colombia.
Thanks for watching! I am happy you enjoy my videos!
I love your straight to the point approach.
Very nice tutorial videos on your channel.
Thank you, I am so happy to hear this!
That was one practical hack. You are an HOUR saver dude! :D
So glad it helped, I like that..."The Hour Saver" 😉
@@PeeAyeCreative It actually saved a day not just an hour, but Hour Saver sounded better 🤪
Thanks for ur all videos sir
You're welcome!
Your videos are always very useful! Thank you
you are AMAZING, and really like how you illustrate things, a real teacher, sumps up and keep it going (Y)
Hey thank, glad you like my style! 😁
Perfect, exactly what I needed to fix my issue. Thanks!
Wonderful!
Just what I needed, thanks!
Glad to hear it!
You're amazing. THANK YOU!!!
You're so welcome!
Thank you so much. This is really great info
Glad it was helpful!
You indeed know what people have problem with. Awesome tutorial!
Thanks, I try to keep up with common questions in the Facebook groups!
Great video, thanks for the help!
Glad it helped!
Thank you! I always wondered why I couldnt do it. In the older version as you said, I just made the background transparent, but i keep getting that white section :D
Yup, in a way this makes more sense anyhow, but just not as instant and quick.
Thank you for the tutorial Nelson
Sure, you are welcome!
Thank You Very Very Very Very Very Very Very Very Much ......
You are very, very, very, very, very, very, very, very, very, very welcome! ;)
Hey I just found you...great great great tutorials. Subscribed
I'm glad you found my channel, I hope you enjoy everything we have here!
Straight to the point! awesome!
You're welcome, Ivan! Glad you like it!
Thank you, you most be viral
You're welcome!
Thank you mate, you saved my Saturday morning!
That's so good to hear, Enzo! 😎
Thanks. But if you. have a menu with a second, sticky alternative state, this does not work as you must have it on relative in that case. Any idea how to fix that issue?
looking for this answer as well
me too
@@chiaralombardo8380
Thanks for the video! How do I fix the mobile and tablet version? My background images disappear and essentially on mobile all I see is the bottom footer! Thanks
Thank you so much bro 🙏
Always welcome
Thanks that was exactly what I was looking for
That's great Keith! Happy to help!
Thanks a lot!
You're welcome!
super easy to follow, thanks!!! life saver
You're welcome, it's great to hear that this helped so much!
Thankyou for this 🙌
You're welcome 😊
Hi... I always love your works... I have a question... How to make the header blurry transparent while scrolling? It should be transparent on top and only while scrolling it should be blurry transparent.. Would be great to see this tutorial.. Thank you
I'm not sure what you mean exactly.
Thank you. The exact problem I had and I am gone mad! 3:25
Glad to help!
thank you, very cool. but on a one-page it would be great if the menu always stays visible at the top and doesn't scroll up. is that also possible?
You can use the scroll settings in Divi to make any section, row, or module sticky.
Thanks Nelson!
You're welcome, Ryan!
Hi, please , is it possible to have not only 1 photo, by presentation of lets say 5 photos on whole backgroound screen?
Very helpful video.
Thank you for sharing that, glad it is helpful!
Thank You
You're welcome
is there a way to have a background color when scrolling down?
It works thanks!!!🎉
You're welcome!
Great Dear
Thank you
Is there a way to do the same with the footer?
Thank you!!!!!!
You're welcome!
thank u!
You're welcome!
Thank You :-)
You're welcome!
Hi there. Firstly thank you so much for your amazing videos they are priceless.
Question:
So i have 2 global headers that get used on different pages, Iam also using the code you provided in another video to push content down so that they dont overlap with the header. YAY. But now the problem is that the one global header needs to be transparent so that it can been seen over my background picture....
any help here for me please.
You would need to target a specific header section with the code.
Thank Nelson! great tut as always. I wonder why the overlay works on an image but not on a video; do you have any tips for that?
Hi Pilo, I'm not sure what you mean. What overlay isn't working?
@@PeeAyeCreative Thank you Nelson for answering my question, I’ll try to explain it better. I was trying to darken the screen to be able to see the transparent menu better as you show in the video, the background is a fullwidth video and it didn’t work so tried with an image and it worked fine. All this is in the theme builder so instead of a regular section I tried a fullwidth header section and works fine but I would rather use a regular section.
I also tried loading the page in the browser to do it with the visual builder but it loads the theme builder. Thank you Nelson I hope I explained it better. I don’t know what I would do without your tuts.
I'm still not sure what you mean. You mentioned overlay but also background. So I'm not sure what you are trying to describe. Also don't use anything "fullwidth" as those are depreciated.
Great tutorial, but the issue now is to keep sticky the header while scrolling. Is there any trick ?
Divi has settings for that now
Question, when appliening its grabbing a portion of my header underneath, do you know how i get the space beneath look normal and not like it took a part of my slider?
I'm not sure what you mean. Can you show me?
It’s solved. What I meant was that the menu was overlapping my page, but I followed your other tutorial to apply a jquery script to push the page content down properly!
I love you Jajaja Thanks Man, you got your like and subscribe
Glad to have you, hope you enjoy all the videos!
when i do it, even the text becomes transparent?
When you do what exactly?
@@PeeAyeCreative when changed it from relative to absolute. It doesn't show immediately but when i go to the preview of my site the entire header is transparent. thanks for replying.
Great tutorial in many ways. However when I change the position to absolute, all my text elements in my hero section shoot up to the top of the page.
Thanks Michael. That's very strange, how you described that does not sound normal at all.
@@PeeAyeCreative I know. It's got me stumped and I'm a semi-retired web developer! Everything I saw in your tutorial, up until changing the header section position to Absolute, matched what I'd done following along. That included seeing the header in "white" above my hero section. When I went into Theme Builder and set the header section position to Absolute, the header became transparent but everything else moved up, as you would expect when moving an element out of the document flow by using Absolute positioning.
I saw another tutorial by MAK with Elegant Themes where he did kind of the same thing as you. He also set positioning to Absolute, and it didn't appear his content was impacted either. It's a brand new page, so I doubt there are any correlated issues causing this to happen. Very puzzling.
@@mnburch +1. It messes everything up so it is hard to edit afterward.
perfect . . .
Thank you!
Well, I wonder how does the menu looks on mobile... :)
Not sure what you mean
@@PeeAyeCreative I mean that when you use theme builder to make your own menu in Divi - you have to make also your own version of mobile menu. You can not just use this on desktop and have a default Divi version of menu on mobile, can you? And this is the biggest minus of Divi for me. And making a mobile menu is not as easy as this kind of menu like you have on the movie... It needs more movies ;)
Thanks for the video. However, this is not the best solution. What was Divi thinking ?! Is there no elegant solution?
This is the best solution.