Awaiting an answer Helix Framework

conflict mod menu html and error

Asked by jon 2 months ago Last activity 2 months ago

Hi JoomShaper Team,

We're using Helix Ultimate with Joomla 6.1.2 and have encountered a couple of issues that we believe are template-related:

Menu Outside-Click Behavior: The menu automatically closes when clicking anywhere outside the menu area, which creates a frustrating user experience. We had to implement custom JavaScript to prevent this behavior and keep submenus open until explicitly toggled.

Missing Source Map File: We're getting 404 errors for /templates/shaper_helixultimate/js/inert.min.js.map in our server logs. The browser is trying to load this source map file, but it doesn't appear to be included in the Helix Ultimate distribution.

We've already implemented workarounds for both issues, but thought you'd want to know about them for future template updates. The menu behavior in particular seems like it should be a configurable option in the template settings.

Thank you for your consideration.

2 replies

Paul Frankowski Senior Staff

2 months ago · edited

Hi Jon,

Thanks for both. If you can share 1st solution, I would be able to talk with our developer about those.

BTW

If we talk about comment line inside file \js\inert.min.js the last line:
//# sourceMappingURL=inert.min.js.map in theory it shouldn't be loaded, but some browsers try anyway. Yes, can be removed, I asked our developer to remove it as well, during next update.

jon Asked this

2 months ago

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