2

Working on a new website for a client, and have come across a major issue to do with touch devices.

The hover drop downs work perfectly on a mouse-based system, but on touch, the click takes you straight to the parent page and never shows the drop down. I meed to know how to fix this.

Thanks in advance people!

Site: www.weareeternity.com

Jono Thorne
  • 51
  • 1
  • 9

1 Answers1

0

Please see What was the thinking behind the implementation of the dropdown menu in Twitter Bootstrap? for more insight on why Bootstrap is natively click-only.

Essentially, Bootstrap was designed NOT to work with hover because it is a mobile-first platform. The hover event can't be called with a touch device and Bootstrap 3 parents were never designed to be clicked and navigated to, they were only to provide access to the children.

There is no real "fix" for this. Probably not the answer you're looking for. When working with sites that require this functionality, we use a different menu system.

You could try checking out the code at http://ccbra.ro/ (by http://themesandco.com/snippet/menu-hover-dropdowns-parent-links-mobile-friendly/). They made the drop event activated by the caret in mobile on click.

You could also have two menus.

Community
  • 1
  • 1
Aibrean
  • 6,297
  • 1
  • 22
  • 38
  • "The hover event can't be called with a touch device" [Well, actually...](http://www.nczonline.net/blog/2012/07/05/ios-has-a-hover-problem/) – cvrebert Dec 17 '14 at 20:19