A menu has two kinds of spacing. Padding is the space inside, measured from the text to the edge of the box that holds it. Margin is the space outside, used to push that box away from the things around it.
In the Design step you have 3 places to adjust spacing: for each level 1 item, for each level 2–3 item, and for the whole menu container. These fields are the same on Shopify, Wix and every other website.
How to enter numbers in spacing fields
Every spacing field uses px. In the two Each item spacing blocks, each field is one line. When you click a field, a picture of two nested boxes appears so you can fill in each side. Or you can type the numbers straight into the field following these rules:
- Enter 1 number, for example
12: all four sides are the same. - Enter 2 numbers, for example
8 16: the first number is for the top and bottom sides, the second for the left and right sides. - Enter 4 numbers, for example
8 16 8 16: in order, for the top, right, bottom and left sides. - Set values separately for phones and computers by typing in the pattern
phone | computer, for example 8 | 24 is 8px on phones and 24px on computers. If you’re entering the values in the nested-boxes picture, uncheck Same as mobile to fill in separate numbers for computers. - Only the Margin field accepts negative numbers. For example, entering
-16in the left margin pulls the menu item 16px to the left.
If you leave a field empty, the level 1 item uses the menu’s default spacing, while the level 2–3 item uses the level 1 value when the field shows Inherit.
Adjust spacing for each level 1 item
Go to the Main menu › Main menu item › Each item spacing card. This block is in all 6 menu types. It adjusts the spacing of each level 1 menu item, not the whole bar.
| Field in the app | What it does | Default |
|---|---|---|
| Padding (px) | The space inside each menu item. Increase it to make the item wider, so phone shoppers can tap more easily. Decrease it to make the items more compact. | Empty: Inherit (top right bottom left) |
| Margin (px) | The space outside each menu item, which pushes the items further apart. | Empty: Inherit (top right bottom left) |
When to adjust: if the items sit too close together, increase Margin. If the items are too narrow and hard to tap, increase Padding.
Adjust spacing for each level 2–3 item
Go to the Sub menu › Sub menu item › Each item spacing card. This block is in the Tab Bar, Floating Button, Mobile Menu, Desktop Mega Menu and Mobile Mega Menu. Icon Menu doesn’t have a Sub menu card.
The two fields, Padding (px) and Margin (px), work the same as level 1, but only apply to items inside the submenu table. Both are empty by default and show Inherit.
When to adjust: when you want the submenu list to look more spacious, or more compact than the main menu outside.
Adjust spacing for the whole menu container
Go to the Main menu › Main menu container › Container spacing card, where the small text Inner/outer spacing sits beside it. This block is in all 6 menu types. Unlike the two blocks above, this one adjusts the whole menu container, not individual items. The Sub menu card doesn’t have this block.
| Field in the app | What it does | Default |
|---|---|---|
| Margin — 4 fields Top, Right, Bottom, Left | The space outside the container, which moves the whole menu bar away from the screen edge and nearby elements. | Empty |
| Padding — 4 fields Top, Right, Bottom, Left | The space inside the container, measured from the container edge to the menu items. | Empty |
| This block has 8 separate fields, one for each side, so you don’t need to type 2 or 4 numbers. Each field only needs one number, or you can type the pattern phone | computer as in How to enter numbers in spacing fields. The block also shows the reminder **Single value = both (e.g. 12) or Mobile | Desktop (e.g. 8 | 16). The **Your menu box in the middle of the picture only illustrates where each side is. |
When to adjust:
- To make a floating Tab Bar sit apart from the screen edge: add Margin to the Bottom, Left and Right fields. See how to do it step by step in Menu position and margins.
- To shift the whole menu container a little from its default position: adjust Margin.
- To make the background inside the menu container more generous: increase Padding.
Each spacing field
Each field below has its own section. Click the (?) button beside the field to go straight to it. All 6 fields work the same on Shopify, Wix and every other website, and all plans can use them.
Padding (px) — Each item spacing, Main menu card
Go to the Design step › Main menu card › Main menu item › Each item spacing. This field adds space inside each item, from the text to the item’s edge.
- Unit and how to enter: px. Enter 1, 2 or 4 numbers, and you can use
phone | computer(see how to enter numbers). New menus leave it empty, and the field shows Inherit (top right bottom left). - Applies to: all 6 menu types, all item types.
- Which level: this number applies to level 1 items, and also to level 2–3 items as long as the Padding (px) field in the Sub menu card is empty. When the Sub menu card has its own number, level 2–3 use that number.
- What shoppers see when you change it: a bigger number makes each item thicker, with a larger tap area that’s easier to press on phones. A smaller number makes the items more compact, and the menu gets shorter.
Margin (px) — Each item spacing, Main menu card
In the same Each item spacing block in the Main menu card, under the Padding (px) field. Margin is the space outside each item, which pushes the items apart.
- Unit and how to enter: px, enter 1, 2 or 4 numbers; negative numbers are accepted. New menus leave it empty (Inherit).
- Applies to: all 6 menu types. Like the Padding field, this number also applies to level 2–3 items as long as the Margin (px) field in the Sub menu card is empty.
- What shoppers see when you change it: a bigger number spreads the items apart, leaving gaps between them. Unlike padding, this space doesn’t belong to the item, so the item doesn’t get bigger.
Padding (px) — Each item spacing, Sub menu card
Go to the Design step › Sub menu card › Sub menu item › Each item spacing. This field only adjusts the space inside the items of the submenu (level 2–3).
- Unit and default: px. If empty, the field shows Inherit, and the submenu item takes the number from the Main menu card.
- Applies to: Tab Bar, Floating Button, Mobile Menu, Desktop Mega Menu and Mobile Mega Menu. Icon Menu doesn’t have a Sub menu card.
- What shoppers see when you change it: entering a number changes the thickness of only the items in the submenu table. Level 1 items stay the same. Use it when you want the submenu to look more spacious, or more compact, than the main menu.
Margin (px) — Each item spacing, Sub menu card
In the same Each item spacing block in the Sub menu card, under the Padding (px) field. This field adjusts the space outside each level 2–3 item.
- Unit and default: px. If empty, the field shows Inherit and takes the number from the Main menu card.
- Applies to: the same as the Padding field in the Sub menu card (not Icon Menu).
- What shoppers see when you change it: the rows in the submenu table move further apart or closer together. Level 1 menu doesn’t change.
Margin — Container spacing
Go to the Design step › Main menu card › Main menu container › Container spacing. These are the 4 Top, Right, Bottom and Left fields of Margin: the space outside the whole menu container.
- Unit and default: px, one number per field. You can use the
phone | computerpattern. New menus leave it empty. Accepts negative numbers. - Applies to: all 6 menu types. The Sub menu card doesn’t have this block.
- What shoppers see when you change it: the whole menu bar moves away from the screen edge and from nearby elements. For example, if a Tab Bar gets a Margin on Bottom, Left and Right, the bar floats above the edge (see Menu position and margins).
Padding — Container spacing
In the same Container spacing block, the 4 Top, Right, Bottom and Left fields of Padding: the space inside the menu container, surrounding all the items.
- Unit and default: px, one number per field, and you can use the
phone | computerpattern. New menus leave it empty. - Applies to: all 6 menu types.
- What shoppers see when you change it: the background of the menu container gets thicker around the items, which are pushed in from the container edge. For a floating Tab Bar, an open panel also adjusts its left and right padding automatically so it lines up with the bar.
Quick reference
| Field in the app | What it adjusts | Found in card | Menu types |
|---|---|---|---|
| Padding (px) — Each item spacing | Inside each level 1 item | Main menu | All |
| Margin (px) — Each item spacing | Outside each level 1 item | Main menu | All |
| Padding (px) — Each item spacing | Inside each sub item | Sub menu | All except Icon Menu |
| Margin (px) — Each item spacing | Outside each sub item | Sub menu | All except Icon Menu |
| Margin — Container spacing | Outside the whole menu container | Main menu | All |
| Padding — Container spacing | Inside the whole menu container | Main menu | All |