Mega Menu Width

Mega-menu width and position are configured independently.

Width settings apply to desktop mega menus only.

Automatic

The width is based on the menu content and configured column count.

The minimum width adapts to the number of columns:

• 1 column: approximately 24 rem
• 2 columns: approximately 32 rem
• 3 columns: approximately 48 rem
• 4 columns: approximately 64 rem

The menu remains within the visible browser area and keeps a safety margin from the browser edges.

Automatic width allows an additional position reference and alignment.

Navigation Links Area

The menu uses the width of the section containing the page-navigation links.

Branding, search, language, account, and cart actions are not included in this measured area.

The menu position is automatically tied to the navigation-links area.

Navigation Bar

The menu uses the inner width of the complete navigation bar.

This includes the available header area containing branding, navigation, and auxiliary actions, while respecting the actual inner edges of the navigation-bar container.

The menu position is automatically tied to the navigation bar.

Content Container

The menu uses the width of the configured frontend content container.

The content-container CSS selector can be configured globally in the mega-menu settings.

The default selector is:

.container

When no visible matching element is found, the package uses a centered Bootstrap-style container width as a fallback.

Full Browser Width

The menu extends from the left browser edge to the right browser edge.

This mode intentionally has:

• No outer safety margin
• No separate positioning setting
• No outer border rounding

Custom Width

The configured width in pixels is used.

The value is restricted to a valid range and is reduced when necessary to keep the menu inside the visible browser area.

Custom width allows an additional position reference and alignment.

Mobile Devices

All desktop width and positioning settings are ignored on mobile devices.

Mega menus use the same nested dropdown structure as standard mobile navigation.