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.
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:
To demonstrate, here is a duplicate of the icon at its real size along your version:
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:
I’m sorry if I’m annoying : ) Can resist about pixel perfect : )