The expand arrows, the X close button and the opening speed are all in the Configure step. These settings apply to the whole menu, not to each menu item.
Before you start
- Open the menu you want to edit in Navi+.
- Some settings only exist on certain menu types. Each step below says which menu types have it.
Expand arrows and close button
-
Click the Configure step in the vertical step bar on the left. In the Configure panel that slides out, the row of buttons right below it, Navigation Icons, Animation and Z-Index, takes you straight to each tab.
ConfigureVisibility RulesNavigation IconsSubmenu Expand StyleAnimationDividerZ-IndexCSS1Jump-to-tab buttonsNavigation IconsIcons used to navigate within the menu, such as the expand arrow and the close button.Expand arrowShow arrow on parent items that have a submenuShow arrow icons2Expand arrowsArrow styleColorInherit Opacity (0–100)Inherit (30) Font size (px)Inherit (20) Iconri-arrow-right-s-lineClose iconIcon to dismiss the mobile menuHide this iconPositionTop rightTop leftOffset from menu topInherit (12)3Close button -
On the Navigation Icons tab, find Expand arrow and turn on Show arrow icons so parent items with submenus show a small arrow. This switch is on by default and applies to the whole menu. To change how the arrow looks, use Arrow style just below: pick a Color, set the Opacity (0–100), set the Font size (px), and choose an arrow from the Navi+ library under Icon. If you leave these fields empty, Navi+ uses its default values: the menu’s color, opacity 30 and size 20.
9:41•••yourshop.comSTORESTOREHomeShop2Parent item arrowNew arrivalsBest sellersSaleCollectionsAbout usContact -
For Mobile Menu only, the Navigation Icons tab has an extra Close icon item to adjust the X button that closes the sliding menu. Turn on Hide this icon to hide the X button completely. Under Position, choose Top right to place the button in the top-right corner, or Top left for the top-left corner. The Offset from menu top field moves the X button lower than the top edge. The default is 12px.
9:41•••yourshop.comSTORESTORE3Close buttonHomeShopCollectionsAbout usContact
When you hide the X button on Mobile Menu, shoppers can only close the menu by tapping the dark area outside it. If the menu is wide and covers almost the whole screen, keep the X button so shoppers have a way to close it.
The Arrow style settings (color, size and arrow icon) are part of the Elite plan, so they're locked on other plans. The Show arrow icons switch works on every plan.
Opening style and animation speed
-
Choose how submenus open, depending on your menu type:
- For Tab Bar and Floating Button: open the Submenu Expand Style tab. Choose Default (edge-to-edge) to make the submenu panel as wide as the screen, or Dropdown (arrow + margin) to make it narrower, with a pointer arrow and margins around it, like a classic dropdown menu.
- For Mobile Menu: open the Submenu Slide Direction (Mobile) tab to choose whether submenus drop down in place or slide sideways like a new page. This tab doesn’t appear if you use a two-column Mobile Menu, because level 2 always sits in the fixed right column in that case.
- Mega Menu and Icon Menu don’t have this setting.
ConfigureVisibility RulesNavigation IconsSubmenu Expand StyleAnimationDividerZ-IndexCSSSubmenu Expand StyleChoose how the level 2 submenu panel appears when openedDefaultDefaultDropdownDropdown -
On the Animation Style tab, choose Slide to make the menu panel slide in and out, or Fade to make the menu fade in and then out when it closes. This tab only appears on Mobile Menu and Tab Bar. Next, on the Animation Speed tab, pick one of six speeds from No animation to Very fast. The speed applies to Mobile Menu, Mega Menu and Tab Bar.
ConfigureVisibility RulesNavigation IconsSubmenu Expand StyleAnimationDividerZ-IndexCSSAnimationAnimation StyleChoose animation style for Mobile menu and Tab Bar. Slide: panels glide in/out. Fade: menus fade in/out.SlideFade1StyleAnimation SpeedAdjust the animation speed for menus. Applies to Mobile menu, Mega menu, and Tab Bar.No animationVery slowSlowMediumFastVery fast2Speed -
Click Save at the top to save the menu, then open your store and open and close the menu to see the effect.
Stacking order (z-index) when menus are covered or overlap
Your store often has several floating elements at the same time, such as the cookie banner, chat button, cart panel or a sticky header. Each one has a z-index number that sets the stacking order: a higher number sits on top. Themes and apps each set their own numbers, with no shared standard, so they sometimes overlap.
You only need to change the Navi+ z-index in two cases:
- The menu is covered by the header, a banner or a popup from another app: raise the number above the element that covers it.
- The menu covers the chat button, cart panel or a banner: lower the number below the element being covered.
Suggested numbers by menu type:
- Tab Bar and Floating Button: set a low number. These two stay fixed on screen, so a number that’s too high gets in the way of the cart panel when shoppers buy.
- Desktop Mega Menu in the header: set a number high enough that the submenu panel doesn’t sink below the other header elements.
- Mobile Menu: Navi+ already sets a very high number so the sliding menu always stays on top. You usually don’t need to change it.
- Icon Menu: the menu sits right in the page content, so you almost never need to change its z-index.
If you leave this field empty, Navi+ uses its own default number for each menu type.
To change the stacking number, go to the Configure step, open the Z-Index tab, enter a number from 0 to 2147483647, then click Save. If you don’t know which numbers the other elements use, read Menu overlaps chat widget, cookie banner or header to fix each case, or contact support and the Navi+ team can check and tell you the exact number.
Frequently asked questions
Why are the arrows still showing after I turned them off?
Go to the Navigation Icons tab and turn off Show arrow icons to hide the expand arrows on the whole menu. If one menu item still shows an arrow, that item may have its own icon. This switch doesn’t turn off the icon on individual items. See how to remove it in Icons, images and badges for menu items.
Why can’t I see the Close icon item?
The Close icon item only appears when you edit a Mobile Menu. Other menu types don’t have a sliding panel, so they don’t need this close button.
Why is Arrow style locked?
Arrow style is part of the Elite plan. See what each plan includes in Plans and billing.
Why doesn’t the menu change when I choose Dropdown in Submenu Expand Style?
On Tab Bar, the Dropdown (arrow + margin) style only works when the bar sits at the top or bottom of the screen. If you place the bar vertically on the left or right edge, Navi+ uses Default (edge-to-edge) instead. Floating Button always supports Dropdown (arrow + margin).
Why doesn’t the animation speed look different?
The Animation Speed setting only applies to Mobile Menu, Mega Menu and Tab Bar. When you choose No animation, the opening effect is turned off completely. If you use Icon Menu or Floating Button, this setting has no effect. Similarly, the Slide and Fade styles in Animation Style only apply to Mobile Menu and Tab Bar.
The menu is covered or overlaps something else. What should I do?
This is a stacking order problem on the page. Follow the Z-Index steps above, or read Menu overlaps 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.