Made in Chicago Company Directory

eduaibanez
(@eduaibanez)

4 months, 1 week ago
Greetings,

I have an issue related to the submenu dropdown.

It works correctly in desktop format; however, in mobile format, the dropdown does not respond.

Upon the first touch, nothing happens, the dropdown does not open, and after the second touch, it loads the link of the parent element to which the submenu is attached, but it never opens.

I have the same behavior in my mobile device (iPhone 12 using Safari)

Why could this be happening? Could you provide me with a hint on how to resolve it?

I am attaching a link to a YouTube video where I demonstrate the problem.

Youtube link: https://www.youtube.com/watch?v=ZxBUJN1OEfE

PS: I’m using Divi

Thank you very much for your attention.

Best regards.
- This topic was modified 4 months, 1 week ago by eduaibanez.
The page I need help with: [log in to see the link]

Viewing 3 replies - 1 through 3 (of 3 total)

Plugin Author Oliver Campion
(@domainsupport)

4 months, 1 week ago
Hi,

Sorry to hear you’re having issues.

Your site has a lot of JavaScript being loaded (at least 45 files and that’s not including the inline scripts). Please can you confirm the following …
1. The issue persists after all plugins except SideMenu have been deactivated
2. At least three of your plugins have updates pending (5 including WooCommerce and Contact Form 7). Please confirm the issue persists once plugins have been updated.
3. Your site is running a child theme of Divi. Please confirm that the issue can be replicated when the parent theme is active.
Once we have this information we will be better placed to help further!

Please make sure you run full backups of your filesystem and database before undertaking any of the above.

Thank you,

Oliver
Thread Starter eduaibanez
(@eduaibanez)

4 months ago
Good morning Oliver,

I really appreciate your help. I’m not comfortable with the idea of deactivating all the plugins on the site or updating them because it’s not the task I’ve been assigned, and I don’t want to alter anything that is not related to the tasks that have been requested of me, I hope you understand.

However, I would like to try any alternative that allows me to make that dropdown work on mobile devices.

There are several options that I think could help me solve or avoid the problem:
1. I have thought about the possibility that if a menu item has children, the event trigger that opens the dropdown is not limited only to the icon, but the entire <li> element triggers the event. I don’t mind losing the link of this parent element.
2. How is the event triggered that opens the dropdown? Could you indicate where the file containing the definition of this behavior is located? I would like to review it in case I could modify it and adapt it to my situation. I understand that doing this implies that the changes would be lost if I update the module, but it’s a sacrifice I can assume.
Thank you very much for your attention

Best regards.
- This reply was modified 4 months ago by eduaibanez.
Plugin Author Oliver Campion
(@domainsupport)

4 months ago
The problem you have is that we cannot replicate your site to test to see what’s causing the issue because you are running a premium theme and custom child theme. The first thing we would do would be to identify if the issue were being caused by the theme or a plugin by changing to a default theme and by disabling all (other) plugins.

Seeing as you are unable to do this (we would highly recommend that you setup a development web server so that you can do in future) then we can still diagnose the issue, it’ll just take longer for us to do so …

Anyway, we have identified what is causing the problem. The lines after 1096 of /wp-content/themes/Divi/js/scripts.min.js …
```
                            })), t.find("li.menu-item-has-children").on("touchend", (function(t) {
                                var e = n(t.target).closest(".menu-item");
                                if (e.hasClass("menu-item-has-children")) {
                                    var i = n(this),
                                        a = e.closest(".mega-menu-parent.et-touch-hover").length > 0;
                                    if (i.hasClass("et-touch-hover") || a)
                                        void 0 !== i.find(">a").attr("href") && (window.location = i.find(">a").attr("href"));
                                    else {
                                        var o = n(t.target),
                                            r = o.closest(".menu-item").siblings(".et-touch-hover");
                                        if (o.closest(".et-touch-hover").length < 1 && window.et_pb_toggle_nav_menu(n(".et-hover"), "close", 0), i.addClass("et-touch-hover"), r.length > 0) {
                                            var s = r.find(".et-touch-hover");
                                            window.et_pb_toggle_nav_menu(r, "close"),
                                            window.et_pb_toggle_nav_menu(s, "close")
                                        }
                                        window.et_pb_toggle_nav_menu(i, "open")
                                    }
                                    t.preventDefault(),
                                    t.stopPropagation()
                                }
                            })), t.find("li.mega-menu").each((function() {
```
… we think are adding a touchend event to the parent li element preventing the dropdown click event from being triggered.

We have successfully diagnosed this as being the cause by disabling the relevant touchend event in the console on an iPhone 13 after which the dropdowns function normally.

Perhaps there is an option in Divi theme to disable this “feature” whatever it is?

Oliver

Viewing 3 replies - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.

Directory

Submenu dropdown not working on mobile devices

Tags