All the fields in this article are in the Configure step. They apply to the whole menu, not to individual items. To see step-by-step instructions, read Arrows, close button and open effect. This article is the lookup version: one field per entry, so you can click the (?) next to a field to jump straight to the right place.
To get there: click the Configure step on the vertical step bar on the left. The Configure panel slides in from the right. Click the Navigation Icons, Animation or Z-Index buttons at the top of the panel to jump to the right card.
The fields are the same on Shopify, Wix and every other website.
| Field in the app | Card | Menu types that have this field |
|---|---|---|
| Expand arrow | Navigation Icons | All 6 types (the icon can only be changed in 3 types, see below) |
| Arrow style | Navigation Icons | All 6 types · Elite plan |
| Hide close icon | Navigation Icons › Close icon | Mobile Menu only |
| Position | Navigation Icons › Close icon | Mobile Menu only |
| Offset from menu top | Navigation Icons › Close icon | Mobile Menu only |
| Animation Style | Animation Style | All 6 types |
| Animation Speed | Animation Speed | All 6 types |
| Z-Index | Z-Index | All 6 types |
Arrows and close button
Expand arrow
This field is in the Navigation Icons card, under Expand arrow. It’s the Show arrow icons switch. When on, any item that has a submenu shows a small arrow to signal that there’s another level inside.
- Options: on or off. New menus have it on by default.
- Applies to: the switch is available in all 6 menu types. On the store, it shows or hides the arrow of level 1 items in the Mobile Menu, Desktop Mega Menu and Mobile Mega Menu. For Tab Bar, Floating Button and Icon Menu, turning this switch off doesn’t change the arrow.
- Plan: every plan.
- What shoppers see when you change it: turn the switch off and the arrow at the end of the parent item disappears, and the parent item reclaims the space on the right. Shoppers can still tap the parent item to open its submenu as usual. There’s just no visual hint anymore.
- Note: this switch doesn’t change the custom icon you attach to each item. See Icons, images and badges for menu items.
Other platforms
The steps above are for Shopify — the default way.
The same on every platform.
The same on every platform.
Arrow style
This field is directly below Expand arrow, in the Navigation Icons card. It has 4 small fields to change the look of the arrow: Color, Opacity (0–100), Font size (px) and Icon.
- Options and defaults: if all 4 fields are empty, the arrow stays as it is. Empty fields show the hint Inherit: the color follows the menu, the opacity is 30, the size is 20. Icon is chosen from the Navi+ icon library.
- Applies to: all 6 menu types. The arrow for level 1 items only exists in the Mobile Menu, Desktop Mega Menu and Mobile Mega Menu. Arrows for submenu items exist in every type.
- Plan: Elite. Other plans see the field locked.
- Only takes effect when: Expand arrow is on.
- What shoppers see when you change it: the arrow changes to the color, opacity, size and icon you choose. For example, setting Opacity to 100 makes the arrow bold and clear instead of faint.
- Note: Opacity only works once you’ve chosen a Color. Font size and Icon work on their own.
Other platforms
The steps above are for Shopify — the default way.
The same on every platform.
The same on every platform.
Hide close icon
This field is in the Navigation Icons card, under the Close icon section, as the Hide this icon switch. It only appears when you’re editing a Mobile Menu.
- Options: on or off. Default off (the ✕ button shows).
- Applies to: Mobile Menu only.
- Plan: every plan.
- What shoppers see when you change it: turn it on and the ✕ button disappears from the sliding menu, so shoppers can only close the menu by tapping the dark area outside it. The Position and Offset from menu top fields hide along with it.
- Consider this: if the menu panel covers almost the whole screen, keep the ✕ button so shoppers have something to tap to close it.
Other platforms
The steps above are for Shopify — the default way.
The same on every platform.
The same on every platform.
Position
This field is in the Navigation Icons card, under the Close icon section, next to the Hide this icon switch. It only appears for Mobile Menu, and only when the ✕ button isn’t hidden.
- Options: Top right (upper right corner) or Top left (upper left corner). Default for a new menu is Top right.
- Applies to: Mobile Menu only.
- Plan: every plan.
- Only shows when: Hide this icon is off.
- What shoppers see when you change it: the ✕ button moves from one corner of the sliding menu to the other. Choose Top left if your menu slides in from the right and you want the close button on the screen edge side.
Other platforms
The steps above are for Shopify — the default way.
The same on every platform.
The same on every platform.
Offset from menu top
This field is in the Navigation Icons card, under the Close icon section, next to the Position field. It only appears for Mobile Menu, when the ✕ button isn’t hidden.
- Unit and default: px. Default 12. If left empty, the hint Inherit (12) shows and 12 is used.
- Applies to: Mobile Menu only.
- Plan: every plan.
- Only shows when: Hide this icon is off.
- What shoppers see when you change it: the ✕ button moves lower, away from the top edge of the menu panel. Use this when your menu has a logo or image at the top and the ✕ button sits on top of it.
Other platforms
The steps above are for Shopify — the default way.
The same on every platform.
The same on every platform.
Opening effect
Animation Style
This field is in the Animation Style card of the Configure panel: two selectable cards with small pictures, Slide and Fade.
- Options: Slide (the panel slides in and out) or Fade (it fades in and fades out when closed). Default for a new menu is Slide.
- Applies to: the app notes on this card say it’s for Mobile Menu and Tab Bar. From checking the store code, this field also changes how the submenu panel opens for Floating Button, Desktop Mega Menu and Mobile Mega Menu (Slide moves it down, Fade fades it in). Icon Menu doesn’t use this field.
- Plan: every plan.
- What shoppers see when you change it: choose Slide and the submenu panel slides out and back in. Choose Fade and the panel fades in and out, without any horizontal or vertical movement.
- Only looks different when: Animation Speed isn’t No animation. With the effect turned off, Slide and Fade both show instantly.
Other platforms
The steps above are for Shopify — the default way.
The same on every platform.
The same on every platform.
Animation Speed
This field is in the Animation Speed card, right below Animation Style: 6 buttons from No animation to Very fast.
- Options: 6 levels, default Medium.
| Level in the app | Opening time |
|---|---|
| No animation | 0 (shows instantly) |
| Very slow | 0.5 seconds |
| Slow | 0.35 seconds |
| Medium (default) | 0.2 seconds |
| Fast | 0.12 seconds |
| Very fast | 0.06 seconds |
- Applies to: the app notes say it’s for Mobile Menu, Mega Menu and Tab Bar. The store code also uses this value when opening the submenu panel of a Floating Button. Icon Menu doesn’t use this field.
- Plan: every plan.
- What shoppers see when you change it: the faster the level, the tighter the submenu panel opens. No animation makes the menu show and hide instantly, which suits shoppers who prefer a clean feel, or stores with many other effects on the page.
Other platforms
The steps above are for Shopify — the default way.
The same on every platform.
The same on every platform.
Layer order
Z-Index
This field is in the Z-Index card of the Configure panel. It’s a number box, with the hint Min: 0, max: 2147483647.
- Value: a whole number from 0 to 2147483647. A new menu shows 50 in the box.
- What if it’s empty: Navi+ uses the default number for the menu type: Tab Bar 49, Floating Button 100, Mobile Menu 2147483647 (always on top), Desktop Mega Menu and Mobile Mega Menu 49, Icon Menu 1.
- Applies to: all 6 menu types. Plan: every plan.
- What shoppers see when you change it: the bigger the number, the more the menu sits above other things on the theme, such as a fixed header, a cookie banner, a chat button or a popup. If the menu is covered by something, raise the number. If the menu covers the cart or a chat button, lower it.
- Tip: Tab Bar and Floating Button should keep a low number because they’re always pinned on the screen. Mobile Menu usually doesn’t need changing.
If you don’t know what number the other elements use, see Menu covers a chat widget, cookie banner or header.
Other platforms
The steps above are for Shopify — the default way.
The same on every platform.
The same on every platform.