dropdowns within sitenav are broke mobile [stop reposting this issue]

[racl101]

I had a project using more or less the same menu and it worked. Found out it was using Bootstrap version 2.3.1. Compared version 2.3.2 and 2.3.1 and found that in version 2.3.2 there's this snippet of CSS that reads:

.dropdown-backdrop {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  z-index: 990;
}

and the rule: position: fixed; seems to cause all the problems.

I still don't undertand the point of the markup that is added by the bootstrap dropdown plugin:

<div class="dropdown-backdrop"></div>

So I've temporarily fixed the bug on my end by adding a style to override the style causing the problem:

.dropdown-backdrop {
    position: static;
}

To me this looks like a bug introduced from version 2.3.1 to 2.3.2. Maybe I'm wrong. If someone could explain the purpose of the empty div, it would be helpful.

[cvrebert]

Sounds like the same problem discussed in the recent comments of #7118.

[orokusaki]

Just to reiterate my comment in #4756:

This is still an issue on iPhone, using the latest version downloaded from the website.

[fat]

what version of iphone?

[fat]

it works perfectly on my iphone in the docs…

[fat]

the empty div is a hack for iphone.

[fat]

oh dropdowns within sitenav. -- edited your title

[fleaflicker]

@fat it affects the collapsed-state of the navbar if the navbar has submenu items. I'm running iPhone 4 with iOS 6.1.3.

You can reproduce the issue on the docs that are currently live on http://twitter.github.io/bootstrap/ (version 2.3.2). The example of the collapsed navbar has 2 items with dropdown submenu items.

[fat]

@fleaflicker yeah got it – hadn't realized that initially, probably get to a fix next week when i get back from nyc

[mistermendez]

@racl101 's solution (1st post) worked for me

[lesterchan]

Wow thanks @racl101 fix works for me too!

[LiamDawe]

This issue seems to affect the standard browser on Android on Galaxy S2 and also on Chrome on the Nexus 7 tab verified by myself and other users of my website. It does not affect firefox on the Nexus 7 though.

I can confirm that small css addition in the OP fixes it with no drawbacks I can see on my website as well.

[jhauraw]

+1 on @racl101's first post above. Solved the issue for me in 2.3.2.

[mpccolorado]

+1 on @racl101's first post above. Solved the issue for me in 2.3.2.

[BinaryKitten]

+1 on @racl101's first post. This issue caused massive headaches with 2.3.2 and thanks for the fix @racl101

[andrewhood125]

I'm having this issue on iOS6 and iOS7 Safari and Chrome. The fix described by @racl101 fixed the problem. Thank you.

[tkandala]

+1 on @racl101's post.. It solved my issue by just adding the small css snippet

[cvrebert]

Thanks everyone, we don't need any further confirmations that the suggested fix seems to work for people.

[leizl6]

@racl101's post does not solve my problem on iphone 4s using 2.3.2 bootstrap..pls help.
this is the site i'm working. http://www.granitepremiumfunding.com/

[MarcoSpoor]

1st Post fixed the problem for me (using 2.3.2)

[leizl6]

hi marcor6. can you post your site here?i'll view it on my iphone..tnx

[grayghostvisuals]

Since I'm using this fix for a project at work I'm posting here to keep updated on the actual fix that is decided upon while we're using this temp fix.

[Daniel-Seo]

@racl101 Thanks! You save my life! 👍

[cnisvcs]

This fix works on my site using Bootstrap 2.3.2. Tested on iPod Touch 5, Android based touchpad and Android smartphone. Thanks racl101!

[edwardball]

Just to reiterate what @racl101 said, can somebody explain exactly why the empty <div class="dropdown-backdrop"></div> is needed? The comments in the code say "if mobile we we use a backdrop because click events don't delegate". So to see what happens without the div being added, I commented out the line in the javascript which inserts it. I loaded up the page and it works perfectly on my iPhone without it.

[lechup]

@fat said:

the empty div is a hack for iphone on dropdowns within site nav

Maybe he will find some time elaborate on it? I find it useless on Android but do not own iPhone to test thorouly... Maybe some fancy/hacky menu hiding? But it would require relative/absolute position and z-index stuff on both .dropdown-menu and .dropdown-backdrop.

Same solution as position: static; is giving

.dropdown-backdrop {
  display: none;
}

Why do we need it then?

[PikachuEXE]

I hide the .dropdown-backdrop and still working well on iPhone
What is the "fix" for?

[sebheg]

Found that when upgraded from TB 2.3.1 to TB 2.3.2, my navbar second level menu items weren't working anymore (the night before the project built with TB was to go live).

The fix in the first post worked for me as well (using iPhone 4 running iOS 6). Don't know about Android and other mobile OS.

The deskop, when resized to mobile width, was never affected by this anyway...

Thanks @racl101 !!

[fat]

settle down im going to fix it right now. :P

[fat]

oh lol… well we've changed how they work in 3.0.0… sooo jk. just going to close this.

[fat]

dropdowns in 3 btdubs

[davidensinger]

I see that this (and all other issues) are closed in anticipation of the 3.0 release, but I'd still appreciate it if anyone could figure out a solution. Surely I can't be the only person who needs to resolve this :) I'll duly report back if I find a fix too.

[lechup]

See first post :)

[gator92]

So if you're pulling from the cdn, you'd have to use the style change suggested by @racl101, which does the trick! I guess there won't be a service update for the version 2 branch such as 2.3.3, since 3.0 will be the end-all be-all of css frameworks.

[davidensinger]

Yes, the change by racl101 fixes this particular bug, but at the expense of tapping outside a dropdown to close it in mobile. See [https://github.com//issues/7819](Issue #7819). The fixes for both bugs seem to be mutually exclusive, which is why this particular fix does not work for me (and presumably others as well). I do appreciate the well intentioned suggestions, though!

[yeremenko]

Could not find a fix using js. your css fix worked perfectly.

[fivefishstudios]

racl101 -- thanks! Works great.

[designbydarren]

I came across this issue on a one page template when using a Samsung Galaxy Mini with Bootstrap 3.0. The fix I implemented was adding a high z-index to the links within the menu (I used z-index: 1000;).

.navbar ul.nav li a {
    z-index: 1000;
}

I tried various methods to fix it, including that above. But this was the solution that worked for me (some of the other methods I tried made the nav links only 'tappable' when the nav was at the top of the screen).

Note - I'm using navbar-fixed-top.