Staff replied Helix Framework

Moblie Menu Issue

Asked by Roberto Pisconti 4 years ago Last activity 4 years ago

Hello I have a problem with the mobile menu on my site. I have a tree structure where the first item is descriptive only and the sub-items are the clickable items. When I look at the menu from my mobile phone, the first item has the arrow indicating that there are sub-items but clicking on the arrow opens the sub-items while if I click on the text of the main item it does not open the sub-items. This creates confusion among my users. Is there a way to make both the text and the arrow clickable in order to open the sub-items?

3 replies

Ofi Khan Staff

4 years ago

Hello Roberto Pisconti

Please use this JavaScript to Template Options -> Custom Code -> Custom JavaScript

jQuery(function($) {
    $(document).on("click", ".menu-deeper", function(event) {
        if (event.target.classList.contains('menu-toggler')) return;
        if (event.target.children.length) {
            event.preventDefault();
            event.stopPropagation();
            $(this)
                .toggleClass("menu-parent-open")
                .find(">.menu-child")
                .slideToggle(400);
        }
    });
});

Best regards

Roberto Pisconti Asked this

4 years ago

It works perfectly, thank you very much.

Ofi Khan Staff

4 years ago

You are welcome. Please accept the answer that helped you. It will be then easier to find the solution for the other users with the same issue. There is a button to accept answer after each comment.

I have a humble request too. It would be very kind of you if you can manage some moment to give us feedback on Joomla Extension Directory. This will inspire us to improve.