MegaMenu fluid containers

[atd]

Hi, been trying to create a megamenu having inside a fluid container.

Check: http://jsfiddle.net/96wroyf6/

I’m having inside a block-grid from Foundation framework and won’t be displayed because the ul inherits menu styling. Even if I force style overwrite it doesn’t fill all width.
Also tried with grid rows but seems it’s only working if I put fixed sizes.

Any idea to make it work with percentage width elements ?

Thanks.

[admin]

Hi, I’m sorry for this delay! It’s been our Easter the past few days and I just wasn’t able to reply earlier!

Yep, if you would like to include nested UL’s in the mega dropdown you will need to use some additional CSS to override the inherited styles for the regular sub menus. So the following would be something like the bare minimum:

ul.mega-menu ul {
    display: block;
    position: static;
    top: auto;
}

Also, setting the subMenusMaxWidth: '' script option is probably a good idea to override the default value subMenusMaxWidth: '20em' which will probably not be enough for mega dropdowns. Here is an updated demo:

http://jsfiddle.net/96wroyf6/1/

From there, I am not sure what exact width you would like to achieve for your mega dropdown. Here are some code samples if you would like your mega dropdowns to take the full width of your menu container:

http://www.smartmenus.org/forums/topic/mega-menu-full-width-of-parent-element/

Please let me know if you still have any troubles.

[Author]

Posts