How to make OnHover interactions NOT display on touch devices...?

Hi all

I’m having a slight issue with a navigation menu that I’ve created. For desktop users I want the supermenu navigation to appear on mouse-over but for touch users I want them to simply tap the link and go to the page behind it. At the moment on a touch device it’s trying to display the supermenu overlay navigation when I select the nav item and then I have to tap the item a second time to go to the page.

I’ve heard of such issues before when working with developers in the past. I suspect I need to do something beyond my limitations here.

Hope you can help.


Here is my public share link: [LINK][1]
([how to access public share link][2])

[1]: https://preview.webflow.com/preview/vce?preview=81c3b9c9832daff0647280f7e7d8d276 [2]: How to Enable a Webflow Share Link - Webflow Tips - Forum | Webflow

There is nothing wrong with admiting that responsivity has limits. And Webflow, as powerful as it is, has some too, but we can easily work with.

The easiest and accessible to anyone solution here is duplicating your menu element. You will hide the mobile-touch version from desktop and hide the desktop version from mobile. Of course, the mobile version won’t have the interaction set on. And now, you can take this occasion to craft more differences between the to versions, really think about the mobile experience and try to transform this minor issue into an advantage.

By the way, very nice and sleek design you have here, it’s clean. Can I say something though?

The bicolor icons are very nice, but as you’re not using them at their given size, as pixel perfect, they appear very blurry.

http://vincent.polenordstudio.fr/snap/tmaqk.jpg

The designer of the icon has worked it in a pixel grid so it’s as sharp as it can be (although it’s not the best icon work I’ve seen, there are still blurry edges. Here is the original icon zoomed:

http://vincent.polenordstudio.fr/snap/f178i.jpg

To demonstrate, here is a duplicate of the icon at its real size along your version:

http://vincent.polenordstudio.fr/snap/r1t2j.jpg

On the right, when used at a different size, all the edges are blurry.

So icons are to be used at given size. That’s why professional packs of icons are given at various sizes, like 24px, 30px, 48px, 60px, 72px, 90px, 96px, 120px. It’s also the sizes you need for Android and iOS at 1x 2x and 3x.

You could say I’m picky about this, and I am a bit, but if you look in context, the text is super sharp and the icon is not:

http://vincent.polenordstudio.fr/snap/ywfv3.jpg

I’m sorry if I’m annoying : ) Can resist about pixel perfect : )

Thanks very much for your response Vincent. I suspected I might have to take the approach that you described but it’s good to know that it’s the optimal way.

As for the icons, yep! It’s on my list!

  • P
1 Like

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