mauricemoss mauricemoss - 14 days ago 9
CSS Question

Foundation Top Bar / Menu Vertical Dropdown not clickable on Tablets

I'm using Foundation 6.2.4 for my current project and just stumbled upon an issue with the dropdown-behavior in top-bar.

If visited via tablet the dropdown-links in top-bar open and show their subitems just as expected, but the subitems are not clickable. Instead, the dropdown disappears and nothing happens. On Desktop behaviour is just as expected and everthing is working fine.

You can have a look at this behaviour in the Foundation Docs: http://foundation.zurb.com/sites/docs/top-bar.html
Just set your inspector to emulate a mobile device - e.g. iPad and try to click on of the subitems of "One".

Would be great to have some ideas how to make this work as expected on tablets as well.

Thanks in advance!
Frank

Foundation Docs: Top Bar and Dropdown (menu vertical)

Answer

Apparently this bug was reported 28 days ago and will be fixed in Foundation 6.3. In the meantime, you can read about the issue and a temporary fix here: https://github.com/zurb/foundation-sites/issues/9293

The fix:

The 'click' event is being fired when you touch any of the submenu items. You can temporarily work around it by adding a data-close-on-click-inside="false" attribute to the dropdown menu.