Bootstrap v2 Dropdown Navigation not working on Mobile Browsers

Question

I am having an issue with the Bootstrap menu dropdowns on mobile devices (Bootstrap 2). A similar question was asked here with dropdown buttons, however the answer for that was an inherent bug within bootstrap which was solved in an update. I appear to be having the same issue so perhaps it's down to my markup?

I have a collapsable navbar with dropdowns and everything works perfectly on desktop browsers. However on a mobile, the dropdowns will open up when you click on the dropdown but clicking any dropdown links will just fold the dropdown back up again — the links cannot be reached. I have tried various bootstrap versions and cannot correct this so I can only imagine it is my markup. Here it is:

 <header class="navbar">     <div class="navbar-inner">         <div class="container">             <a href="#"><h1>Branding</h1></a>             <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> Menu </button>             <div class="nav-collapse collapse">                 <ul class="nav">                     <li><a href="#">Menu Item 1</a></li>                     <li class="dropdown">                                             <a href="#" class="dropdown-toggle" data-toggle="dropdown">Menu Item 2 (Dropdown)<b class="caret"></b></a>                               <ul class="dropdown-menu">                             <li><a href="#">Dropdown Item 1</a></li>                             <li><a href="#">Dropdown Item 2</a></li>                             <li><a href="#">Dropdown Item 3</a></li>                               <li><a href="#">Dropdown Item 4</a></li>                                                    </ul>                     </li>                     <li><a href="#">Menu Item 3</a></li>                     <li><a href="#">Menu Item 4</a></li>                 </ul>             </div><!--/.nav-collapse -->         </div>     </div> </header> 

Here's an example replicating the code (sorry, can't send the site): http://jsfiddle.net/yDjw8/1/

(Problem can only be seen/replicated on mobile — I'm using iOS)

Any help would be much appreciated.

Answer 1

In your minified bootstrap.min.js file, find the substring

"ontouchstart" 

and replace it with

"disable-ontouchstart" 

Check out this similiar SO question: Bootstrap Collapsed Menu Links Not Working on Mobile Devices

Answer 2

Found this fix for version 2.3.2:

<script> jQuery(document).ready(function($)  { $("li.dropdown a").click(function(e){     $(this).next('ul.dropdown-menu').css("display", "block");     e.stopPropagation();   }); }); </script>      

Worked on two separate nav systems I built.