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.

Answer 2

I encountered this issue on iPad. I found I was missing the following on the anchor tags:

 href="#collapseSection"

Where #collapseSection is the ID of the collapsing panel. Example:

<div class="panel panel-default">
  <div class="panel-heading"><a class="accordion-toggle" href="#collapseHelp" data-toggle="collapse" data-target="#collapseHelp" data-parent="#accordion">Printing Problems?</a></div>
  <div id="collapseHelp" class="panel-collapse collapse">
    <div class="panel-body">Before you contact the helpdesk, have a look at <a href="Help.asp?PrintHelp">our help system</a>.</div>
  </div>
</div>

You should not need to alter the minified JavaScript to correct this issue, as it works fine in the Bootstrap examples. It's all a matter of formatting your HTML correctly.

Answer 3

when the menu items list is too long, you might need to add the following code in your CSS to be able to see the complete menu on mobile browsers (tested on iOS):

@media (max-width: 1023px) {
.nav-collapse {
    overflow-y: auto;
}
}

Answer 4

I had the same problem, this fix worked for me:

https://github.com/stevecoug/bootstrap/commit/b2a23b222fd05fa824ed05fb096971321ad3dba1

Answer 5

I tried collapsible panels with Bootstrap not as a navigation or menu, but just a collapsible panel (like this http://www.w3schools.com/bootstrap/bootstrap_collapse.asp ), and came across the same problem..

I realised that changing <a...> to <button...> helped, at least for my phone (indeed the example uses button too). You can then style the button to look like a link, in fact there is a Bootstrap CSS class called btn-link which does exactly this, or you can add your own fancy style. For my use case that was the simplest and easiest solution.

Answer 6

I had to do something quick and dirty, so I used what used to do in the "old days".
I gave my links: <a style="position:relative;z-index:1000" ...