This is the menu bar: When we refer to the menu bar, we’re referring to the container that wraps the top level menu items; not the submenu or any individual menu item. Menu Bar Width The menu bar has two modes that affect its width: Full Width Mode When Expand Menu Bar Full Width is activated (as it is by default), UberMenu will expand to 100% of its container element. The container element is defined by the theme. If the theme has defined the container element to be 50% of the inner width of the page, UberMenu will expand to 50% of the inner width of the page. If the theme has not defined a width in the containers surrounding UberMenu, it will expand to the edges of the viewport. These constraints are set entirely by the theme and are not controlled by UberMenu Note that UberMenu cannot expand beyond the width of its container, so if the width of your menu bar seems limited, you should check the container defined by the theme. Remember, if you have Full Width Mode enabled, aligning the menu to the left or right will make no difference, as the menu takes up the full width of its container and is already aligned with both extents Natural width mode If you disable Expand Menu Bar Full Width, the menu bar will automatically size to the width of the top level menu items. That is, there won’t be any extra space on either side of the first and last menu items. It is important to realize that the maximum width of the mega menu submenus is restricted to the width of the menu bar. If your menu bar is too narrow, your submenu columns will automatically stack if there is not enough horizontal real estate […]

It’s critical to understand how menu structures created in the Appearance > Menus screen map to UberMenu Layouts. Here’s a diagram showing how first, second, and third level menu items are organized into a mega menu layout. Top (First) Level Menu Items Laid out horizontally, left to right. Always visible on the menu bar. For a horizontally-aligned menu, the top level menu items are listed in the row of main links in the navigation menu. For a vertically-aligned menu, these items are aligned in a column. The top level menu items are always visible. Examples of Top Level Menu Items: Flyout Menu | Mega Menu | Mega Menu + Descriptions Second Level Menu Items (Column Headers) Laid out horizontally, left to right, within a submenu. Act as submenu Column Headers. The second level menu items (those that are indented once below top level menu items) are treated as headers within the sub menus. They contain third level menu items to for sub menu groups. These groups are aligned as columns within the sub menu, with the second level menu items as the headers at the top of each column. Example of Second Level Menu Items, sub-menu of MegaMenu + Descriptions: Monday | Tuesday | Wednesday Third Level Menu Items and Below Laid out vertically, top to bottom. Listed below their second level item header. All menu items deeper than level 3 are treated as level 3 menu items. These items are the content links within their parent categories. Sibling items are aligned vertically in list-fashion below their column headers (second level menu items). Example of Third Level Menu Items, under Mega Menu + Descriptions > Monday: How I Met Your Mother | House | Castle

Out of the box, UberMenu puts no restrictions on submenu column widths (beyond that they can’t exceed the width of the submenu). If you don’t place any restrictions on these submenu columns, the columns are considered Natural Width. If we specify exactly how much of the row they should take up, they are Percentage Width. Natural Width Natural width columns are sized to the contents of the columns. Basically, the widest second or third level item in the column will determine the column width. So you could end up with something like this: Notice that the first column is much larger than the others, due to the How I Met Your Mother item title. You can use natural width columns with either full width or natural width submenus – but normally natural width submenus work best in this case. Tip If your last column is falling on to a second line, and your submenu alignment is set to “Center”, but touches the right edge of the menu bar, try setting your submenu alignment to “Right” instead to make the columns align properly. Percentage Width Percentage width columns take up a specific, equal percentage of the submenu. That is, you can set the submenu to 4 columns, and each column will be exactly the same width (25% of the submenu width). Here’s an example with a full width submenu set to 4 columns: In this case, note that the extra long title in the first column is forced to wrap, rather than expand the column, as all columns take up exactly 25% of the submenu width. In order to use percentage columns, set your top level menu item to enable Full Width Submenus and set the Submenu Columns [Fullwidth] value to your desired number of columns (up to 7). Note that […]

Out of the box, the width of a mega submenu can be determined either naturally (based on the width of its contents) or set to full width. Each submenu can be sized independently. Natural (sized-to-content) Naturally sized submenus are the default. That means that the width of the submenu container will be based upon the width of the columns within that container. This is a naturally sized submenu: The submenu is only as wide as the items inside it. To use natural width submenus, turn on jQuery Enhancements (it’s enabled by default), and don’t check “Full Width Submenu” on your top level menu item. In other words, your submenus will be sized naturally if you don’t make any changes to the settings. Note: Natural width submenus are only valid for jQuery Enhanced menus – without jQuery, the submenu cannot be centered, which can result in accessibility issues, so the menu will be set to full-width automatically Full Width A full width submenu will span the entire width of the menu bar – no more and no less. Here is an example of a full width submenu. Note that the submenu would still be that wide even if there were only two second level menu items (columns). You can make any submenu full width by checking the Full Width Submenu checkbox on the top level menu item Note that if you are using full width submenus, you can set the number of columns per row explicitly. You can also set all your submenus to be full width automatically via the UberMenu Control Panel > Basic Configuration. This will override individual submenu settings. It’s important to note that if your submenu is too narrow (as restricted by your menu bar), you may force your submenu columns to stack because they do not […]

UberMenu can function as a pure CSS menu – meaning, without an javascript. You can disable jQuery Enhancements if you wish in the UberMenu Control Panel under Basic Configuration There are some important things to note about using Pure CSS menus: 1. All mega submenus will be full width This is because without javascript, the submenu can’t be centered. Therefore, it need to be expanded full width so that it is always guaranteed to overlap its parent menu item to allow for the submenu to be selected. 2. There will be no transition effect Transitions are javascript-only 3. The only trigger is hover Click and hoverIntent triggers are only available via javascript. 4. No Maps The Google Maps API is engaged using jQuery. Without loading the script, you’d need to write your own javascript to use maps. 5. Mobile Devices Not all mobile devices map touch events to CSS hover events in the same way, so user experience may not be as consistent across devices without javascript enabled.

Out of the box, you menu will be jQuery Enhanced. There is one major layout advantage over pure CSS menus (beyond interface embellishments). Full Width or Natural Width Submenus With jQuery Enhancements enabled, you can choose between full or natural width submenus. The javascript can then center-align your naturally-sized submenu below the top level menu item. You can also choose from left or right submenu alignments if you choose.

You can align your submenus to the left, right, or centered below the top level menu item, when in jQuery Enhanced mode.

Menu Items with attached widget areas will always take up an entire row; the widgets within the widget area will automatically form columns.

Are you using UberMenu 3? Then you’ll want to use Columns and set Submenu Column Default for your header item to divide them into the appropriate number of sub columns If you want to split up a set of third level submenu items into multiple columns under a second-level header, like this: You can keep all of your menu items under that header like this And begin a new column by checking the Start a new column (under same header) option on the item that should begin the second column.