For anyone suffering the problem of not closing the pop for a one page nav-menu - use this code (from Daniel1) : document.addEventListener('DOMContentLoaded', function() { jQuery(function($){ $(document).on('click','.elementor-location-popup a', function(event){ elementorProFrontend.modules.popup.closePopup( {}, event); }); }); });
BROOOOOOOO!!!!! This page is sooooo underated!!! There are things that took me a year to figure out that you've just shown in 40 min of videos..... THANK YOU, THANK YOU, THANK YOU!!!
Thank you for much for making this tutorial, I was having so much trouble trying to find a way to make something like this and now this is going onto my portfolio site! Thank you again!
Hello again :) I was wondering, is there a way to ensure the logo of a site (which would be placed the header triggering the popup) could be at the front of the popup at all times ? I tried applying a greater Z index value, but it seems that the elementor popup defaults to be above everything else... Any ideas? Thanks again! Oh.. :) and do you suggest we apply a nav HTML tag to the popup? Thx
Hey, You can copy-paste the section from the header into the popup - so you have the exact same settings on both and it will look like one. Try it out 😅🤷🏻♂️
Hey man! Great video, just wondering if there's anyway to do this kinda thing with dropdown menus? Where u press "works" for example and then some other titles drops down? idk if that's makes sense
Looks great, i feel like this type of menu really benefits from Ajax loading which unfortunately Elementor is incapable of, so you'll get a flash of white screen when clicking one of these links right? Also what about mobile? Do you make a second hidden hamburger menu?
Amazing! exactly what i was looking for! The only problem is that I fully set the section high in mobile, but it doesn't work (on mobile, in desktop looks ok). Can you help me with that?
Hi mate...Do you have a video for the 'Collage Zoom out' effect...i'm imagining there's some code to add into it. If not...Are you planning on doing a video on the effect?
Hi, amazing video thx a lot ! However, i did a menu like that for my client but the popup don't close when i click on a label (example on contact). How do you guy make to close the popup when you click on one of the menu label plz ? Thx for your answer
Congrats on this great tutorial man! The only problem I see in this approach is when it comes to changes adding more items/pages you will always have do it all manually , because it´s not dynamic according to WP menu. Anyway its great for small menus!
Great tutorial, i keep getting jQuery errors on close though. It's something to do with the entrance/exit animations. EDIT: It's responsive errors, if you add animation on mobile/tablet but differently on desktop.
Hey, any idea why this code would not work?? I did all as you demonstrated but when I turn down the opacity to get the stroke the whole text disappears..... :/
Hello Thank you so much for doing this tutorial im a new fun of your channel i really appreciate this tutorial , pleas im full beginner and i need the JSON FILE for this can you provide it again this link is not working anymore Many thanks
THANK YOU. I was looking for this since last one week and finally you show up. Thanks. I applied this to a single-page website that has anchor menus dropped. Now problem is if I go in button and put #anchor in the link, the popup does not close automatically. Is there any other way to do this?
sir your design is awesome but i have a problem, i have a onepager with ancor tags . but manu doesnt closes after i click on the ancor links can you please help ?
But i find a solution, put a "html code" inside the pop-up and add this code document.addEventListener('DOMContentLoaded', function() { jQuery(function($){ $(document).on('click','.elementor-location-popup a', function(event){ elementorProFrontend.modules.popup.closePopup( {}, event); }); }); }); this will make the pop-up close with animation! :D
How does this work if someone has a pop-up blocker? Will it still function. I’m thinking of implementing this because the hamburger isn’t working properly on old versions of iOS. Thanks!
Nice effect, but semantically not correct because buttons are not navigation elements . You could add a navbar widget though and style the .menu-item the same way.
Thanks for the tip frank! This is more of a design experiment so I try not let “real-life” problems get in the way of trying out and testing new ideas 😁 But that’s a great tip for anyone who would want to use this on a real live website. Very appreciated!
I was actually looking for something like this, but a solution that doesn't use Elementor's Popup functions. The reason being that I've been using this exact process to create fullscreen menus, then I noticed that the menu (popup) didn't open on a browser that had a Popup Blocker installed. Any advice?
Hi, I'm having trouble getting it to work. The code is working on h2 headlines but not in a button. Is there any chance that it is a different html tag for a button than h2?
just a note, the code below you do not need to qualify h2 if your button text is not added as h2. For example the following code for me works: .stroke { -webkit-text-stroke: 2px #fff; }
There’s a solution here in the comments, but anyway - a fullscreen menu on a one pager (anchors) is not a good user experience. You’re better off using a regular menu or another solution.
Thank you 🙏🏼 the COVID situation effected my business like everyone else, so right now I’m focused on work. Hope I have some time soon to create more content.
תודה על הסרטון מורדי, החלק הכי חשוב בעיניי לא מופיע :) מה קורה כשלוחצים על לינק בתפריט ורוצים להגיע לנקודה מסויימת באותו הדף (עוגן). הפופ אפ צריך להיסגר והדף צריך להיגלל לאותה נקודה. איך עושים את זה?
For anyone suffering the problem of not closing the pop for a one page nav-menu - use this code (from Daniel1) :
document.addEventListener('DOMContentLoaded', function() {
jQuery(function($){
$(document).on('click','.elementor-location-popup a', function(event){
elementorProFrontend.modules.popup.closePopup( {}, event);
});
});
});
Thank you 😊
Para los que no sepan esto va dentro de un HTML con elementor en el POPup . Me costo entenderlo pero se logro! Gracias Excelente
BROOOOOOOO!!!!! This page is sooooo underated!!!
There are things that took me a year to figure out that you've just shown in 40 min of videos..... THANK YOU, THANK YOU, THANK YOU!!!
Thank you, this means a lot! ❤️
Very good work Mordi, thank you so much for this!!
Nicely done.. Out of the box idea
to the point tutorial, so refreshing to see mate, thanks so much for taking the time to do it
awesome video, good vibes man. keep killing it
Heeeeeey! Dude! This is the best tutorial advanced video I have seen so far. Keep teaching us pls! U are the best!
Genial tutorial !! Super bien amigo gracias.. Saludos desde Ecuador
Very Cool sir! Now Following
I see why you got inspired by it - amazing website 😮 as always, awesome tutorial ❤️
Thank you so much! Appreciate the tutorials. Subbed :)
Thank you for much for making this tutorial, I was having so much trouble trying to find a way to make something like this and now this is going onto my portfolio site! Thank you again!
Great tutorial, finally can do fullscreen menus, many thanks!
Great video. Super clean! Thanks a lot!!
Hello again :) I was wondering, is there a way to ensure the logo of a site (which would be placed the header triggering the popup) could be at the front of the popup at all times ?
I tried applying a greater Z index value, but it seems that the elementor popup defaults to be above everything else... Any ideas? Thanks again!
Oh.. :) and do you suggest we apply a nav HTML tag to the popup? Thx
Hey,
You can copy-paste the section from the header into the popup - so you have the exact same settings on both and it will look like one. Try it out 😅🤷🏻♂️
@@eifeed thanks a lot for the suggestion. Didn't cross my mind 👍 all the best
you just saved my life, THANK YOU VERY VERY VERY MUCH!!!!!!!!!
It's amazing Sir. Really very easy and simple tutorial, all clearly explained
Excellent tutorial.
just awesome.
So easy, thank you a lot!!
You are awesome!! I can only give this thumbs up once unfortunately, I'd give more if I could
thank you so much. this learning was so helpfull
I love this channel! So much value, thanks alot
Thank you 🙏🏼
Really nice design! Keep going!
Gem for Elementor ❤️ thanks for your awesome channel keep pushing such awesome content
Great!! Thanks man ⚡
Amazing. Thanks a ton.
thank you for this video! Subscribed!
Great video man! Hope the algorithm helps your channel grow fast
Awesome Thank you
Thanks bro... Fantastic idea to use buttons instead of text or heading! 🖥❤️
really hope you'll get back to youtube soon, I love your approach.
The best. Nice lesson, thank you!
Thanks sir! Your videos are amazing!
That is a great menu effect! Thank you 🙏
Thank you for sharing this.😍
Happy it’s useful 😁🙏🏼
I'm new here and just started using elementary. This is a great tutorial! I'm learning new things :)
Happy to hear that 😁
Love your tutorial Mordi 😁👍
Thank you! 🙏🏼❤️
Man ... That's awesome 🌟🌟
Loving it!
Very good - thank you
Excellent, thank you man!
Super Thank You Man !!!!!!!!
Hey man! Great video, just wondering if there's anyway to do this kinda thing with dropdown menus? Where u press "works" for example and then some other titles drops down? idk if that's makes sense
TOP, SENSASIONAL , Muito obrigada!
Beatiful! Is this possible if your menu has sub and sub sub menu items?
Thank you !
Awesome !!! it's very useful, hope you will have new tutorial soon,LOVE your design, thank you❤️
Thank you 🙏🏼😊
ur pushing awesome content thanks alott
Hey, really great tutorial man cheers!
Hi, thank you so much! this is GREAT!
But i have a question: how do i move the closing button to the right side of the screen?
Popup settings, style, you can control the location of the toggle button
thank you so much
very good job thank you ! but any idea for do it this for responsive design ? :/
Thank you 🙏🏼 it is responsive, just need to scale down the text a bit for mobile
great stuff!!
Looks great, i feel like this type of menu really benefits from Ajax loading which unfortunately Elementor is incapable of, so you'll get a flash of white screen when clicking one of these links right? Also what about mobile? Do you make a second hidden hamburger menu?
Hi!
I created a menu using this tecnique but, sometimes, after clicking the menu icon the popup opens totally blank...any help?
Amazing! exactly what i was looking for! The only problem is that I fully set the section high in mobile, but it doesn't work (on mobile, in desktop looks ok). Can you help me with that?
thanks dude
Hi mate...Do you have a video for the 'Collage Zoom out' effect...i'm imagining there's some code to add into it. If not...Are you planning on doing a video on the effect?
It’s in the works, hope to start releasing videos soon 🙏🏼
Hi, amazing video thx a lot ! However, i did a menu like that for my client but the popup don't close when i click on a label (example on contact). How do you guy make to close the popup when you click on one of the menu label plz ? Thx for your answer
Nice video,
Please can you make a video on the cursor tracker and setting its hover animation using dynamic content for elementor.
You are amazing my friend!!!
😊❤️
Thx great content
Love this, awesome tutorial :D Can you make a video on how to make the circular cursor as in the rocknroll website, Thanks :D
Thanks for the tutorial, great! I would also like to know how to customize the cursor that way
Congrats on this great tutorial man!
The only problem I see in this approach is when it comes to changes adding more items/pages you will always have do it all manually , because it´s not dynamic according to WP menu. Anyway its great for small menus!
Thank you Alex. Yes, that’s something to take in mind if it’s a big, dynamite site
Thank you
how did you create the special close buttom in the first few seconds of the video?
G'day mate! ...I hope you and your fam are doing well, I also hope you got a shitload more vids to upload ... you done well with these mate
Thank you, working on new stuff right this second 😃
This is f*cking awesome man!! I'll have a beer tonight on your name, cheers!
It’s an honor! Thank you 😊
Great tutorial, i keep getting jQuery errors on close though. It's something to do with the entrance/exit animations.
EDIT: It's responsive errors, if you add animation on mobile/tablet but differently on desktop.
Thanks for the feedback
I dont have to option to delay the Fade in? The option button is not visibly for me
Hey friend when are u going to upload a new video? We love your tutorials
Hopefully very soon 🙏🏼
What's the theme called? You've used that header from the theme right? btw nice tut :)
The only theme I use is “hello”, everything is created with elementor pro 😁
Hey, any idea why this code would not work?? I did all as you demonstrated but when I turn down the opacity to get the stroke the whole text disappears..... :/
BEST
Amazing work. Can I link the menu items (Works/About) to separate pages - currently it is linked to Popup
Hi Helena, of course I just linked them to show the exit effect. They are buttons so they each have a link setting.
@@eifeed Thanks - when I made the links the menu items disappeared - only showing on hover.
@@HelenaLooby Got the same problem
Hey man it has been a while since your last update and we are waiting for more tutorials 😉
Hello Thank you so much for doing this tutorial im a new fun of your channel i really appreciate this tutorial , pleas im full beginner and i need the JSON FILE for this can you provide it again this link is not working anymore Many thanks
THANK YOU. I was looking for this since last one week and finally you show up. Thanks. I applied this to a single-page website that has anchor menus dropped. Now problem is if I go in button and put #anchor in the link, the popup does not close automatically. Is there any other way to do this?
Yes the solution is down in the comments 😊⬇️
Can I do it in a free version of elementor? Btw great videos, keep up the good work
No you need the popup module to make this work. And thank you 😊
The CSS stroke did not work for me on Elementor Pro 3.0.
Hello, thanks for the tutorial, I see that it does not work in mobile version, is there a solution?
sir your design is awesome but i have a problem, i have a onepager with ancor tags . but manu doesnt closes after i click on the ancor links can you please help ?
same here
But i find a solution, put a "html code" inside the pop-up and add this code
document.addEventListener('DOMContentLoaded', function() {
jQuery(function($){
$(document).on('click','.elementor-location-popup a', function(event){
elementorProFrontend.modules.popup.closePopup( {}, event);
});
});
});
this will make the pop-up close with animation! :D
@@Daniel-pt6xu You're the man! I will share your code above too for anyone having the same issue!
@@XShollaj haha no problem my friend! 👊
Thanks Daniel 🙏🏼❤️
Is that website (skyline films a WordPress theme???
No, custom built 😅 but still, a wonderful source for inspiration.
How does this work if someone has a pop-up blocker? Will it still function. I’m thinking of implementing this because the hamburger isn’t working properly on old versions of iOS. Thanks!
Elementor popups are not supposed to be blocked as far as I know
Nice effect, but semantically not correct because buttons are not navigation elements .
You could add a navbar widget though and style the .menu-item the same way.
Thanks for the tip frank! This is more of a design experiment so I try not let “real-life” problems get in the way of trying out and testing new ideas 😁
But that’s a great tip for anyone who would want to use this on a real live website. Very appreciated!
I was actually looking for something like this, but a solution that doesn't use Elementor's Popup functions. The reason being that I've been using this exact process to create fullscreen menus, then I noticed that the menu (popup) didn't open on a browser that had a Popup Blocker installed. Any advice?
Usually elementor popups are not blocked so this is strange. I’m sure there’s a way with css but I focus on elementor only solutions
The text stroke css is not working, I dont have any stroke
Hi, I'm having trouble getting it to work. The code is working on h2 headlines but not in a button. Is there any chance that it is a different html tag for a button than h2?
You can change the h2 to anything, there are some examples in the comments.
just a note, the code below you do not need to qualify h2 if your button text is not added as h2. For example the following code for me works: .stroke { -webkit-text-stroke: 2px #fff; }
Great, but how does the menu popup close automatically when you click a menu button?
There’s a solution here in the comments, but anyway - a fullscreen menu on a one pager (anchors) is not a good user experience. You’re better off using a regular menu or another solution.
Please try to make more awesome videos!!! It's been 9 months already :D LOVE YOUR WORK!
Hi, I really liked your videos and I was wondering why you aren't uploading any more.... Please upload new elementor tutorials like this.
Thank you 🙏🏼 the COVID situation effected my business like everyone else, so right now I’m focused on work. Hope I have some time soon to create more content.
Noiiiiiice
Need this exact effect - but in Divi - and cant find it anywhere!
More reason to use Elementor 😉
Great video just edit out h2 written after stroke
Thank you 😊
when i add the link to the button the stroke changes to black I need help to fix that
You probably have to change the link style in global settings
Was this PRO Elementor used?
Yes, for the popups you need pro
You changed trivial navbar into dope
תודה על הסרטון מורדי, החלק הכי חשוב בעיניי לא מופיע :) מה קורה כשלוחצים על לינק בתפריט ורוצים להגיע לנקודה מסויימת באותו הדף (עוגן). הפופ אפ צריך להיסגר והדף צריך להיגלל לאותה נקודה. איך עושים את זה?
יש פתרון לזה כאן בתגובות אם אני לא טועה, בכל מקרה לא מומלץ לשים תפריט מסך מלא עם עוגנים באותו העמוד - חווית משתמש לא טובה בכלל 😅
Wow