Mobile nav issue on iPhone (requires double tap to expand sub menu)

I’ve been building a site for a client with the Mins child theme for Wordpress at:

http://nps.kickingdesigns.com

When viewing the main navigation on Safari on an iPhone it take two taps to view the sub menus when it should be just one tap:

In all other browsers, mobile or not it requires only one tap as expected. I’m not a JavaScript expert, but would anyone be able to shed light as to why this might be happening and if it can be fixed (with a couple lines of JavaScript hopefully)?

Thanks in advance!

Tim

If you don’t get any help here, I would suggest you email the Mins theme about this issue.

I don’t have an iPhone to test with, and so I don’t get that menu displayed like that. My guess would be that Safari is using the first touch event as a “focus” instead of a “click”.

The only Mins theme I could find is a child theme that appears to be mostly about SCSS. Do you have a parent theme, is the theme at https://wordpress.org/themes/ ?

Thanks - it’s a child theme for a theme called Primer. After some searching I found the Github site for it and I’ll submit an issue and see if they can assist.

https://github.com/godaddy/wp-mins-theme/

Thanks for taking the time to respond.

Just a quick follow up to this. I found what the actual problem was - there’s a great explanation at CSS Tricks:

https://css-tricks.com/annoying-mobile-double-tap-link-issue/

Through that article I found out about a small script called Fastclick:

https://labs.ft.com/fastclick/

It’s not meant for this exact problem, but it did remedy my situation and hasn’t caused any other issues as far as I can tell.

2 Likes

I regularly use fastclick for my iOS apps so the action works quickly on tapping instead of pausing briefly. Hope it works for you.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.