Im hoping someone can help me with my Mega menu drop down. I have built the menus as containers that appear on hover using interactions.
I’m having trouble keeping the mega menu visible when the mouse moves down off the button and onto the menu (to click a link in the menu). Every time I move the mouse off the button the menu disappears. I have set a hover trigger on both the button and the menu.
I have been pulling my hair out for a week trying to figure this out! any help would be great.
So I don’t think it will work the way you have it set up unfortunately. What’s happening right now is expected from what you’re telling it to do. Hover on the button - show. Hover off the button - hide.
To do this, you’ll need to use a dropdown menu. I created one here on www.pipeandstrutsupports.co.uk on the main menu, you just make it bigger than it’s default and you even add collections into them. You’ll need to create one, then copy it and edit the content accordingly.
The latter is actually easier to set up in my opinion.
Hi,
I understand what you’re trying to do. I found the easiest way is to create 1 panel so to speak. To get the hover to stay open, Webflow currently does not have an ‘Active’ hover state. You need to wrap all the content inside 1 div. Then the trigger needs to be inside that div, as well as, all the content.
When you create one, make sure to use the trigger as a Class, not an element. Then make one and copy it how many times you need. It’s kind of hard to explain in text. I have my Style Guide, where you can look and see it in action.
I’m working finishing my portfolio (which is taking forever). But you can see it in the menus section, the university menu demo.
Thanks so much! Seems like the best way to do it.
Do you think it would be possible to do it this way and have the drop down set to 100% width but still have the buttons next to each other like your example?
Each block, is wrapped in a parent block, which is inside another parent block. So the menu is actually a grandchild.
That grandparent block can be the one with full width - or simply use it with a section. Hey… and you wanna know what’s cool??? dadadadadadadadada… oh sorry that’s my drumroll attempt… heehee.
Why don’t you just copy my block from the style guide playa? Save ya all the trouble. You won’t even have to do anything but copy the 1 block and change the text or icon… it’s font awesome so easy peezy.
I made it with Class interaction so make sure to copy the entire block. Let me know if you run into a snag…
Yep, you should be able to copy it from the read only link… let me check… oh it won’t let me do that. No problem, just shoot me a message on my profile and I give you the login to my account. That way you can copy the entire style guide and pick from there.
You won’t even have to do anything but copy the 1 block and change the text or icon… it’s font awesome so easy peezy.