Submenu dropdown not working on mobile devices

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

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 9 months ago by eduaibanez.

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