Streaming live at 10am (PST)

Mega Menu: Dropdown Navbar


#1

Hello, i need help with making a mega menu with the dropdown feature that has been added recently or any other method please can someone show me detailed how to make a good dropdown menu mega menu.

Kindly Regards, Kaya Talha


#2

The drop-down element is really a drop-down list, I don't think you'll be able to make a mega menu out of it.

To make a mega menu in webflow, create a div for each of your menus and make them appear on click of a menu item with interactions. I think that's how you should handle it.


#3

Is it possible to expand the div that is set to hidden with the dropdown to full width and a fixed height and then include other Divs for images/ videos/links/etc? I think this approach may save some time and energy in getting all of the interactions set how you want.....especially if you have many dropdowns in your header.

J


#4

I spoke too fast, haven't tested it before. In fact you can and it seems pretty easy. https://webflow.com/design/sab?preview=c8e9203ce4585987e1e74923be4eda13 Why didn't you try? smile


#5

Hi Vincent

Took a look at your sandbox https://webflow.com/design/sab?preview=2b35815014d597302f31185ce5dd1ecf and worked out how the 'mouse over' menus worked but I couldn't see how 'big drop 1' works, there didn't appear to be any interactions affecting it and I couldn't see anything in the big drop 1 class?

Can you help me understand how it works?

M.


#6

My error was viewing the Mega Menu in a closed state, the solution proposed above uses the default interactions in the drop down list.

Changing the settings for the size of DIV, as discussed in previously this post, is done in the Mega Menu options when the menu is set to 'open'.

You can open the menu by selecting 'settings' (or hit key 'd') from the toolbox and find the 'open menu' option then make changes in the style (key 's') toolbox.


#7

Have you solved your issue? Sorry I didn't catch that early.


#8

Hi Vincent - yes I just missed the obvious. Thanks for replying, have a good day!


#9