javascript - Bootstrap Collapsed Menu Links Not Working on Mobile Devices

Question

I am using a collapsible menu with submenu items in a navigation bar. The menu collapses properly on narrow displays, and the submenu items display properly.

When I click a submenu item, however, on a mobile device, the link doesn't work. Instead, the submenu collapses, and top menu item on the collapsed menu is highlighted, as if the submenu was never opened and the "click" went through it to the element that was underneath.

When I test the page on a desktop browser everything works properly.

I have customized some bootstrap styles, but mostly for colors etc.

Any ideas? TIA.

Answer 1

Looks like this is a known issue with Bootstrap (https://github.com/twitter/bootstrap/issues/4550 and possibly also https://github.com/twitter/bootstrap/issues/7968) which is very disappointing because it's been open for a long time and never fixed, and the primary reason to use Bootsrtap is its promise of responsive design.

The fix proposed at https://github.com/Bitergia/bootstrap/commit/25e8eeb47f01aceed57cb2715036a69395892fa8 seems to work, but it is using the Bootstrap source code, so if you are using the minified version and are not using the source scripts it looks differently.

I fixed it in my case in the minified version by adding the substring "disable-" to the touchstart test, therefore disabling this functionality.

To do that in your minified bootstrap.min.js file, find the substring

"ontouchstart"

and replace it with

"disable-ontouchstart"

Thank you @Shmalzy for trying to help.