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.

Decolonize

You might need to find another CDN to link to in your Fiddle. When I visit it the CSS and JS files are not being loaded properly. I tried creating my own Fiddle using the same CDN and the links to the CSS and JS files broke after I reloaded the Fiddle. – Laborsaving

Thanks for this @MichaelFreake — I have changed the hosting to dropbox - any better? – Decolonize

I can confirm that it's now working in Chrome on my Win7 machine. The fiddle is also displaying the exact same way on my iPhone 5 iOS 6.1.3 using both Chrome and Safari. I'm seeing the behaviour you have described as well. Click on a menu link - it highlights. Click on a submenu link - it collapses the menu. – Laborsaving

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

Counterpoison

Thanks , this works perfectly after hours of surfing on the web T_T, thanks ! – Excellency

This solution not seems to work with bootstrap 3.3.6 :/ – Twoup

This is not a 'solution'. – Echidna

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.

Amphibiotic

Thanks for this answer. It made the links work but the dropdown doesn't collapse again on the version I tested. Either way, I would have put it as the accepted answer but @Counterpoison got there first! – Decolonize

thanks for the solution. however there are two problems: 1. dropdowns dont close other open dropdowns when they open; and 2. links inside dropdowns fail to propagate their JS. posting a fix: https://mcmap.net/q/466348/-bootstrap-v2-dropdown-navigation-not-working-on-mobile-browsers – Uzziel

Hi @YossiShasho , your solution work for me, Thanks a lot, but in every click the button, website's view will back to top of website's view, how to make view doesn't back to top/still at same position if I click dropdown button? – Arris

Answer 3

I am using BootStrap 3.1.1. I have tried many answers, dropdown menu works fine on Android devices but still doesn't works on iOS device. Finally I find root cause of the problem.

safari on iPhone only support click event for <a> and <input> element. See this passage Click event delegation on the iPhone.

So we need to add custom click delegation. Following code will solve the problem.

$('[data-toggle=dropdown]').each(function() {
 this.addEventListener('click', function() {}, false);
});

Headliner

Answer 4

I solved this same problem doing this:

1.Open your js/bootstrap-dropdown.js or the minified version of it.

2.Find for the lines or places for: touchstart.dropdown.data-api

3.There should be only 4 occurs of it. Something like this:

.on('click.dropdown.data-api touchstart.dropdown.data-api', clearMenus)
.on('click.dropdown touchstart.dropdown.data-api', '.dropdown form', function (e) { e.stopPropagation() })
.on('click.dropdown.data-api touchstart.dropdown.data-api'  , toggle, Dropdown.prototype.toggle)
.on('keydown.dropdown.data-api touchstart.dropdown.data-api', toggle + ', [role=menu]' , Dropdown.prototype.keydown)

You should insert this new line between the 2nd and 3rd occurences:

.on('touchstart.dropdown.data-api', '.dropdown-menu', function (e) { e.stopPropagation() })

4.Your news piece of code must be something like this:

.on('click.dropdown.data-api touchstart.dropdown.data-api', clearMenus)
.on('click.dropdown touchstart.dropdown.data-api', '.dropdown form', function (e) { e.stopPropagation() })
.on('touchstart.dropdown.data-api', '.dropdown-menu', function (e) { e.stopPropagation() })
.on('click.dropdown.data-api touchstart.dropdown.data-api'  , toggle, Dropdown.prototype.toggle)
.on('keydown.dropdown.data-api touchstart.dropdown.data-api', toggle + ', [role=menu]' , Dropdown.prototype.keydown)

Be careful on minified versions of Bootstrap.js... so you must concatenate the new line at the exact position on it.

Good luck! :)

Aeschylus

best solution, worked for me perfectly for old versions of BS. Thanks! – Damnedest

Answer 5

I recommending downloading the latest Bootstrap files and replacing the bootstrap.js and bootstrap.min.js on your server with the new versions.

This fixed the issue for me.

Bream

This question is quite old now, however at the time of writing, I had already tried this various times. – Decolonize

Worked for me, going from BS 3.7.1 to BS 4.1.3 – Islam

Answer 6

I found solution of this from bootstrap git-hub forum. You need to include just one line of code in script on document ready as,

$('body').on('touchstart.dropdown', '.dropdown-menu', function (e) { e.stopPropagation(); });

Its work for me!!!

Twopiece

Answer 7

