Off Canvas Mobile Menu - Question | JoomShaper
Black Friday sale is live with flat 50% OFF. Sale ends soon! Grab your deal now!

Off Canvas Mobile Menu

MF

Mervyn Futter

Helix Framework 4 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/

0
14 Answers
Ofi Khan
Ofi Khan
Accepted Answer
Support Agent 4 years ago #36015

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

0
MF
Mervyn Futter
Accepted Answer
4 years ago #36033

fantastic, thank you for the fix.

0
PK
Peter Klinke
Accepted Answer
4 years ago #36090

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

0
Ofi Khan
Ofi Khan
Accepted Answer
Support Agent 4 years ago #36147

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

0
Christian
Christian
Accepted Answer
4 years ago #36531

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.

0
MF
Mervyn Futter
Accepted Answer
4 years ago #36546

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

0
Ofi Khan
Ofi Khan
Accepted Answer
Support Agent 4 years ago #36700

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

    });
});
0
Christian
Christian
Accepted Answer
4 years ago #36703

Hello Ofi Khan,

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

0
MF
Mervyn Futter
Accepted Answer
4 years ago #36705

Thank you so much a perfect fix.

0
Ofi Khan
Ofi Khan
Accepted Answer
Support Agent 4 years ago #36717

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

        }

    });
});
0
Christian
Christian
Accepted Answer
4 years ago #36721

Ofi Khan ,

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

0
Ofi Khan
Ofi Khan
Accepted Answer
Support Agent 4 years ago #36744

You are welcome. 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

0
MF
Mervyn Futter
Accepted Answer
4 years ago #36749

Will do many thanjks for your help.

0
Christian
Christian
Accepted Answer
4 years ago #36756

Here it is, thank you!

0