In Wordpress I am using Elementor website builder, in conjunction with it I am using ElementsKit.

One of the widgets in ElementsKit is the Header Offcanvas, which is a free alternative to Elementor's Offcanvas which is paid.

By default it works very well, but it has no option in its default settings to close the offcanvas when you click on one of its buttons. This is of vital importance for example when anchor links are used and navigation occurs within the same page.

Is there any free strategy to solve this?

Translated with DeepL (free version)

In Wordpress I am using Elementor website builder, in conjunction with it I am using ElementsKit.

One of the widgets in ElementsKit is the Header Offcanvas, which is a free alternative to Elementor's Offcanvas which is paid.

By default it works very well, but it has no option in its default settings to close the offcanvas when you click on one of its buttons. This is of vital importance for example when anchor links are used and navigation occurs within the same page.

Is there any free strategy to solve this?

Translated with DeepL (free version)

• wordpress
• elementor

1 Answer 1

The solution:

Similar to a strategy used to close Elementor's Offcanvas, we can add code using the HTML widget with the javascript script that performs the offcanvas toggle.

• First, edit the content of the ElementsKit Header Offcanvas:

• Then add the stock HTML widget somewhere on the canvas (ideally place it as far at the top as possible):

• And finally add the following code inside the HTML widget:

<script>
    document.addEventListener("DOMContentLoaded", function() {
    var offcanvas = document.querySelector(".ekit-sidebar-group"); // The offcanvas container
    var closeTrigger = document.querySelector(".ekit-widget-area-container"); // Container that acts as trigger

    closeTrigger.addEventListener("click", function() {
            offcanvas.classList.toggle("ekit_isActive");
        });
});
</script>

Resulting in the following:

How does this work?

My idea was to inspect what events are triggered when we press the original close button in the offcanvas, as follows:

And here we can see that the original functionality applies a toggle of the class “ekit_isActive” to “ekit-sidebar-group”:

Finally, what my logic does is to load an event to the div in which the components inside the offcanvas are shown; that is to say that when you click on any element inside the offcanvas it will also execute the closing logic (the toggle).