How To Make Off Canvas Menu Close Helix Ultimate 2.1.1
Ralph-Uwe Scherer
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.
Atick Eashrak Shuvo
Accepted AnswerHello 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