Troubleshooting – Mega Menu Alignment

This guide helps with the alignment of the Mega Menu when using different widths (Content, Custom, Full Width or Menu Container). Depending upon the mega menu width, it may appear shifted to one side instead of centered especially when the Custom width option is used. This document covers why this happens and how to fix it.

Note: This feature requires Astra Pro. If you have not purchased Astra Pro yet, you can Upgrade here to get complete access to Astra Pro modules and create a beautiful Mega Menu.

Mega Menu Width Options

When you create a mega menu with Astra Pro Nav Menu module, you get several customization options to make a beautiful mega menu without any external plugin. One of the options here is to control the mega menu width.

While enabling the mega menu for any menu item, you get the following width options:

• Content – Mega menu remains under the website content width and appears in the center
• Menu Container Width – Dropdown match theme’s nav container width – not full viewport, not just content size.
• Full Width – Dropdown span 100% viewport width, but stay inside normal document flow (positioned relative to nearest block)
• Full Width Stretched – Same 100% width, but “stretched” – break out of parent container edge-to-edge regardless of theme container/padding.
• Custom – Apply a custom width for the mega menu in the range of 1px – 1920px

• In case of Content, Full Width and Full Width Stretched width, the mega menu container appears in the center aligned without any issues.
• The Menu Container width enables the mega menu to appear according to the main menu width and it appears below the main menu itself.
• Custom width allows you to apply a custom width and the mega menu alignment is applied according to the default submenu behavior.

Depending on the mega menu width, the custom width may cause the mega menu container to appear more towards left or right rather than being in the center. The guide below helps you to fix the alignment so it appears in the center.

Mega Menu with Custom Width Appears Off-Center

Symptom: After setting the mega menu width to Custom in the Astra Menu Settings and entering a pixel value, the mega menu panel opens shifted to the left or right instead of appearing centered within the content area.

Cause: When Custom width is selected, the positioning calculation does not split the leftover space evenly on both sides, causing the panel to anchor to one edge of the content area instead of centering. This is intentional to avoid the large horizontal gap below the main menu item that may end up cursor hovering issues into the mega menu container.

Before You Begin

This section covers a few checks to rule out other causes before applying the fix below.

• Clear your site cache and browser cache.
• Confirm you are running the latest versions of both the Astra theme and Astra Pro Addon.
• Verify that no custom CSS is overriding the mega menu position (check WordPress Dashboard → Appearance → Customize → Additional CSS for any rules targeting .astra-megamenu-li or .astra-mega-menu-width-custom).

How to Fix and Align the Mega Menu to Center with Custom Width:

If you are looking to center the mega menu when using a custom width value, you can add the following JS snippet to the website using the Site Builder Code Editor module or any Code Snippet plugin.

<script>
(function ($) {
	// Center the Custom Width mega menu within the content area.
	// Remove once the fix ships in an Astra Pro update.
	function astCenterCustomMegaMenu($li) {
		if (typeof astra !== "undefined" && window.innerWidth <= parseInt(astra.break_point)) {
			return; // Desktop only — mobile mega menu is full width anyway.
		}

		var $menu = $li.find(".astra-mega-menu-width-custom");
		var $container = $li.closest(".ast-container");
		if (!$menu.length || !$container.length) {
			return;
		}

		// Read the configured custom width (Astra passes it via the ::before content).
		var menuWidth = window
			.getComputedStyle($menu[0], "::before")
			.getPropertyValue("content")
			.replace(/[^0-9]/g, "");
		menuWidth = parseInt(menuWidth) || $menu.outerWidth();

		var containerOffset = $container.offset(),
			paddingLeft = parseFloat($container.css("paddingLeft")) || 0,
			contentWidth = $container.width(),
			contentLeft = containerOffset.left + paddingLeft,
			desiredLeft = contentLeft + (contentWidth - menuWidth) / 2;

		$menu.css({
			left: parseInt(desiredLeft - $li.offset().left) + "px",
			right: "auto",
			width: menuWidth + "px"
		});
	}

	$(document).on("mouseenter focusin", ".astra-megamenu-li.custom-width-mega", function () {
		var $li = $(this);
		// Run after Astra's own positioning handler.
		setTimeout(function () {
			astCenterCustomMegaMenu($li);
		}, 0);
	});
})(jQuery);
</script>

You can add the above code via the Site Builder Code Editor Hooks and set to display in the website Footer.

After adding the code and clearing your site cache, hover over any mega menu item that uses the Custom width setting. The mega menu panel should now appear centered within the content area, regardless of whether the custom width is smaller or larger than the content width.

Important Points

This section covers a few things to keep in mind when using the workaround above.

• This snippet applies to desktop viewports only. On mobile, the mega menu defaults to full-width behavior regardless of the custom width setting, so no adjustment is needed.
• The snippet overrides the mega menu position after Astra’s built-in positioning runs. If a future Astra Pro update changes the mega menu positioning logic, this snippet may no longer be necessary. Check the Astra Pro changelog after updates, and remove the Hooks layout if the centering behavior is fixed natively.
• If the custom width value entered is wider than the browser viewport, the mega menu may overflow the visible area on both sides. This is expected behavior for any centered element wider than its container.
• The alignment change is not recommended for the mega menu width very less custom width if the main menu is right aligned. The centered panel lands in the middle of the container, there’ll be a large horizontal gap between the trigger and the panel, the hover is lost in that gap and you likely won’t be able to move the cursor into the mega menu at all.

Frequently Asked Questions

Q: Why does the Content width option center correctly but Custom does not?

A: The Content width option sets the mega menu panel to match the site’s content area exactly, so both edges line up with the container automatically. Custom width uses a different pixel value, and the built-in positioning logic does not distribute the leftover space evenly, causing the panel to anchor to one side.

Q: Can this snippet be added with a code snippets plugin instead of Site Builder?

A: Yes. Any plugin that allows inserting custom JavaScript into the site’s frontend (such as WPCode or Code Snippets) works as an alternative. Paste the same <script> block and set it to load on the frontend across all pages.

We hope the above information has been helpful. If you face any issues or need some help, please do not hesitate to reach out to our support team.