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.