0

I have a problem with some link in the upper menu of the account and the language selection of this site: shop.castorfashion.it.

When viewed from a mobile device (both android and ios) menus need to be tapped twice to work. I can't find a solution to solve the problem.

The site was created using prestashop.

  • Account menu:

    Account menu

  • Languages menu:

    Languages menu

Thank you.

Lorenzo Belfanti
  • 1,205
  • 3
  • 25
  • 51

1 Answers1

1

I just tried your site on my iPad and the double tab comes from the hover style. You can remove it with media queries.

@media only screen and (min-width: 1000px) { 
    #topbar a:hover { 
        color: #79c753; 
    } 
}

You still have som main hover styles in your site.

Screenshot

user2243885
  • 73
  • 5
  • Can you explain how to solve? I can not understand what media queries I have to do – Lorenzo Belfanti Feb 08 '19 at 12:34
  • 1
    I would add a media query for targeting screen devices above 1000px and then add the hover to the links. @media only screen and (min-width: 1000px) { #topbar a:hover { color: #666666; } } – user2243885 Feb 08 '19 at 13:25
  • I try to put that code in my css but it doesn't work – Lorenzo Belfanti Feb 08 '19 at 13:46
  • Did you remove the original hover style? #topbar a:hover { color: #79c753; } – user2243885 Feb 08 '19 at 13:48
  • 1
    I would use pointer:coarse as a media query rather than the size of the screen. The later would disable the hover effect on small windows and enable it on large tablets.. – Quentin Roy Feb 08 '19 at 13:52
  • @user2243885 i have removed the original hover style (in a sandbox site) but the problem still there. Now change that the link does not turn green when we hover on it (from Desktop). – Lorenzo Belfanti Feb 08 '19 at 13:56
  • I believe I used this colour code (#666666) in my example by mistake, change it to #79c753 – user2243885 Feb 08 '19 at 14:11
  • @user2243885 i have change the color with `#79c753` and i remove che original hover style from `global.css`. It doesn't work. – Lorenzo Belfanti Feb 08 '19 at 14:20
  • 1
    This article from "CSS Tricks" is also very good regarding the issue. [link](https://css-tricks.com/annoying-mobile-double-tap-link-issue/) – user2243885 Feb 08 '19 at 14:46
  • 1
    I tried making a fast copy of your site for applying some of the different CSS techniques and sadly none of them worked! So, I am sorry to say that it's not enough, with just removing the hover that i was pretty sure of. if it was me I would try looking into some jQuery. [Try this approach](https://stackoverflow.com/questions/3038898/ipad-iphone-hover-problem-causes-the-user-to-double-click-a-link) – user2243885 Feb 09 '19 at 07:51