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); }); }); });
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
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; }
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..... :/
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?
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.
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!
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!!!
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?
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!
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, 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?
What happened to your channel? It seems to be the same with most things elementor atm, there was a sudden spike in elementor articles, resources and tutes around 2019 and now the bandwagon has moved elsewhere and you hardly find anything useful about elementor. is it elementor or the trend obsessed web designer? I am sure you have reasons, like life getting in the way.
This is not a good way to do a menu in Elementor as you use a popup. That is not added to website DOM and that mean it will not be indexed by Google as nav links.
User experience and site hierarchy is important as SEO, if not more. So this might true from an SEO perspective (although it’s one small part of it) but not every website optimizes for google, and even than - google is smarter than you think 😉
תודה על הסרטון מורדי, החלק הכי חשוב בעיניי לא מופיע :) מה קורה כשלוחצים על לינק בתפריט ורוצים להגיע לנקודה מסויימת באותו הדף (עוגן). הפופ אפ צריך להיסגר והדף צריך להיגלל לאותה נקודה. איך עושים את זה?
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
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
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
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?
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!
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?
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.
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!
