Building Custom Menus Novice

Go to the Appearance > Menus in the sidebar in order to load the Menu Editor page. From this page you can control anything related to your website menus.

Create a new menu

  1. Click the create a new menu link at the top of the page.

  1. Enter a name for your new menu in the Menu Name box.
  2. Click the Save Menu button.

Adding items to a menu

Once a menu is created, you can add items into it. On the left column you can find different custom links, pages or categories that can be added to your menu.

  1. Select the Pages tab.
  2. Press the View All link to bring up the pages published on your website.
  3. Select the Pages you want to add by selecting the checkbox next to each Page title.

  1. Click the Add to Menu button to add your selection(s) to the menu that you've just created.
  2. Click the Save Menu button on the right hand side once you have added all the menu items you want.

Deleting a menu item

  1. Select the menu item that you want to delete from the menu editor screen.
  2. Press on the arrow icon in the top right-hand corner of the menu item/box to expand it.
  3. Click on the Remove link. The menu item/box will be immediately deleted.

  1. Click the Save Menu button on the right hand side to save your changes.

Customizing menu items

Each Menu Item includes a configuration panel. Click the small gray arrow on the right side of the item title to open it. You may temper with different options depending on the item menu:

  • The Navigation Label - what your readers will see when visiting your website.
  • The Title Attribute - this text will be shown when the user’s mouse hovers the menu item.
  • Description (HTML) - this option is not supported by the current theme.
  • CSS Classes - lets you further style a menu item using CSS. By default this option is not visible, you need to enable it from Screen Options panel on the top.

Information

This theme comes with a ready to use CSS class: menu-separator. Use this class if you want an item to act as a menu separator. What this class does is strips down all the css related to a menu item: link, hover color, etc.

Back-end

Front-end

  • Icon - lets you add an icon to your menu item.
  • Move - use this option to change the item's position in the menu.

Once you have finished, press the Save Menu button to save your changes.