English Tiếng Việt
See demo Get started
Menu design

Style the main menu (level 1)

Level 1 is the part of the menu shoppers see first, before they open any item. This article shows you how to change the text, icons, background and size of that part.

Where level 1 sits on each menu type

Level 1 sits in a different place depending on the menu type you use. All level 1 items share the settings in this article.

Menu type Level 1 is
Tab Bar The tabs at the bottom of the screen
Mobile Menu The list of items shown first when the menu opens
Desktop Mega Menu The items on the menu bar in the header
Mobile Mega Menu A row of category tiles under the header
Icon Menu The tiles in the icon grid
Floating Button The small buttons that pop out when the floating button is tapped
Tab Bar: level 1 is the tabs at the bottom of the screen
Desktop Mega Menu: level 1 is the menu bar in the header

The items inside a panel that opens after a click are level 2 and level 3. To change those, read Style submenus (levels 2 and 3).

Before you start

  • Open the menu you want to edit in Navi+. If you want to change the whole color scheme, choose a Palette first, then come back here to fine-tune individual boxes.
  • The styling screen is split into two parts: Main menu item changes each level 1 item, and Main menu container changes the outer frame of the whole menu.

How to style the main menu

  1. In the top step bar, click Design, then choose the Main menu tab.

  2. In the Main menu item section, open Text style to change the menu item text:

    • Change the text color in Text Color, the text size in Text Size (px), the capitalization (all caps, lowercase, or capitalize each word) in Text Transform, the weight in Font Weight, and the font from Google Fonts in Font Family.
    • Change the small description line under each item name with Description Color and Description Size (px). If you leave these two boxes empty, the description uses the main text color, faded, at a smaller size.

  3. Scroll down to Icon/Small-image Style to change the icons and small images next to menu items:

    • Font icon color changes the color of icons from the built-in library only. Images you upload keep their original colors.
    • Gap: Text – Icon sets the space between the text and the icon.
    • Icon/Small-image size (px) sets one size for both icons and small images.

  4. If a menu item has an image, change it in the Image style section:

    • Image curve (px) rounds the corners of every image in an item, not just icons.
    • Image ratio (auto-crop) crops the image frame to a 3:2, 2:3 or 1:1 ratio with CSS, so you don’t need to upload the image again. This box only affects large image items and banner items.

  5. In the Each item spacing section, set the space for each menu item. Padding (px) is the space inside each item, and Margin (px) is the space outside, between items. Enter four numbers in the order top right bottom left. To set different numbers for phones and computers, enter them as 8 | 16: 8 on phones, 16 on computers.

  6. Scroll down to the Main menu container section to change the frame around the whole menu bar:

    • Layout: type a Menu height to set a fixed height in px, or a Min height to set the minimum height of the menu bar.
    • Container spacing: set the outside margin and inside padding of the whole menu bar. The picture in the box shows which side each number moves.
    • Shadow: turn on Apply drop shadow to add a shadow to the menu frame.
    • Background (BG): turn on Is Transparent to remove the background. Mobile Menu doesn’t have this switch. When transparency is on, the background color and image you set are kept, and they come back when you turn the switch off. In the BG Color box, choose a color, and drag the transparency slider in the color picker if you want a faded background. Click BG Image to open the library and pick a background image.
    • Others: type a Curve to round the corners of the whole frame, and choose a Badge color to change the background color of badge labels on menu items.

  7. Click Save at the top to save the menu, then open your store to see the real result.

Which settings exist only on some menu types?

If you can’t find a setting in this article, the menu type you have open may not use it.

Setting Menu types that have it Reason
Menu height All types except Mobile Menu Mobile Menu is a full-height sliding panel
Min height All types except Mobile Menu and Icon Menu Icon Menu tiles resize to fit their content
Hide all texts Tab Bar, Floating Button Hides all text so only the icons show
Small-image size Icon Menu Sets the image size inside the grid tiles separately
Sub menu tab All types except Icon Menu Icon Menu has only one level, with no submenus

Where are the other level 1 settings?

Some parts that show up on level 1 are set somewhere else, not in the Main menu tab:

  • Expand arrows, the close button, the opening effect and the z-index layer: these are in the Configure step. Read Expand arrows, close button and opening effects.
  • The menu’s position on the screen and its margins: read Menu position and margins.
  • To change one item without changing the whole menu, open the edit form for that item and make the change in its CSS box.

Common questions

Why can’t I change the background opacity?

The old BG opacity box is no longer used. Open BG Color instead, drag the alpha transparency slider in the color picker, or type an 8-digit color code such as #ffffff80. Older menus that still store an opacity value will have it merged into the background color automatically when you open and save the menu.

Why does the background color come back when I turn off Is Transparent?

That’s normal. The Is Transparent switch only hides the background layer. It doesn’t delete the color or image you set. When you turn the switch off, the old background comes back.

I changed Menu height but the menu height didn’t change. Why?

First, check the menu type, because Mobile Menu doesn’t have this box. For other menu types, check whether the preview is set to phone or computer view. If the height still doesn’t change on your live store, read Changed the menu but the store hasn’t changed.

Why can’t I see the Hide all texts button?

The Hide all texts box only exists on Tab Bar and Floating Button. Other menu types don’t have this setting, because hiding all the text doesn’t suit their layout.

Other platforms

The steps above are for Shopify — the default way.

Related articles

Did this page help?

Need a hand? Chat with us in the app or write to [email protected] — send your store URL and the menu name.