Streaming live at 10am (PST)

Dropdown Nav Hover Help

#1

This is similar to a previous post but I have spent hours watching videos and searching without success. I am new to webflow and just can’t figure this out.

I have created a custom dropdown just like the webflow university video except on hover instead of click. I like how it looks but have three problems.

  1. On hover the drop down opens and when I scroll down to click a link the dropdown immediately closes. How do i make it stay open until the user with clicks a link or moves to a different menu?

  2. When I move into the drop down the hover state disappears. How do I make it stay active until the user leaves the dropdown.

  3. On the workspace how do I close the navigation so it is not in the way?

Hoping someone can point me to a video or step by step instructions. I’m new to webflow and a visual learner. Please help!


Here is my site Read-Only: https://preview.webflow.com/preview/prestoncitybible?utm_source=prestoncitybible&preview=536eb1ed79c69da1ace26cbb9cf746c4

Here is temp site https://prestoncitybible.webflow.io/

#2

Hello @athibeault

There are a couple of things that you need to consider in order to make this work.

Because you’re changing the trigger interaction from click to hover the animations changes a bit because the ‘trigger div’ it’s not longer the only thing here to take into account.

Here’s a small video showing you how you can fix the hover issue.

And here’s a small video showing you how to fix the hover colour until you hover out of the dropdown.

I’m recording the other solution for the third part and I’ll update this answer once I’m done.

1 Like
#3

This is AWESOME! So I need to do it on the wrapper div block. Makes total sense now that I see it. Thanks!! Looking forward to the next video.

1 Like
#4

Just wanted to thank you again. I made some changes and was hoping you could answer 1 more question. When hovering over to the nest menu item it drops down a blue box and then rolls up. So you know how to fix this? I am hoping I don’t have to make a new class for each dropdown.

thanks again

#5

Sorry for the delay

Here’s a small video to avoid having the menu on the designer and that helps a bit with the rolling up issue as well, you just need to play around with delay time and transition time.

Hope this helps.

1 Like