How to disable 'open menu on hover' on smaller screen sizes

I have a website that has a dropdown menu. I want that drop down menu to drop down when the user hovers.

However, when viewing my site on mobile, I want the drop down to only work when the arrow is touched. This way mobile users can easily see the menu since they don’t have the ability to hover.

I can probably do this through some javascript when I export. But is there a way to do this in webflow while I still haven’t exported the project?

When a Navbar behaves differently from desktop to mobile (and that’s often, as it’s a very important piece of design, and as I never hide menus behind a hamburger element on mobile, which I think is a very very bad idea), I build 2 versions: one for desktop, and one for touch devices. I’ll hide the desktop one on mobiles and the mobile one for desktop. It’s 2 elments to maintain instead of one, but desktop and touch devices are very different, and hover on desktop is an important interaction. I think this is tiotally justified to duplicate elments in that case. Moreover, a navbar is usually very light in weight.

You can also only duplicate the dopdown item, give it a different class, style it for touch devices and hide it for desktop, hiding the original dropwdown item for touch devices.

1 Like

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