Drop-Down Menu not working on mobile devices

Question

The most recent version of twitter bootstrap (2.3.2) does seem to have a problem with drop down menus on mobile devices.

When you click on a drop-down menu item after opening the menu, the menu simply closes and no link gets clicked. You can see this on their sample page here: http://twitter.github.io/bootstrap/examples/hero.html

I found an issue posted at their github page but no solution: https://github.com/twitter/bootstrap/issues/7927

Does anybody know the trick to fix it?

Solution 1

A temporary fix is to add

.dropdown-backdrop{
    position: static;
}

to the css file.

Solution 2

This worked for me:

$('.dropdown-toggle').click(function(e) {
  e.preventDefault();
  setTimeout($.proxy(function() {
    if ('ontouchstart' in document.documentElement) {
      $(this).siblings('.dropdown-backdrop').off().remove();
    }
  }, this), 0);
});

via robdodson on github

Solution 3

For me, it worked adding to my styles:

.dropdown-backdrop {
    z-index:0;
}

almost the same answer as Matthias, i hope it helps.