Elementor Close Off Canvas On Anchor Link Click
Get Premium

Elementor Close Off Canvas On Anchor Link Click

Element.How also offers premium tutorials! Check them here:

Elementor Close Off Canvas On Anchor Link Click

Table of Contents

In this tutorial, you will learn how to close the new Elementor Off Canvas element when clicking any anchor menu links within it.

Let's get started!

First, add this code on the same page as your Elementor off canvas with anchor links

Often, this will be in your header template. Just add it at the same place where your Off Canvas element is.

Add a new HTML element, and copy paste this code in it.

Elementor Close Off Canvas On Anchor Link Click 1

<script> 
/* Please login to get the code 
 * The code will be for the Elementor Close Off Canvas On Anchor Link Click tutorial 
 * Found at this URL https://element.how/elementor-close-off-canvas-on-anchor-link-click/ 
 */ 
</script>

Then, go under Advanced > Positioning for the HTML element

Go under Advanced > positioning, and set the HTML element to position absolute. This is just to avoid having it taking flow space. You will be able to find it back easily through the navigator.

Finally, enjoy your self closing Elementor Off Canvas with Anchor links!

I hope you have enjoyed this tutorial.

Cheers!

Elementor Close Off Canvas On Anchor Link Click

Element.how also provides premium tutorials showing awesome advanced designs, check them out here.

Looking for something else? Search across 2927 Elements right here:

And get exclusive Elementor related discounts here

Checkout the Elementor Addon Finder directly

10 Responses

  1. hello! Thank you very much for your code. I have a problem... every time I click the anchor link it works, but when the offcanvas component disappears, the page goes back to the top. Would you know how to solve it?

      2. Sorry this is a bug from Elementor. The simple fix is to make the header sticky, then it will work as intended.

        For headers that are not sticky, hopefully Elementor will fix the way they coded this soon!

    1. Hey Shelley!

      Try this code instead of the one provided in the tutorial, let me know if it works!

      <script>
/* Code from https://element.how/elementor-close-off-canvas-on-anchor-link-click/
*/
document.addEventListener('click', function (event) {
    if (event.target.closest('a[href*="#"]:not([aria-haspopup="true"])') && event.target.closest('.e-off-canvas[aria-hidden="false"]')) {
        const canvasTriggers = document.querySelectorAll('[href*="canvas"][aria-expanded="true"]:not([href*="%3Aopen"]');
        canvasTriggers.forEach(canvasTrigger => canvasTrigger.click());
    }
});
</script>

      Cheers!

  4. Hello, I need help, I am using elementor menu mini cart and inside min cart i have added 'continue shopping' button which should just close the mini cart (just like when someone click on cross and it close), but i cannot find any solution or snippet, So is there a way to close minic cart onclick button.?

Leave a Reply