title: Bootstrap v2 Dropdown Navigation not working on Mobile Browsers
body: <p>I am having an issue with the Bootstrap menu dropdowns on mobile devices (Bootstrap 2). A similar question was asked <a href="https://stackoverflow.com/questions/14244357/twitter-bootstrap-dropdown-links-not-working-on-mobile">here</a> 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?</p>
  
  <p>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:</p>
  
  <pre><code> &lt;header class="navbar"&gt;
      &lt;div class="navbar-inner"&gt;
          &lt;div class="container"&gt;
              &lt;a href="#"&gt;&lt;h1&gt;Branding&lt;/h1&gt;&lt;/a&gt;
              &lt;button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"&gt; Menu &lt;/button&gt;
              &lt;div class="nav-collapse collapse"&gt;
                  &lt;ul class="nav"&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Menu Item 1&lt;/a&gt;&lt;/li&gt;
                      &lt;li class="dropdown"&gt;                    
                          &lt;a href="#" class="dropdown-toggle" data-toggle="dropdown"&gt;Menu Item 2 (Dropdown)&lt;b class="caret"&gt;&lt;/b&gt;&lt;/a&gt;      
                          &lt;ul class="dropdown-menu"&gt;
                              &lt;li&gt;&lt;a href="#"&gt;Dropdown Item 1&lt;/a&gt;&lt;/li&gt;
                              &lt;li&gt;&lt;a href="#"&gt;Dropdown Item 2&lt;/a&gt;&lt;/li&gt;
                              &lt;li&gt;&lt;a href="#"&gt;Dropdown Item 3&lt;/a&gt;&lt;/li&gt;  
                              &lt;li&gt;&lt;a href="#"&gt;Dropdown Item 4&lt;/a&gt;&lt;/li&gt;                           
                          &lt;/ul&gt;
                      &lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Menu Item 3&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Menu Item 4&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/div&gt;&lt;!--/.nav-collapse --&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/header&gt;
  </code></pre>
  
  <p>Here's an example replicating the code (sorry, can't send the site): <a href="http://jsfiddle.net/yDjw8/1/" rel="nofollow noreferrer">http://jsfiddle.net/yDjw8/1/</a></p>
  
  <p>(Problem can only be seen/replicated on mobile — I'm using iOS)</p>
  
  <p>Any help would be much appreciated.</p>