17

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.

3
  • 1
    Can you post your code here or in a jsFiddle?
    – Schmalzy
    Jul 2, 2013 at 20:39
  • @Schmalzy -- There is quite a bit of layout there and I did not yet manage to write a reduce test case. I can send you a link to a live page but prefer not to post it publicly here since it is in beta.
    – isapir
    Jul 2, 2013 at 21:34
  • @lgal Sure, send me the link.
    – Schmalzy
    Jul 2, 2013 at 21:51

6 Answers 6

40

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.

6
  • 7
    I had this same issue. I tried the code fix proposed, but that didn't seem to help. Ultimately the simple CSS correction in github.com/twitter/bootstrap/issues/7968 did the trick. Jul 6, 2013 at 21:10
  • @GarrettVlieger What device did you test this on? I tested on Android Tablet and Android Phone and the fix above seem to do the trick.
    – isapir
    Jul 7, 2013 at 2:30
  • I was trying it on an Android phone. Jul 7, 2013 at 12:45
  • thanks @GarrettVlieger, that helped since i didn't want to host the scripts locally to fix the issue. The new link seems to be: github.com/twbs/bootstrap/issues/7968 Sep 1, 2013 at 14:12
  • Updating to "disable-ontouchstart" resolved the issue. Thanks!
    – Topsakal
    Jun 6, 2014 at 11:33
3

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.

1
  • I know your answer is from a few years ago, but it just saved me. You are right, it is much cleaner this way.
    – Pipimi
    Mar 17, 2021 at 18:48
0

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;
}
}
0

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

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

0

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.

0

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" ...

Not the answer you're looking for? Browse other questions tagged or ask your own question.