I have a dropdown menu in my navbar where we want to be able to fade the dropdown when hovering the link, but at the moment it just displays the dropdown without any transition.
Is there a functionality by default or a work-around in web flow to get this effect?
Best,
Thales
Click on the Navbar, then go to interactions and click “On Select Element”. You’ll see dropdown in the list on top. It’s not there until you drag in that type of element and click on it.
Hi Gary,
thanks for the quick reply.
The answer is not clear yet to me. I already have the dropdown toggle in there and the dropdown shows up. All i’m trying to do is to add a transition, but it doesn’t seem to have any option for a transition in the menu. Does that make sense?
Yes, you have to be on “Dropdown”, then you can go to interactions, Click “On Selected Element”, Click (+), then you’ll see dropdown in the list.
One more thing, it’s best to click on the “Dropdown List” - FIRST! To set the “On Page Load”. You’ll set it to “Set as initial State”, to move -100%. Use percent to move up & return.
You can try px, but it may not move up far enough.
It sort of works now, I can do the Fade-in on mouse hover and Fade-out on mouse out. The only issue I’m having is that when I hover the dropdown items, it fades out, and I have already set the interaction to the entire dropdown, not only the toggle.
Is there a step i’m missing here?
Oh oh… yeah currently Webflow doesn’t have an “Active” hover functionality available. So when the hover is on the button/element, then you move to the dropdown, it goes away. It’s an active state on hover. There are workarounds to this if you want to take the steps. Here’s an example of the hover working:
