Overview
Out of the box, a submenu cannot be wider than the menu bar. Remember that the width of the menu bar is restricted by the container that the theme wraps the menu in. A common scenario is if the theme floats the menu to the right side of the header, the menu bar will then only be as wide as the items in the top level, and the submenu will only be as wide as that bar. For more information on sizing and positioning the menu bar, please see: Menu Bar.
To expand the submenus, you have two options: expanding the width of the menu bar, or unbounding the submenu – which means allowing the submenu to expand beyond the width of the menu bar. Setting the bounds appropriately is almost always the best solution.
Submenu Bound Options
By default, the bounds will be set to the Menu Bar. That means that the left edge of the submenu can’t be any further left than the left edge of the menu bar, and the right edge of the submenu can’t be any further right than the right edge of the submenu (unless you set an explicit width for that submenu).
UberMenu Control Panel > Main UberMenu Configuration > Position & Layout > Submenus
All submenus in a menu must be bound to the same extents. However, each submenu can be positioned independently. Note that the submenu bounds will affect the position of the “Left/Right Edge of Menu Bar” settings – the “edge” will now be the next bounding wrapper, rather than the menu bar itself.
Menu Bar Bounds
This submenu is bounded to its menu bar. The submenu cannot be any wider than the menu bar. This is the default. Works best for menus that span the same width as your site’s content area.
Inner Menu Bar Bounds
The submenu is bounded to the inner menu bar. Mostly useful when centering the inner menu bar. Works best for menus which expand the full width of the viewport, while the inner menu bar is centered to the site’s content area.
Unbounded submenus
This is the same menu, unbounded.
When set to Unbounded (by the menu bar), the submenu can extend to the width of the next non-statically positioned element in its ancestor tree. It will expand to the extents of the viewport only if all ancestors which are narrower than the viewport are positioned statically, as in this case (also unbounded):
The extent to which the menu can expand beyond the menu bar is dictated by the theme, and is not something that UberMenu can control. If you change the bounds to “Unbounded” and the submenu does not expand, you’ll need to add custom CSS to change the position of the theme’s wrapper elements to static.
How to make the submenu wider than the menu bar
This tutorial walks you through various scenarios surrounding expanding the submenu beyond the width of the menu bar, including bounding containers from the theme.
Centering Submenu Content
If you’d like your submenus to be full width, but the content within them to be centered to your site content width, then you can wrap your submenu items in Rows and set an appropriate submenu row width to achieve this effect:
