Solving The Double Tap Issue on iOS Devices

It's been pointed out by our users that some menus behave strangely on Apple touch devices. The menu links can be accessed only after two taps on the screen because the first tap acts like a hover event. Most of us see that as a problem, but it's actually the way it was intended. When there is an element that is displayed or hidden on hover, the first tap acts as hover. That way you don't miss out important content.

Fortunately, our responsive menus don't have this issue, because the hover events are removed on mobile devices. The menu and the submenus can be toggled with a single tap, while the links can be accessed the same way. If you're encountering this behavior while using one of our responsive menus, make sure your website has the meta viewport tag (must be added to the head):

<meta name="viewport" content="width=device-width, initial-scale=1"/>  

If you're not using one of the responsive menus and you don't want this behavior on your website, you can remove it by using this simple jQuery script:

$(document).ready(function() {
  $("a").on("click touchend", function(e) {
    var el = $(this);
    var link = el.attr("href");
    window.location = link;
  });
});

The touchend event will redirect the browser to the target of the link as soon as the tap finishes.

That's it! I hope you found this article useful. If you have any question, leave a comment.