Sub Menu Width

To adjust the width of the mega menu, go to Mega Menu > Menu Themes.

The width of the mega menus are defined by the ‘Panel Width’ setting.


There are 3 types of value you can use for this setting:

Percentage Width

Entering a percentage width will make the sub menus display at a width relative to the menu itself.

For example: 100% (default)

Percentage width menus will always be aligned to the left hand edge of the whole menu. In most cases, the only percentage width you should use is 100%.


Fixed Width

To fix the sub menu at a certain width, regardless of screen size, enter a pixel based value.

For example: 500px

Fixed width sub menus will always be aligned to the left hand edge of the parent menu item.


Dynamic Width (jQuery/CSS Selector)

Dynamic widths can be used to automatically aligned and size the sub menu to match an existing element on the page.

To make use of this feature you’ll need to find the HTML element that wraps your page content and use the ID or class of the element (in the form of a jQuery selector) as Panel Width setting.

For example: #container, body, #page, .content.



Custom Sub Menu Widths

With Max Mega Menu Pro it is possible to set a sub menu width per menu item.

For example, you could set one sub menu to be 500px wide and another to be 700px wide.

This functionality is part of Custom Item Styling.


Can the sub menu width automatically adjust to fit the content?

In short, no.

All HTML elements must have a width specified at some point. An HTML element may inherit the width from its parent (e.g. you can say “this element should be 50% of the width of its parent”), or you might directly specify a width (e.g. “this element should be 600px wide”).

You cannot say “work out the ideal width for this element and apply it”. HTML & CSS do not understand what a human’s idea of the ideal width would be.

Related Articles