How do I Make It Close When Clicking On A Menu Item?
Dmitry Goncharov
https://mega.nz/file/PvInCIyR#jVSPfQuXlWmNLr8EtFaeLA-TNz9wgHCX56B_GmAeB80
Now it's a very uncomfortable situation for users. When the menu is made in the form of anchor links with navigation inside one page, then when you click on the menu items, the movement occurs under it and customers do not notice it.
You need to close the menu for this. Is there any way to make it close when you click on a menu item?
Paul Frankowski
Accepted AnswerHi Dimitry,
that problem is only with one-page (anchor) links.
Solution was on the forum a few times, it request using extra javascript.
look down - new shared by me code
kusy
Accepted AnswerHello. I tried using this solution on the Travelin template and on Helix Ultimate (2.1.1) and it looks like it no longer works.
Laurent Robin
Accepted AnswerTried on Helix 3.0.5 it doesn't work either.
kusy
Accepted AnswerI don't know much about javascript, but chatgpt suggested this solution and it works great for me (put it on end of main.js file - you will find it in the template subdirectory called js). There are also changes here to make everything look nice and smooth. Unfortunately, I don't remember if any other part of the file was edited before. If this doesn't work, I can send you the full code of the main.js file.
jQuery(document).ready(function($) {
// Scroll and close offcanvas immediately
$('a[href^="#"]').on('click', function(event) {
var target = $(this.getAttribute('href'));
if (target.length) {
event.preventDefault();
// Close offcanvas immediately
$('.offcanvas-init').removeClass('offcanvas-active');
// Scroll after closing offcanvas
setTimeout(function() {
$('html, body').animate({
scrollTop: target.offset().top
}, 500);
}, 200); // Short delay for smooth closing of the menu
}
});Paul Frankowski
Accepted Answeradd that code into a new created custom.js file >>
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(); }); });
Laurent Robin
Accepted Answeri received the solution adding this small script to the custom.js
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(); }); });
Thanks very much to the support team!
Ralph-Uwe Scherer
Accepted AnswerI just tried this 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.
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.
