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.

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. — Michael Freake, Jun 18 '13 at 21:12
Thanks for this @MichaelFreake — I have changed the hosting to dropbox - any better? — Stuart, Jun 18 '13 at 21:27
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. — Michael Freake, Jun 18 '13 at 21:42

score 59 · Accepted Answer · edited May 23 '17 at 12:34

59

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

edited May 23 '17 at 12:34

Community

1
1

answered Jul 24 '13 at 18:11

Jollyra

703
5
13

Thanks , this works perfectly after hours of surfing on the web T_T, thanks ! – Daniel Flores Sep 18 '14 at 06:05
1

This solution not seems to work with bootstrap 3.3.6 :/ – Guillaume May 15 '16 at 16:00
1

This is not a 'solution'. – zilj Oct 03 '16 at 13:44

score 13 · Answer 2 · edited Feb 26 '17 at 03:50

13

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.

edited Feb 26 '17 at 03:50

Nil

129
4
11

answered Aug 07 '13 at 15:10

asbanks

131
2

1

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 @Jollyra got there first! – Stuart Aug 09 '13 at 11:37
1

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: http://stackoverflow.com/a/25041753/437019 – Yossi Shasho Jul 30 '14 at 16:07
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? – karisma Nov 07 '20 at 09:30

score 9 · Answer 3 · answered Mar 11 '14 at 06:52

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);
});

This. Thank you so much mate. – Josue Alexander Ibarra Feb 26 '16 at 00:13 — Josue Alexander Ibarra, Feb 26 '16 at 00:13

score 4 · Answer 4 · answered Jan 08 '14 at 14:05

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! :)

best solution, worked for me perfectly for old versions of BS. Thanks! — Aslam, Apr 17 '14 at 10:57

score 4 · Answer 5 · answered Mar 28 '14 at 16:14

4

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.

answered Mar 28 '14 at 16:14

Duncan Micahel-MacGregor

41
2

This question is quite old now, however at the time of writing, I had already tried this various times. – Stuart Mar 28 '14 at 16:18
Worked for me, going from BS 3.7.1 to BS 4.1.3 – PruitIgoe Nov 21 '18 at 13:36

score 4 · Answer 6 · answered Jul 10 '15 at 08:08

4

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!!!

answered Jul 10 '15 at 08:08

Jigar Trivedi

131
1
3

score 2 · Answer 7 · edited May 23 '17 at 10:31

2

This fix is for Bootstrap 2.3.2, and its based on the answer by @asbanks (https://stackoverflow.com/a/18107103/437019).

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");
  }
});

edited May 23 '17 at 10:31

Community

1
1

answered Jul 30 '14 at 16:10

Yossi Shasho

3,632
31
47

This code, as-is, fixed my issue even on Bootstrap 3.3.7 – CopyJosh May 08 '17 at 21:45
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? – karisma Nov 07 '20 at 09:19

score 2 · Answer 8 · answered Apr 20 '16 at 18:01

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");
        });
    });

score 1 · Answer 9 · answered Jun 18 '13 at 21:50

1

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?

answered Jun 18 '13 at 21:50

1

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 :) – Stuart Jun 18 '13 at 22:22

score 1 · Answer 10 · answered Jun 19 '13 at 20:17

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/

score 1 · Answer 11 · answered Jan 03 '15 at 23:42

1

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');

answered Jan 03 '15 at 23:42

Miao ZhiCheng

617
7
9

Yes, this works for me. I don't know why stated it twice it works. – Raza Oct 31 '15 at 00:26
ok, this works... but it really falls into the "why does THIS work" kind of things. – Abela May 18 '16 at 01:50

score 1 · Answer 12 · answered Jan 19 '17 at 06:36

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>

score 0 · Answer 13 · edited Feb 15 '15 at 20:52

0

jquery-1.11.2, bootstrap-3.3.2:

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

edited Feb 15 '15 at 20:52

gvlasov

18,638
21
74
110

answered Feb 15 '15 at 20:48

Ferry

1
1

It would be helpful if you elaborated on the cause of the problem, and why your solution works. – Jon Surrell Feb 15 '15 at 21:19
is work on me cause i use the dropdown.js from bootstrap. and same error happen. – Ferry Oct 06 '16 at 08:02
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". – Jon Surrell Oct 06 '16 at 08:49

score 0 · Answer 14 · answered Mar 08 '16 at 04:55

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>');

            });
        });

Galina · Answer 15 · 2021-01-28T05:04:03.557

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();
  });

Bootstrap v2 Dropdown Navigation not working on Mobile Browsers

15 Answers15

Linked