Links in dropdown menu not firing on iPad

[joeynguyen]

I'm using the data-toggle="dropdown" attribute and the links aren't working for me on the iPad. The dropdown menu fades out, but the page doesn't load the link in the href URL. Am I doing something wrong?

Also on iPad, if one dropdown is already visible, clicking on another top menu link to get another dropdown to appear requires 2 clicks on that other link which isn't a great user experience. It works fine on desktop (only one click is needed).

Here is my jsfiddle - http://jsfiddle.net/joeynguyen/SYLb8/10/ (You'll have to scroll to the right to see the menu buttons). Thanks.

[twbs-lmvtfy]

Hi @joeynguyen!

You appear to have posted a live example (http://jsfiddle.net/joeynguyen/SYLb8/10/show/), which is always a good first step.
However, according to the HTML5 validator, your example has some validation errors, which might be causing your issue:

• line 2855, column 8: An body start tag seen but an element of the same type was already open.
• line 2944, column 7: Saw an end tag after body had been closed.

You'll need to fix these errors and post a revised example before we can proceed further.
Thanks!

(Please note that this is a fully automated comment.)

[joeynguyen]

Updated fiddle - http://jsfiddle.net/joeynguyen/SYLb8/12/

[cvrebert]

@twbs-lmvtfy Great Success!

[cvrebert]

@joeynguyen Your example has a bunch of probably-irrelevant custom CSS; please remove as much of it as possible.

[cvrebert]

Also on iPad, if one dropdown is already visible, clicking on another top menu link to get another dropdown to appear requires 2 clicks on that other link which isn't a great user experience. It works fine on desktop (only one click is needed).

Pretty sure that's the intended behavior; I believe it was the best we could do given the limitations of mobile browsers. Although I can't find if/where we state that in our docs.

[joeynguyen]

Sorry about the extraneous CSS. I've removed as much as I could find - http://jsfiddle.net/joeynguyen/SYLb8/16/

[hnrch02]

Yeah, we do this because otherwise dropdowns wouldn't close when a user clicks taps anywhere else than the dropdown on mobile, see this line in dropdown.js. This is also mentioned in the docs, although it doesn't say that we only do this on mobile:

[...] When opened, the plugin also adds .dropdown-backdrop as a click area for closing dropdown menus when clicking outside the menu. [...]

http://getbootstrap.com/javascript/#dropdowns-usage

[hnrch02]

I guess you could try and fiddle around with z-index and try to position the navbar links over the backdrop to get your specific implementation working. Not sure this is going to work though.

[joeynguyen]

Thanks Heinrich! That was definitely the problem. The .dropdown-backdrop had a z-index of 990 (higher than my dropdown menu) so I guess my click/tap on the menu item didn't really register. The weird thing though is that the animation on the link does happen as though it registered the click (menu item link changes colors as though it WAS clicked on) but that's not your fault.

It was my fault for not using the .dropdown-menu class which has a z-index of 1000 because I didn't want the rest of the styles associated with that class.