Gooday Paul!
I don´t want to touch joomlas and helix templates html module, face to updateds.
I have inserted this script in helix templates custom javascript field (this solves the mod menu collapse error and makes compatible with off canbas mobile menu ):
document.addEventListener('DOMContentLoaded', function() {
// Only apply to desktop view (adjust breakpoint as needed)
if (window.innerWidth > 991) { // Common mobile breakpoint
const menuParents = document.querySelectorAll('.menu-parent');
menuParents.forEach(function(menuParent) {
menuParent.addEventListener('click', function(e) {
if (e.target === menuParent.querySelector('a') ||
e.target.classList.contains('menu-toggler')) {
const submenu = menuParent.querySelector('.menu-child');
if (submenu) {
submenu.classList.toggle('show');
menuParent.setAttribute('aria-expanded',
submenu.classList.contains('show') ? 'true' : 'false'
);
e.stopPropagation();
}
}
});
});
// Prevent outside clicks for desktop only
document.addEventListener('click', function(e) {
if (window.innerWidth > 991 && !e.target.closest('.mod-menu')) {
e.stopPropagation();
}
}, true);
}
});
About: inert.min.js , probably not the smartest solution neither... add this css to my custom css file:
/ Disable source map loading /
script[src*="inert.min.js"] {
display: none;
}
For the menu issue, we found that adding a screen width check to our JavaScript solution allows us to maintain proper mobile functionality while fixing the desktop behavior. This suggests that having separate desktop/mobile menu behaviors would be a valuable addition to the template settings.
Thank you for your help-attention.
Best regards.
Thanks