How to Close Pop-Ups after Clicking a Link for Same Page Menu Anchors - Elementor Wordpress Tutorial
ฝัง
- เผยแพร่เมื่อ 2 ก.พ. 2023
- Elementor Off-Canvas Pop-Ups are great - even when you have a Single Page Site with Menu Anchors for jumping to alternate sections/containers.
A big problem is how the Pop-Up doesn't close if it's a same page link. So you have to click to close it. Not good :(
I'll show you how to close that Pop-up when you click the link.
Book your 1-2-1 Consultation: websquadron.co.uk/socials
Link to the HTML code: element.how/elementor-close-p...
How to Close Pop-Ups after Clicking a Link for Same Page Menu Anchors - Elementor Wordpress Tutorial
We love to create - share - respond - and deliver.
🧐 Learn with our Mastery Modules: websquadron.co.uk/web-design-...
🔗 All of our Important Links: websquadron.co.uk/socials/
😃 Join our Facebook Group: / 3309523509284305
😃 Get Code Snippets Pro: r.freemius.com/10565/3304295/
😃 Get Elementor Pro: be.elementor.com/visit/?bta=2...
😃 Boost your TH-cam Analysis: www.tubebuddy.com/websquadron
👕 Get our Merchandise: websquadron.co.uk/merchandise
🥹 Support us: paypal.me/Websquadron
Hire us to work on your Website!
💌 info@websquadron.co.uk
👩💻 Visit websquadron.co.uk - แนวปฏิบัติและการใช้ชีวิต
I LOVE YOU!!! been struggling for hours with this, and the forums don't have anything, but your channel does!!!
Man! U are the best thing ever happened to people like me who struggle with this kind of problems. I even feel ridiculous just writing it in the search bar sometime stuff like this, thinking there is no way there is a tutorial for it, and there always you with the solution. Bless you man, you are increnible!
holy shit bro u save me, thanks! hugs from Brazil
Super!!! I struggled with a pop-up menu on mobile. After selecting a link towards a menu anker and closing the pop-up the page went straight back to the top. Now the menu closes and you stay where you want to be. Thanks a lot Imran!
After hours of struggling with mobile popup menu, your small piece of code solved the problem. Thanks!
THANK YOU! You are a lifesaver. I was struggling with that problem and had to deliver the website to my client. Again thank you very much!
incredible! thank u very much for your videos! always choosing very specific and important things for junior coders
You have seriously saved me so many headaches. THANK YOU!
always on point... the best problem-solving channel!
Thanks a lot. You saved me a lot of stress. Incredible ! THANK YOU. One Pager and the Pop up not closed just went down on the site. Now is everything fixed. Nice Videos and Content :) LIVE SAVER
I don't usually comment on this kind of video but I really see you often when i'm looking for solutions so thanks you for your work
Glad to help
THANK YOU!! Saved me a lot of time, "Elementor frustration" and saved the day. I'm having a beer for you now! 🍺
Thank-you so much it's very helpful ❤❤
Cheers mate, worked a treat
I love your channel. Thank you.
I had this issue today for the first time. I knew where to come to find a fix 👍🏻👍🏻😎😎
Perfect! Thanks a lot!
Very useful point , Thank you Bro
Thank you for the code! 💯
This is very helpfull. Thanks for sharing this trick.
very helpful thanks man
thank you! great one.
Thanks!!
Uff hermano, me super salvaste. Gracias muchas gracias
You are awesome!
Your tutorial very nice
Thank you so much
Thanks is awesome!
Work perfect. Amazing!
Thanks a lot!
Thank you!
Thank you so mutch!
USEFUL Tks!!!!! 😍
Thank u for sharing
thanks very much
You saved my ass! Hours of work to reach here. Thank you a lot
thanks 🙏
THANK YOU
thank youuuuuuuuu!
thank you so much
great thanks
hero!
I have a sliding menu on mobile. When I click a menu item, it jumps to that page fine. Before your code, my problem was the menu still overlaid the previous page when pushing the back button and had to be closed manually. After implementing the code, when pushing the back button, I see the menu briefly before it closes automatically. Is there a way to make the menu completely disappear, so when I hit the back button, I don't see it all?
Great video Imran, but how do we add the HTML if the nav menu is created from Appearance > Menu?
Yeah, waiting for this one also @Web Squadron :)
Hey that's awesome. Quick question - if I want the exit animation to still work what can I do ? The minute I add a link the exit animation stops working . Any solution ?😊
Would depend on how it's built.
I just commented in your video on how to get anchor tags to show the desired location without having a sticky header block them. In there I commented about something like this. But this is talking about "popups" and I'm looking for how to close the mobile menu (hamburger) when an anchor tag item is clicked and its on the same page. ( I just wanted you to know I searched but unsuccessfully). Thanks
I was wondering if there is a similar solution for closing the mobile menu when an anchor tag menu selection is selected and its on the same page?
Brazil tankyou
when i uses it with the mobile at the moment i press the back button it cloth the popup and the post , so how i can ajuste it with the phone to be when i press the button back to just cloth the popup without clothing the main post
It shouldn’t do that and may depend on your build
I have a vertical mega menu that only opens/close when I click the < or x repectible, but no when I click the name of the menu(exam: Colections ) how can I put a code so when I click the name (exam: Colections) it open and close too.
Thanks
Hmmmm that’ll need some custom JS.
Have your tried asking the developers that created the vertical menu?
@@websquadron amm yes it was from a theme it was already created actually, but dons have that option
This works only for Elementor pro popup, how can i use it for Jetpopup from Croco? I try your code, but not working for me. Hope u can help. Thank u
Not sure with that one
I have a .5sec close fade-out animation on my menu. Using this code, it seems to interfere with it and I get this weird effect of the menu starting to disappear, the website scrolling behind to get to the anchor and then the menu closes fully. It takes longer to scroll than .5 secs so there is def something janky. How can I make the menu close before it scrolls down?
Difficult to advise without seeing your menu.
@@websquadron hmm i guess I’ll have to wait then, the site is still in progress so I can share it.
Which hosting do you use? It save elementor super fast
SiteGround
Hi Imran, can I use this code for the mega menu too? It stays open because I use anchor links in it.... : /
Not sure. Have a go.
how to add this code in nav tab or mobile menu
T H A N K S!
I linked text to a pop-up and it works,BUT THE PROBLEM is that when i click the pop up, it goes back to the top of the page of the linked text. Is there a related video or some sort of code that i need for it to stay after I activate the pop up? PLEASE HELP
I'll have a think
@@websquadron I face this problem: When we open a popup, even without taking any action, it takes us to the top of the page. Regardless of user action or simply closing the popup: We are at the top...
@dougsviana you shouldn’t get that issue but it may depend on the build
fucking great! thanks bud!
You should mention your solution only applies for Elementor Pro users
It’s in my descriptions and about page and everyone knows that I use EL Pro but I will bear that in mind
@@websquadron awesome video. could you possibly help me write this code für divi? Im trying my best but its just not working
mio padre
ok I was hurry with 'your small piece of code solved the problem' ;)
So - it works perfect on mobile popup menu but it has broken other popups on my site - i had a popup with clickable container which opened another popup - in the end there were two popups opened at the same time. After implementing this code, when i click the container, it opens new popup but closes the opened one.
I tried to modify html code by adding ID to define which specific popup should be closed elementorProFrontend.modules.popup.closePopup( {id:14425}, event) but it still doesnt work and can't have two popups opened at the same time.
Do you have any idea what to do?
jQuery(function($){
$(document).on('click','.elementor-location-popup a', function(event){
elementorProFrontend.modules.popup.closePopup( {},event);
});
});
I need to close the current popup and open another one when I click a button but it's been impossible. I hate Wordpress.
In the PopUp settings you can set the Multiple to be off.
@@websquadron I did that but it will never close. Spend multiple hours on that. Final solution: merge both popups on a single one. Thanks anyways, it's weird to see this kind of behaviours on such a big tool like Elementor