Streaming live at 10am (PST)

Hover for dropdown menus


#1

Hey I haven't been able to find the answer in the Forums for this. I'm trying to set my Dropdown menus in my NavBar to show up when I hover over them, rather than click.

Is this possible?

Thanks!


#2

Yes you can duplicate this site to check how it's made:

http://sab.webflow.io/menu-in-dropdown-menu

It requires a few tricks, one interaction on the menu item and one on the list item. Note that the list item has a upper negative margin to move it up, and a padding to moves its content down the same value, in order to catch the hoverout event on the list even if the mouse stays on the menu item and doesn't hover the list content.


#3

Thank you! Will the drop down function normally on the mobile versions? Will it still be click to open on mobile?


#4

There are no hover on mobile, also when you start to hack the navbar like that, don't fight to make it work as desired on mobile. Make a second navbar that you only show for mobile while you hide the desktop one for these devices. I used to think it was a dirty hack but now all my projects have a different set of nav elements for devices because mobile deserve another kind of experience.


#5

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