Question

118

Bootstrap Collapsed Menu Links Not Working on Mobile Devices

rated 0 times [ 125] [ 7] / answers: 1 / hits: 45378 / 11 Years ago, tue, july 2, 2013, 12:00:00

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.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

jadyngraysons

Add To Favorites

Follow

Total Points: 455

Total Questions: 109

Total Answers: 98

Location: Trinidad and Tobago

Member since Fri, May 8, 2020

4 Years ago

jadyngraysons questions

1 AWS Lambda SNS Destinations not working on failure or success

Fri, Aug 14, 20, 00:00, 4 Years ago

1 React Hooks useState Array empty with states rendered in the component

Tue, May 5, 20, 00:00, 4 Years ago

1 postman pm set environment variable

Thu, Apr 23, 20, 00:00, 4 Years ago

1 getElementById after dynamically adding it in React

Sat, Jan 18, 20, 00:00, 4 Years ago

1 How to customise Intl.DateTimeFormat date?

Tue, Dec 31, 19, 00:00, 5 Years ago

View All

answered 11 Years ago kristineterrak · Accepted Answer

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.