Wix Editor: Customizing Your Mobile Menu

10 min read
Customize your mobile menu to perfectly suit your site's design and layout. Your mobile menu consists of three elements; the menu icon, the menu container, and the menu items. 
You can customize and adjust each of these individually to create a unique, eye-catching menu for you and your visitors on mobile.
In this article, learn more about: 
Important:
This article refers to the mobile menu that was released at the beginning of 2019. You can update to the new one in just a few clicks. Learn how to update the mobile menu

Customizing the menu icon

The menu icon has two states; open and closed. You can select a preset icon, and customize both states to look however you'd like. 

To customize the menu icon:

  1. Click the menu icon in your mobile editor.
  2. Click the Design icon .
  3. Select a preset from the options available.
  4. Click Customize Design.
  5. Select which state you'd like to customize the icon for by clicking a tab (Closed or Open).
  6. Choose how you want to design the icon:
The design panel for the mobile menu icon. The cursor is hovering over the border color box.

Customizing the menu container

The menu box contains your menu items. Using the layout, design, and background panels, you can adjust the position and look of your menu container to suit your site. 

To customize the menu box:

  1. Click the menu icon in your mobile editor.
  2. Click Edit Menu.
  3. Click the menu container.
  4. Choose how you want to adjust the menu container with the options below:
The 'Change Background' panel of the mobile menu container. The cursor is hovering over a color.
Menu items misplaced?
You may be experiencing one of our known issues, which we're working hard to resolve. Learn more about this issue and see workarounds

Customizing the menu items

Adjust the look and design of your menu items (the menu text). You can customize settings such as the font, color, and spacing. 

To adjust the menu items:

  1. Click the menu icon in your mobile editor.
  2. Click Edit Menu.
  3. Click the mobile menu.
  4. Choose how you want to adjust the menu items with the options below:
The menu items design panel. The shadow tab is open, and the cursor is hovering over the shadow size slider.
Want to adjust your menu further?
You can customize the color of the drop-down arrow on your mobile menu. Learn how to customize the arrow
Notes:
  • If you want to add or remove elements from your menu, right-click the element and click Move To to move it between the menu box, header and footer.
  • If you can't see your subpages in your mobile menu, click here.

Did this help?

|