The Edit Menus dashboard is accessible by clicking the Navigation toolbar icon from the front-end, or from within the Appearance link from the back-end.

To create a new custom menu:

  1. Click the “create a new menu” link.
  2. Give the menu a name.
  3. Click Save Menu button.

After a menu is created, items can be added. Choose items like custom links, pages, and categories, from the left column to add to the menu.

  • Pages: allows you to choose from the list of existing pages.
  • Links: Use this option to add links to off-site URLs OR add section headers and dividers to the mobile navigation.

After items have been added to a menu, drag and drop to put them in the correct order. Click any navigation item to reveal additional configuration options. If needed, specify a different navigation label for a menu item as well as other attributes.

Drag a menu item a little to the right to make it a submenu, to create menus with hierarchy. The position of the drop target shifts over to portray the nested placement. When the menu is complete, make sure to click the Save Menu button.

You can create multiple menus. Once a menu is created these options are available:

  • Automatically add new top-level pages: Check this box so that anytime a new top-level Page is created, that Page will automatically be added to the menu.
  • Theme Locations: If more than one menu is supported, you can select where this menu should go.
  • Delete Menu: Click this link to delete the menu. Deleting also deletes the menu items.
  • Save menu: Click this button to save the menu.

Section Headers & Dividers

If extra organization is needed on the site’s mobile navigation, add section headers and dividers. Section headers will display with a larger font and no link. Use these to add descriptive sections to the navigation or a simple text headline as shown in the example. Section dividers will display a simple border that can be used to separate sections, etc.

To add a Dropdown Header:

  1. Select Links from the available options in the left column.
  2. In the URL field, enter the pound symbol.
  3. Enter the headline in the Link Text field.
  4. Add a css class of 'dropdown-header' in the CSS Classes field.
  5. Add to Menu and drag into position.
  6. Save Menu

To add a Dropdown Divider:

  1. Select Links from the available options in the left column.
  2. Enter the pound symbol in the URL and Link Text fields.
  3. Add a css class of 'dropdown-divider' in the CSS Classes field.
  4. Add to Menu and drag into position.
  5. Save Menu

Both dropdown headers and dividers are styled using the  Design Styles menu on the front-end editor toolbar.