Twitter Bootstrap dropdown hover touch devices workaround (iPad, iPhone, Galaxy, etc…)

UPDATE 11/01/2013: Thanks to Robin for pointing this out, the recent Bootstrap 2.2.2 release has addressed this issue. Refer to their changelog for details.

Ran into an issue today during development where I was updating my company’s code source from Twitter Bootstrap 2.03 to 2.2.1.

All was fine and dandy until I was doing some cross-device testing, specifically on the iPad and the iPhone.

The touch events stopped working on the Twitter Bootstrap dropdown hover menus. When you try to click on the menu item and attempt to swipe down or anywhere, the menu would disappear.

This is also happening on the official examples and Twitter Bootstrap dropdown hover documentation:

A workaround to this that I have implemented in JS, without having to touch the original code base, is to disable the .on() event handler on the element.

Therefore add the following line to your code source:

Until Twitter Bootstrap releases a fix for this, the code will remain in my code base for now…

For more information, see

Comments (3)

  • Robin says:

    Hi Peter! Good post. You could update it with the latest information; Twitter has updated Bootstrap to version 2.2.2 and fixed the dropdown issue. I wrote a small post about it here:

  • Peter Tran says:

    Updated! Thanks for bringing this to my attention Robin 🙂

  • Robin says:

    You’re welcome Peter. Thanks for linking to my blog 🙂

  • Leave a Reply

    Your email address will not be published. Required fields are marked *

    This site uses Akismet to reduce spam. Learn how your comment data is processed.