Wix Harmony Editor: Adding and Managing Menus

A site menu is connected to your site's pages and updates automatically when you add a new page. You can hide pages that should not appear in the site menu and add your own links.

1. Choose the menu type you want and drag it onto your page - Horizontal menu, Vertical menu or Hamburger menu.

2. Click the new site menu.

3. Click Manage Menu on the action bar.

4. Set up your menu:

   • Click + Add Item to add more site pages or links. 

   • Click the More Actions icon next to a menu item to rename or remove it. 

   • Hold and drag menu items to reorder the list.  

Tip: Learn more about adding and managing menu items.

1. Click Create a custom menu to add it to the page.
2. (Optional) Switch your menu's layout: 
   1. Click the new custom menu.
   2. Click Change Format on the action bar to set your menu's layout.
   3. Choose the relevant option under Menu:
      • Menu bar: Menu items are displayed in a navigation bar. Under Orientation, choose whether the bar is horizontal or vertical.
        Tip: For horizontal menus, you can also choose the Item behavior when there isn’t enough room for the items on your visitor's screen — either let the menu expand (Fit to text) or add a button to scroll through the extra items (Fit to scroll).
      • Hamburger: Visitors see an icon that they click to open the menu. This is a great option for clean, minimalistic layouts. 

You can always adjust links that you've previously added to the menu.

1. Hover over the relevant link and click the More Actions icon .

2. Click Change link.

3. Change the link type and / or its details.

4. Click Done.
   
   

1. Hover over the relevant item and click the More Actions icon .

2. Click Rename. 

3. Enter the new name. 

4. Press the Enter key on your keyboard to save your changes.
   
   

1. Hover over the relevant item and click the More Actions icon .

2. Click Remove from menu.

Notes:

• This does not delete a page from the site - it only removes the page from the menu.

• If you delete a dropdown, any pages you have added to it are removed from the menu. However, you can always re-add them to the menu.
  
  

Hold the Reorder icon  next to an item and drag it to the desired position.

Design the menu bar itself, as well as the items on the menu, using the available options:

• Fill colors : Change the color of your menu, choosing one of your brand colors or a custom color.

• Borders : Define the borders of your menu so it stands out, choosing a color, width and style. Click the Edit individual borders icon  to design each side of the border.

• Corners : Make the corners of your menu more square or round by dragging the slider under Radius. Click the Edit individual corners icon  to design each corner separately.

• Shadow : Apply inner and outer shadow to give the menu an interesting 3D effect, setting the position, blurriness, color and more.

• Spacing : Add breathing room to your content – add padding and adjust the spacing between items items.

• Layout : Decide whether or not to apply the site direction (left-to-right or right-to-left) to this menu. For vertical menus, you can also choose the menu items' width and whether dropdowns appear as open or closed.

Note: The available options vary based on what you chose to design – the menu bar itself or the menu items.

Design the text on the menu items by changing the font, color, formatting, alignment, character spacing and more.

Design the dropdowns on your menu using the available options:

• Fill colors : Change the color of your dropdown, choosing one of your brand colors or a custom color.

• Borders : Define the borders of your dropdown so it stands out, choosing a color, width and style. Click the Edit individual borders icon  to design each side of the border.

• Text  : Design the dropdown menu items by changing the font, color, formatting, alignment, character spacing and more.

• Corners : Make the corners of your dropdown more square or round by dragging the slider under Radius. Click the Edit individual corners icon  to design each corner separately.

• Shadow : Apply inner and outer shadow to give the dropdown an interesting 3D effect, setting the position, blurriness, color and more.

• Spacing : Add breathing room to your content by adding padding and adjusting the space above the dropdown and between the items.

• Layout : Choose the alignment, width and position of the dropdown and its items. Decide how many columns the dropdown should show.

Note: The available options vary based on what you chose to design – the dropdown itself or the dropdown items.

Currently, it is not possible to customize the design for when visitors click or hover over the menu. The underline that appears when visitors hover over menu items is part of the menu’s built-in design and cannot be changed or removed.

If you need more control over your navigation design, you can recreate the menu using text or button elements and add links to each one manually.