This fix is for Bootstrap 2.3.2, and its based on the answer by @asbanks (https://mcmap.net/q/466348/-bootstrap-v2-dropdown-navigation-not-working-on-mobile-browsers).

On top of asbanks's answer, this script also propagates JS calls from links inside the dropdowns, and an opened dropdown closes other open ones.

$(function() {
  return $("a.dropdown-toggle:not(.multiselect)").click(function(e) {
    $("ul.dropdown-menu:not(.multiselect-container)").css("display", "none");
    $(this).next("ul.dropdown-menu").css("display", "block");
    return e.stopPropagation();
  });
});

$(document).on('click click.dropdown.data-api', function(e) {
  if (!$(e.target).closest('.dropdown, .multiselect-container').length) {
    return $("ul.dropdown-menu:not(.multiselect-container)").css("display", "none");
  }
});

Uzziel

This code, as-is, fixed my issue even on Bootstrap 3.3.7 – Zooplasty

Hi bro @Yossi, this solution work for me, but in every click the button, website's view will back to top of website's view, how to make view doesn't back to top/still at same position if I click dropdown button? – Arris

Answer 8

This seems to work without any issues. The class "open" already exists with bootstrap and should be working, but for some reason it isn't. This code forces it to run accordingly. :)

    jQuery(document).ready(function($) {
    $("li.dropdown").click(function(e){
        $(this).toggleClass("open");
        });
    });

Vondavonni

Answer 9

Looks like it is all working to me, maybe try replacing your bootstrap files with a fresh copy incase you accidentally messed anything up in there. Or if that does not work, make sure you are importing everything. Are you sure you are importing all the CSS and the JS files?

Altercate

Unfortunately I have tried re-adding Bootstrap about 5 times. Everything is all there out of the box. I'm really stuck on this one — weird behaviour for no reason. As I said before, it all works fine on desktop but obviously that's not where it's going to be in use :) – Decolonize

Answer 10

When you click on the dropdown, it adds the open class to your <li class="dropdown"> giving you: <li class="dropdown open">. When you click a link on the dropdown menu or the 'Menu item 2 (dropdown)', the open class is removed causing the dropmenu to fold up again.

The below fiddle shows how to stop the click event from propagating, but may cause you issues else where. Also, I only prevented the propagation on item #1 in the dropdown. You can use jQuery to have this happen on all items of the dropdown.

JS Fiddle: http://jsfiddle.net/yDjw8/2/

Laborsaving

Answer 11

I am using bootstrap-3.3.1 and I am experiencing the same problem in a Android phonegap app.

I found a funny workaround after several trials and errors:

// clueless hack here!!!! otherwise dropdown menu doesn't work
$('.dropdown-toggle').dropdown('toggle');
$('.dropdown-toggle').dropdown('toggle');

Issuance

Yes, this works for me. I don't know why stated it twice it works. – Biak

ok, this works... but it really falls into the "why does THIS work" kind of things. – Neelon

Answer 12

adding role="button" to <a href="#" class="dropdown-toggle" data-toggle="dropdown">Menu Item 2 (Dropdown)<b class="caret"></b></a> worked for me

<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button">Menu Item 2 (Dropdown)<b class="caret"></b></a>

Chemiluminescence

Answer 13

jquery-1.11.2, bootstrap-3.3.2:

$('#yourId').on('hidden.bs.dropdown', function (){
    $(this).click(function (event) {
       $('.dropdown-toggle').dropdown('toggle'); 
    });
});

Mexicali

It would be helpful if you elaborated on the cause of the problem, and why your solution works. – Luteal

is work on me cause i use the dropdown.js from bootstrap. and same error happen. – Mexicali

My comment is really about providing information in your answer rather than just providing a code snippet. It's generally more helpful to explain rather than just saying "here, this works". – Luteal

Answer 14

I reckon if you do the following, the links will work properly

$(document).ready(function(){
            $('.youClass').click(function(){
                var menuItem = '<a class=" " href=" ">Log Out</a>';

                $('.anotherClass').append('<li class=".youClass">'+ menuItem +'</li>');

            });
        });

Hyperboloid

Answer 15

I have to worked with Bootatrap v2.2.1. Dropdown was worked on desktop but immediately closing after opening on mobile.

And I think the problem is that old version doesn't expect to be work with touchable devices.

So my fix based on preventing some touch events:

$('a.dropdown-toggle').on('touchstart', function (e) {
  e.preventDefault();
});

In rare cases, you may need to add:

  $('a.dropdown-toggle').on('touchmove', function (e) {
      e.preventDefault();
  });

  $('a.dropdown-toggle').on('touchcancel', function (e) {
      e.preventDefault();
  });

Monarski