How to make Off Canvas menu close Helix Ultimate 2.1.1 - Forum | JoomShaper
Solved Helix Framework

How to make Off Canvas menu close Helix Ultimate 2.1.1

Asked by Ralph-Uwe Scherer 1 year ago Last activity 1 year ago

I just tried the following custom javascript code in my Helix Ultimate 2.1.1 template but it still does not make the Off Canvas menu disappear when clicking on any of the links.

jQuery(function ($) { $(".offcanvas-menu a").on("click", function () { $(".off-canvas-menu-init").removeClass("offcanvas slide-top-menu full-screen-off-canvas full-screen-ftop new-look-off-canvas"); $(".offcanvas-overlay").remove(); }); });

See page here: https://ids.cdsvc.com/ Click on any of the Off Canvas links and you will see what I am talking about.

Any other ideas? I am using Chrome on a Mac but have also tested on Safari and it behaves the same way.

Accepted answer

Marked as the solution
Atick Eashrak Shuvo Staff
1 year ago

You are welcome. Please marked the issue as solved.

2 more replies

Oldest first Newest first Most helpful
Atick Eashrak Shuvo Staff
1 year ago

Hello There,

Apologize for the issue you're experiencing. Please add the following JS code to your Template Options -> Custom Code -> Custom JavaScript

$(document).on('click', '.offcanvas-menu a[href*="#"]', function (event) {
    const targetHref = $(this).attr('href');

    if (targetHref.includes('#')) {
        event.preventDefault();

        const hash = targetHref.split('#')[1];
        const targetElement = $(`#${hash}`);

        if (targetElement.length) {
            $('html, body').animate({ scrollTop: targetElement.offset().top }, 500);
        }

        $('.offcanvas-init').removeClass('offcanvas-active full-offcanvas');
    }
});

This should resolve the problem. Please let us know if you need any further assistance!

Best regards

Ralph-Uwe Scherer Asked this
1 year ago

Thank you! That worked perfectly. Onward and upward we go.... ;-)

Log in to reply.