Solved Helix Framework

Off Canvas Mobile Menu

Asked by Mervyn Futter 5 years ago Last activity 5 years ago

On my Iphone when the off canvas menu displays I have to click the arrows to open the drop down menu list.
It will not open the drop down when I click just the header title.
It only opens when I click the arrow.
Is there a way to make it open when I click the menu header item too please?

https://theleedsirishcentre.co.uk/

Accepted answer

Marked as the solution

Ofi Khan Staff

5 years ago

Hello Mervyn Futter

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

jQuery(function($) {
    $(document).on("click", ".offcanvas-inner .menu-deeper", function(event) {
        $(this)
            .closest(".menu-parent")
            .toggleClass("menu-parent-open")
            .find(">.menu-child")
            .slideToggle(400);
    });
    $(document).on("click", ".offcanvas-inner .menu-child", function(event) {
        $(this)
            .closest(".menu-parent")
            .toggleClass("menu-parent-open")
            .find(">.menu-child")
            .slideToggle(400);
    });
});

Best regards

13 more replies

Mervyn Futter Asked this

5 years ago

fantastic, thank you for the fix.

Peter Klinke

5 years ago

Great!
That should be standard.
'normal' users do perhaps not understand to click on the arrow ...

Ofi Khan Staff

5 years ago

You are welcome, guys!

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

Christian

5 years ago

Hello,
Perfect this javascript modification, but there is just a problem when you click on the arrow now, the menu opens and closes immediately.

We can see the problem on the Mervyn Futter site :
https://theleedsirishcentre.co.uk/

Thanks for your help.

Mervyn Futter Asked this

5 years ago

Oh wow I hadn't noticed that but you're right it does indeed.
Is this something that support can help with please?

Ofi Khan Staff

5 years ago

Thanks for finding the issue. Please ignore the first code. Use this in Template Options -> Cusotm Code -> Custom JavaScript

jQuery(function($) {
    $(document).on("click", ".menu-deeper", function(event) {
        event.preventDefault();
        event.stopPropagation();

        if (event.target.classList.contains('menu-toggler')) return;

        $(this)
            .toggleClass("menu-parent-open")
            .find(">.menu-child")
            .slideToggle(400);

    });
});

Christian

5 years ago · edited

Hello Ofi Khan,

The menu does not close anymore, but now the links in it are not clickable.

Mervyn Futter Asked this

5 years ago

Thank you so much a perfect fix.

Ofi Khan Staff

5 years ago

Damn! Thanks for pointing out. Try this please.

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);

        }

    });
});

Christian

5 years ago

Ofi Khan ,

Perfect, thank you for your quick reaction, now it's great.