How can I make the menu full width?

Full Width Context

The term “Full Width” is always relative to a container. That container might be your browser viewport, or it might be an element in your site layout.

By default, UberMenu will expand to fill the width of whatever container it is placed in (see Menu Bar > Size & Position).

The theme controls the layout

Generally, the container that wraps UberMenu will be controlled by your theme. As a relatively positioned element, UberMenu can’t be any wider than the container it is placed inside, so the maximum width of UberMenu is actually controlled by your theme’s layout, not by UberMenu.

The most common issue faced is that most themes will wrap elements in a `.wrap` or `.container` element which is centered within the browser. This element is usually someplace between 960px and 1140px wide.

For example, take a look at the UberMenu Demo. The theme used has a container called `.content_wrapper` which wraps the menu. It is 980px wide, so that is the maximum width UberMenu can be.

Note that not all theme containers are centered, so if you menu is off-center, it is likely because that is how the theme’s container is positioned.

Adjusting the restricting container

Sometimes, you can use custom CSS to adjust the width or position of the container. Other times, it is better to use Manual Integration and just move the menu to the appropriate part of your layout within your theme templates.

Note that if your menu bar is wide enough, but you want the submenus to be wider, you can use the Unbounded Submenus setting.

On this page