iPad requires double tap to action link?

Hey guys

I should have seen this error a while back but a new project has shown me that has been a long standing problem.

The CSS3 mega menu works fine on all devices except iPad due to the use of a :hover state which forces the user to double tap any link to get the link to function.

I'm not added this hover via custom css, it's the inbuilt hover function.

I'm using Mega Menu module/package 1.0.3 and Mega Menu Framework 3.2.2 and CSS3 Mega Menu Framework v1

Here are 4 different websites all with the same issue -

bit.ly/1QDAqNC
bit.ly/25L4U8w
bit.ly/1tg3lyg
bit.ly/1UyobOP

Menu links work on in desktop & mobile (phone) layout but no iPad click/touch ? If you double tap in iPad the link works.

Not sure if this might help cssmenumaker.com/blog/solving-the-double...issue-on-ios-devices or discussions.apple.com/message/21680809#21680809

I've checked your demo on the iPad and that works ok, in all cases I'm using the CSS3 Mega Menu as installed, of course colours and fonts have changed but nothing else?

Any ideas how to solve the problem?

Many thanks,

Hi HaiND

Thanks, which site do you need access to?

The first one, with the background set to white has been set via the CSS3 Mega Menu settings, not by an override css file - FYI.

Thanks Martin

PM Sent

Thanks HaiND

I agree with you about the layout on phone and also iPad in portrait layout. However mobile style drop down menu style doesn't happen on iPad in landscape view.

In landscape view the menu is shown in the same style as desktop - horizontal below logo and above contents.

I have cleared the cache on my iPad browser (safari on iOS 9.3.2) and i still need to double tap to get links to action.

I know browsers that emulate iPad screen sizes will work, but a real iPad doesn't.

Is it possible you can confirm?

thanks

Hi HaiND

Ok, well I have solved the issue although I'm not sure why. I've deleted and reinstalled the whole CSS3 Mega Menu package and then re added my customisations. I have noticed that the css file stops being updated after the first time.

What I mean is anything in /mod_jux_megamenucss3/assets/css/style/*.css does not get updated by changing the joomla module settings. So if I remove a background color, set a padding value these do not get added to the css file? No sure why ?

Anyway I've edited this file myself to style the menu how I want, and the menu now works on iPad.

Not sure if you want to follow up on the module updates not getting written to CSS but I'll leave that to you.

thanks,