Bootstrap v2 Dropdown Navigation not working on Mobile Browsers

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.

116 thoughts on “Bootstrap v2 Dropdown Navigation not working on Mobile Browsers”

  1. Very nice post. I just stumbled upon your weblog and wished to say that I
    have really enjoyed browsing your blog posts. After all I’ll be subscribing to your feed and I hope you write again soon!

    Reply
  2. Its like you read my mind! You seem to understand a lot approximately this, like you wrote the book in it
    or something. I believe that you simply can do with a few %
    to pressure the message house a little bit, but other than that, this is great blog.
    A fantastic read. I will certainly be back.

    Reply
  3. Nice post. I was checking constantly this blog and I’m impressed!
    Very helpful info specifically the last part πŸ™‚ I care for such information a lot.
    I was looking for this certain information for a very long time.
    Thank you and good luck.

    Reply
  4. An impressive share! I’ve just forwarded this onto a coworker who has been doing a little research on this.
    And he actually ordered me dinner simply because I discovered it
    for him… lol. So let me reword this…. Thanks for the meal!!

    But yeah, thanks for spending the time to talk
    about this subject here on your site.

    Reply
  5. Appreciating the hard work you put into your site and in depth information you provide.
    It’s nice to come across a blog every once in a while that isn’t the same
    out of date rehashed information. Fantastic read!

    I’ve saved your site and I’m including your RSS feeds to my Google account.

    Reply
  6. Hi there I am so happy I found your webpage, I really found you by
    accident, while I was looking on Digg for something else, Nonetheless I am here now
    and would just like to say many thanks for a marvelous post and a all round thrilling blog
    (I also love the theme/design), I don’t have time to browse it all at
    the moment but I have bookmarked it and also added in your RSS feeds, so when I have time I will be back to read more, Please do keep up the superb work.

    Reply
  7. Attractive component to content. I just stumbled upon your weblog and in accession capital to claim that I
    acquire actually enjoyed account your weblog posts. Anyway I’ll be subscribing to your augment
    and even I fulfillment you access consistently fast.
    scoliosis surgery https://0401mm.tumblr.com/ scoliosis surgery

    Reply

Leave a Comment