English Tiếng Việt Français Deutsch 中文 日本語 Italiano Português Español
See demo Get started

FAQ

Question 1: How do I stop my Desktop Mega Menu from wrapping to a second line?

There are two situations that can break the layout of a desktop Mega Menu bar: too many top-level items, or the site viewed in a window narrower than a standard desktop. Two settings under Setting → Layout → Desktop fix this — no code required.

Before — too many items wrap to a second line Home Shop Categories Sale Blog About Contact Support ⚠ The second row pushes page content down, and the header height changes unpredictably across screen sizes. After — "Menu overflow navigation" keeps it on one row Home Shop Categories Sale Blog › About Contact Support Items that don't fit (About, Contact, Support...) live behind the arrow button — click to reveal them, without wrapping.

Turn on Show navigation arrows when menu overflows. The top-level bar always stays on one row; items that don’t fit are tucked behind a › arrow button instead of wrapping. Two color fields, Button background color and Arrow icon color, let you style the button.

Mobile switch breakpoint

By default, any screen narrower than 768px switches the whole menu to mobile mode, even if there’s still enough room for a desktop layout — common on tablets or a resized browser window. Lower the Breakpoint (px) field to keep the desktop bar visible down to a narrower width.

Setting → Layout → Desktop ↔ Mobile switch breakpoint Screen width below which the menu switches to mobile 768 px › Menu overflow navigation Show navigation arrows when the menu overflows Both cards only appear for a Desktop Mega Menu — not Tabbar, FAB, Slide, or Mobile Mega Menu.
Default — fixed at 768px Mobile / Hamburger Desktop Mega Menu 768px After setting Breakpoint = 600 (+ overflow navigation enabled) Mobile / Hamburger Desktop (new range) Desktop Mega Menu 600px 768px The 600–768px range used to be hidden as mobile — it now keeps the desktop layout.

The new range this opens up (between your breakpoint and 768px) is narrower than a standard desktop — turn on Menu overflow navigation too, so top-level items don’t wrap in that range.

Example: breakpoint = 600 with Menu overflow navigation on:

Screen width Behavior
Below 600px Mobile / hamburger menu
600px – 768px Desktop Mega Menu, arrow button keeps items on one row
Above 768px Desktop Mega Menu, standard behavior

These two settings are independent, and only affect the Desktop Mega Menu — not the Tabbar, FAB, Slide menu, or Mobile Mega Menu.

Question 2: How can I show my Desktop Mega Menu as a Slide menu on mobile?

Sometimes you want the classic responsive approach: build one Desktop Mega Menu and let it collapse into a Slide (Hamburger) menu on mobile automatically, instead of building a separate mobile menu from scratch.

Strength
You only maintain one menu — the desktop version. The mobile copy follows automatically, with no second tree to keep in sync.
Weakness
Mobile-first is how navigation should be designed today — phones bring most visits and often most revenue. A tree squeezed down from a wide desktop bar is really desktop-first: too many taps per link, dropdown-style groups that read poorly as a stacked list, no room for mobile-only shortcuts.

For a store’s main navigation, a menu designed for mobile from the start — a dedicated Slide, Grid, or TabBar menu — is usually worth the extra maintenance.

Middle ground: mirror the Desktop Mega Menu into a Slide menu with Smart responsive (steps below), and add a TabBar item that opens it directly. Set the item’s Link To field to open:NaviMenu(SF-xxxxxxxxxx) (Business / Elite) — using the Slide menu’s embed ID — so mobile visitors get a real bottom-bar entry point instead of a hidden hamburger icon.

Set up Smart responsive

Open your Desktop Mega Menu → Setting → Mobile → card Smart responsive. It embeds a live reference of this menu into a Slide menu — you keep editing content here only, and the mobile version updates automatically.

Desktop Mega Menu — 3 columns Collections Women Dresses Tops Men New in Sale Info Size guide Shipping → Smart responsive Slide menu — flattened to 1 column Collections Dresses Tops New in Sale Size guide Shipping one tap reaches every link
  1. Click Copy embed item to copy this menu item template.
  2. Paste it at level 1 of an existing Slide menu — or create one first if you don’t have one yet.

Multi-column layouts are flattened automatically: columns become one vertical list, column titles are dropped, and a divider line is inserted where separate columns used to be — so visitors reach every link in one tap instead of two.

Once embedded, the card shows This menu already shows on mobile with a link straight to the Slide menu, so you can check it anytime.

Fine-tune the mobile copy
  • Hide desktop-only items. Open the item on the Desktop Mega Menu → Visibility → turn on Exclude when embedded. It stays on desktop and disappears only from the mobile copy.
  • Add mobile-only items. The Slide menu isn’t limited to what the reference brings in — add regular level-1 items right next to the embedded one for things the desktop bar doesn’t need: a call/WhatsApp button, store hours, a language switcher, or links that normally live in the theme header or footer. These live directly in the Slide menu and don’t touch the desktop version at all.