I’m new to webflow and have been playing around with its awesome features. I decided to try and replicate the webflow.com menu since they said the site is built using webflow. Figured I’d learn a lot about the app trying to replicate it, including using interactions.
I came across a small issue that I’m not sure how to accomplish. I’m able to get the navigation links to go from all white, to only the hovered button white while the rest dim to a gray. To do this, I use a mouse hover interaction, apply it to the whole class, then make sure it only affects siblings with the class.
Works great and I don’t have to go change each element individually. However, Now I’m at the stage of adding the dropdown div which appears on hover of one of the navigation links. The div pops up great. And to keep it visible, I also have a mouse hover interaction over the div block so that it doesn’t just go away after I move off the nav link.
The problem I’m facing is as soon as I hover off the nav link, they all go back to their initial state of white. This doesn’t happen on the webflow.com website. The button stays white while the rest stay dimmed.
Is the only way to accomplish this by getting rid of the class/sibling interaction, and instead go one by one on each nav link and make interactions for each element? Then apply those same interactions to the div dropdown so that the buttons stay in the hover state? Was hoping I’m just missing something. Should I be using the dropdown menu option in the nav setting? I’ve avoided it up until now.