Streaming live at 10am (PST)

Dropdown on hover for desktop, but on click for mobile


#1

What is the best approach for a navigation with dropdown on hover for desktop but dropdown on click for mobile?

Thanks,
Josh


#2

I'd say 2 versions of the dropdown. One set to appear only on desktop and one set to appear on handsets. Once you've put a :hover property on something, it will force you to double tap to click on mobile.


#3

Thanks Vincent. I will give that a shot.


#4

I tend to always do a nav duplicate for mobile. Webflow automates a hamburger styled menu, but those menus aren't well perceived as menus by the visitors. So for the last two devices, I try to go more towards a bottom app menu, like facebook and many other do.

I keep the 4 more important links and put the other under the More... hamburger menu. (hanburger yes, but with a label).

For this menu to work, it's mandatory to use a dropdown and to tweak it. Because custom made menu will end up with a bug, because of how the click trigger works (first click, second click). It doesn't take into account a click on a menu item, so it's never perfect. I'm working on replacing this with a dropdown currently.


#5