- Issue created by @austin_brian
- 🇮🇹Italy tanc Italy
I was able to replicate the issue with Chrome on Android on your site. But I can't replicate the issue with the same browser on the menu.js site which makes me think it's something with the Drupal markup that the browser doesn't like.
It'll need some investigation but I rarely have time I'm afraid. If you want to investigate the markup and try to get it as close to the menu.js recommended markup that would be good.
- 🇺🇸United States drakythe
I can confirm this is an issue, and that it can actually be replicated using Chrome browser (at least on MacOS) by using the viewport emulation feature of the developer tools. As long as you select a device that makes it emulate touch it will error in the same way.
We examined the mmenujs.com version of the menu and discovered that it has no instances where the parent level menu item is also a link. It is possible this is a problem with the mmenujs library itself, though I didn't dig deep enough into their repo to see for myself if that was the case.
It appears to be 2 anchor tags inside of a single li element that causes the problem. The problem seems to be that the maximum width of the first anchor tag goes super wide and pushes the second anchor tag wrapping the ">" graphic off the visible canvas. Occasionally this even results in all of the ">" graphics vanishing from the menu on affected devices, though we can't seem to consistently make that part happen. We have applied a temporary fix by manually assigning a maximum width using media queries. Our next step is to add our own supplementary JS to properly calculate the maximum width and set it in circumstances where that is necessary.
Thank you @drakythe
I added a css rule
.mm-listitem a {
max-width: 285px;
}Which made the child links clickable for my client on an Android phone.