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.
This topic was automatically closed after 60 days. New replies are no longer allowed.