English Tiếng Việt
See demo Get started

Your theme's menu bar is usually wide enough for only 5 to 7 items, because logo, search and cart sit on the same row and take up space. When you place the menu with Replace, Mega uses exactly that space. Add too many level 1 items and the last one wraps onto a second row, pushing the header taller.

Before: the last item wraps onto a second row
After: one row, the overflow sits behind the › button

Ways to fix it, in the order to try them:

  • Merge some level 1 items. Group the items that belong together under one large item with columns or Tabs (Women, Men, Kids become one Shop item). This is the most lasting fix, and it also makes the menu tidier for shoppers.
  • Choose Add below your header. The Mega bar gets its own full-width row, so it doesn't share space with the logo, search and cart.
  • Turn on Menu overflow navigation (Configure > Desktop, the Show navigation arrows when menu overflows box): the menu stays on one row, and overflowing items sit behind an arrow button for shoppers to scroll. Set the button colors in the two boxes Button background color and Arrow icon color.
  • Shrink the items in Design > Main menu: lower Text Size (px) and Padding (px) under Each item spacing. Works well when only one item overflows.
  • Set Menu bar width to Fill container so the bar uses the whole container instead of the narrower width from your theme.
  • Lower the Mobile switch breakpoint (default 768 px, Configure > Desktop) if the menu switches to the mobile version too early on narrow windows. After lowering it, turn on the arrows above so items don't wrap.

Details for each field: Desktop Mega Menu layout settings.

Related articles

Did this page help?

Need a hand? Chat with us in the app or write to [email protected] — send your store URL and the menu name.