You’ll find these settings at Configure › Display on desktop › For desktop only. This section is only available on the Desktop Mega Menu. It controls the width of the menu bar, when the menu switches to the mobile version, and the size of the dropdown.
Adjust the menu bar and dropdown
In the app, the cards go from top to bottom in this order: Menu bar width → Mobile switch breakpoint → Menu overflow navigation → Multi-column submenu → Single-column submenu → Advanced.
Menu bar width
This setting controls how wide the level 1 menu bar is, inside the dashed frame where you place the menu.
| Option | Result on the web |
|---|---|
| Auto | Follows the theme. On some pages the menu bar may be narrower |
| Fill container | The menu bar fills the whole container on every page and every screen size |
- The default is Auto.
- If you import a menu that has a fixed width in px from somewhere else, the app shows “Custom width in use” and both buttons above are not highlighted. Just click Auto or Fill container to drop that old width.
Mobile switch breakpoint
- Enter a number in the Breakpoint (px) field. When the viewer’s screen is narrower than this number, the desktop menu automatically switches to the mobile version.
- The default is
768, and the minimum is200. - If you want to keep the desktop menu on narrower screens, lower this number. When you lower it, you should also turn on Menu overflow navigation just below so the menu items don’t wrap onto new lines.
Menu overflow navigation
- Tick Show navigation arrows when menu overflows to keep all menu items on one row when there isn’t enough room. The hidden part gets two arrow buttons at each end, so shoppers can click to scroll and see the rest.
- The default is off.
- When you turn it on, the app shows two more color fields for the arrow buttons:
| Field | Default |
|---|---|
| Button background color | #7777771A |
| Arrow icon color | #777777B8 |
Arrow button background color
The color field on the left, in the Menu overflow navigation card. It only appears when you turn on Show navigation arrows when menu overflows.
- Default:
#7777771A(light grey, slightly transparent). - On the store: changes the background color of the two arrow buttons at each end of the level 1 menu bar. If you keep the default, the button background gets a little darker when a shopper hovers over it. If you choose your own color, the button keeps that color on hover.
- Only on Desktop Mega Menu, every plan. The buttons only appear when the menu really overflows a single row.
Arrow icon color
The color field on the right, next to the one above. It also only appears when side-scroll arrows are on.
- Default:
#777777B8. - On the store: changes the color of the arrow shape inside the two scroll buttons. Pick a color that contrasts with the button background so shoppers can see it clearly.
Multi-column submenu
This card sizes the dropdown for level 1 items that are split into several columns.
| Field | What it does | Default |
|---|---|---|
| Max width | The maximum width of the dropdown. Leave it empty for Full screen, choose Auto to fit the theme’s content area, or type a number in px |
Full screen |
| Column gap | The space between columns in the dropdown, in px | 0 |
To choose a good Max width, follow the tips in the app:
- For a dropdown with 2–3 columns: enter a fixed width of about
520for 2 columns and780for 3 columns. Below980px, the dropdown drops straight down from the left edge of the level 1 item. - For 4 or more columns: use
Full screen, or choose Auto to match the width of the store’s content.
This setting applies to the whole menu. If you want to change one particular item, click that level 1 item and open Multi-column layout › Dropdown width.
Max width of the multi-column dropdown
The input field on the left of the Multi-column submenu card (Configure › Display on desktop › For desktop only). The (i) icon next to the label opens a quick diagram.
- Values: empty =
Full screen; typeauto= match the theme’s content area; or type a number in px. Empty by default. - Applies to: Desktop Mega Menu, level 1 items with Multi-column layout turned on. An item with its own Dropdown width overrides this.
- On the store: the dropdown of a multi-column item is exactly as wide as the number you set. A number below
980makes the dropdown a narrow panel dropping straight from the left edge of the level 1 item. If the shopper’s screen is narrower than the number you set, the dropdown automatically goes back toFull screen. - Plan: every plan. The same on Shopify, Wix and other websites.
Column gap
The input field on the right of the Max width field, in px.
- Default: empty, which means
0— the columns sit right next to each other. - Applies to: Desktop Mega Menu, multi-column dropdowns.
- On the store: a number above
0adds an empty gap between the columns of that many px. Older menus that don’t set this field keep the0gap they had before. - Plan: every plan.
Single-column submenu
This card sizes the dropdown for level 1 items that have only a single column. Items split into several columns follow the Multi-column submenu card above.
| Field | What it does | Default |
|---|---|---|
| Width | The width of the panel, in px | 360 |
| Max height | The maximum height in px. If the list of sub-items is longer than this, the panel shows a vertical scroll bar | No limit — no limit |
Width of the single-column dropdown
The input field on the left of the Single-column submenu card, in px.
- Default for a new menu:
360. - Applies to: Desktop Mega Menu, the dropdown of a level 1 item that has only one column (including the level 3 panel that opens from it). This card only shows when you have chosen Desktop Mega Menu.
- On the store: the sub-panel is exactly as wide as the px number you enter.
- Plan: every plan.
Max height of the single-column dropdown
The input field on the right of the Width field, in px. The (i) icon next to the label gives a short explanation.
- Default: empty (
No limit). - Applies to: Desktop Mega Menu, level 2 dropdowns.
- On the store: if the list of sub-items is longer than this number of px, the panel keeps its height and shows a vertical scroll bar inside. If it’s empty, the panel is as tall as its number of items.
- Plan: every plan.
Menu bar alignment
This field is inside the Advanced card. It aligns the items on the menu bar.
| Option | Result on the web |
|---|---|
| Auto | Keeps the current layout |
| Left · Center · Right | The menu bar fills the container and pushes the items to the left, to the center or to the right |
The default is Auto.
Quick summary of the settings
| Field in the app | Value | Default |
|---|---|---|
| Menu bar width | Auto · Fill container | Auto |
| Breakpoint (px) | number from 200 up |
768 |
| Show navigation arrows when menu overflows | on or off | Off |
| Button background color · Arrow icon color | color code | #7777771A · #777777B8 |
| Max width — multi-column dropdown | Full screen · Auto · number of px |
Full screen |
| Column gap | number of px | 0 |
| Width — single-column dropdown | number of px | 360 |
| Max height | number of px | No limit — no limit |
| Menu bar alignment | Auto · Left · Center · Right | Auto |
These settings are exactly the same on Shopify, Wix and other web platforms. All plans have full access, and no field is locked.