I've Fixed the Off Canvas Same Page Menu Links Problem - Elementor
Vložit
- čas přidán 19. 06. 2024
- If you have an Off Canvas Widget with Same Page Menu Anchor Links - then the Off Canvas will not close after you click the link.
This is how you do it!
Code: www.codesnippets.cloud/snippe...
How to Use the New Off Canvas Widget: • Boost SEO Pop-Ups: The...
I've Fixed the Off Canvas Same Page Menu Links Problem - Elementor
👉 Grab our $1 Business Packs: learn.websquadron.co.uk/#packs
👉 WordPress Hosting: be.elementor.com/visit/?bta=2...
👉 The Pro Page Builder: be.elementor.com/visit/?bta=2...
Need 1-2-1 Support: learn.websquadron.co.uk/#support
Join our Facebook Group: / websquadron
Get Code Snippets Pro: r.freemius.com/10565/3304295/ - Jak na to + styl
The code has been reworked to also;
- Allow Close Off Canvas when you assign to an icons/link etc to also work :)
- Allow Links to other pages or external links to also work :)
- Added in Transition and Motion Effects for Slide-in-left and Slide-out-left :)
www.codesnippets.cloud/snippet/WebSquadron/Off-Canvas-Widget-Anchors
I hope Elementor put this all into the widget natively.
Yet again Imran solves a problem Elementor should have already figured out. Well done mate.
... and solve problems you certainly do.
Thanks again, Imran.
Thank you Imran. Excellent solution.
Pure madness to solve problems that drive us crazy! This code snippet is really helpful. Thank you!
You're welcome!
Another day, another Imran video for my SOP. Thank you, man!
My pleasure!
Thanks for sharing Imran😊
My pleasure 😊
Thank you so much Imran, I indeed ran into this problem and it is now solved! Keep up your great videos and help!
Glad it helped
Pretty good! Just a few things: 1) If you have a "close" icon (eg. "X") in the Off-Canvas Widget, it doesn't work, although the Widget can be closed by clicking the overlay. 2) If you have closed the Widget on click, and then click the page toggle [icon] to re-open it, it won't work. 3) The code is a little buggy if the Entrance and Exit Animations are changed [in the code] (eg., slide in/out Right instead of Left).
Yup that's where the code will need adapting for the animations. This is a start and hopefully the code will be refined especially for the close icon.
I've redone the code to allow the 'Close' Icon to also work :)
See the altered code: www.codesnippets.cloud/snippet/WebSquadron/Off-Canvas-Widget-Anchors
@@websquadron Very nice! By the way, if this is really Imran, you are a massively entertaining and generous guy to share your knowledge. Can't thank you enough for that. And (of course) I'm still experiencing one last issue. Regardless of the type of link (menu item, external, anchor ...) I click on inside the Off Canvas, the widget still slides out Left when code is tweaked to slide out Right. Sadly my JS is lacking so not sure what's going on there.
@skywebdesigndevelopment6818 it is me :) did you adjust the transform values?
@@websquadron yes, I did that as well, but will keep playing with it and check for conflicts. no worries, I only mention it in case you're experiencing it as well.
Thank you for this solution! Have you had issues on mobile though? It seems to work fine when simulating a mobile device in my browser, but when opening the off-canvas an actual phone and clicking an anchor, the off-canvas doesn't close.
Any ideas on what could possibly cause this and how to fix it?
Thank you very much Imran
Good one but one more thing to setup. You should make sure Your entrance and exit animation is either empty or same as in snippet. Otherwise You will have a glitch effect like the widget is opening/closing twice.
At least I had this issue after applying this snippet
Great tip
Genius 😅 Thank you. 🙏
Thank you!!! I’ve run into this exact problem and couldn’t figure out how to fix it
Glad I could help!
Well done sir!
Brilliant!
You should have also pushed the content (behind the off-canvas menu) in the same direction as the menu when it extends out.
Good job 👏
Thanks 😅
1:33 having watcher this part i am now thinking i can i incorporate this on my website 😅
Your videos are fantastic, I have learned so much from them. Question: Do you know of a way to make the Off-Canvas Container auto show on page load? The toggle button would still be great to show but I would like my Off-Canvas Container to show as default on Page load. Any help or suggestions would be appreciated.
Hmmmmm.... good question. I'll have to check.
Would you still have a close button?
Or could they re-open it?
Thank you very much, please do you have the code for the Mega Menu too?
Hello!! Thank you for your videos! One question. Can this be used for triggering a filter menu (categories) for a store in the actual store page? Thank you!
Yes, I tested this in a previous video.
@@websquadron great! Thank you, I'll search for the video
@@sergio_grez czcams.com/video/_x4CqMp6zRg/video.htmlfeature=shared
Hey imran, i used the offcanvas for mobile to link on the same page but it does not go to that section that was anchored with. Have ypu alsp ran into this problem if so what did you do to solve it.
Not had that problem as this solution sorted that out for me
This is perfect. But i have 4 off-canvas widgets on page… will this work for all? Or the closed ones will open because of the toggle?
Hmmmmmm.... have a go....
Sr. Your Solution awesome, one question , you posted a video about how yo get clients using LinkedIn but i can' t find It, did you delate It?
czcams.com/video/2gSsDLaxM1U/video.htmlfeature=shared
Let me start from thanking you for your efforts. Being an author, rather old in age, I tried to use the Off-canvas widget for reading the first chapter of my novels. The problem is that the max width is 500px not enough for reading a page. Any suggestions? Anyway thanks again.
You can overwrite and change it to 100%
@@websquadron It was that easy!!!! Thanks for your immediate reply.
How the hack did you figure this out? 😳Thanks for sharing! 🤠
ChatGPTTTTTT :)
@@websquadron 😅 We should inform the Elementor team so that they can also use this secret weapon.
Just a small "Bug": If the off canvas contains both internal and external links, your script don't work. Often you have Onpage Links but also external links to pages like imprint, privacy and so on. How to handle this? 😅
Yes, I’ve run into this same exact “bug”. 🙁
@@Winstonbee3366 Currently working on a solution for this
@@Winstonbee3366 fixed it ... Hope it works for you as well
What was your fix?
@@websquadron Just checked if the href got an # inside or not and than run your scroll to code
OffCanvas is bit buggy right now.
I'm sure it will improve over time. I hope. I think.