The Menu icon plugin provides an easy way to add icons to your custom menu.

Once you’ve activated the Menu icon plugin in Plugins > All, you’ll see an option to select an icon to add to a menu item.

Select icon

Set up custom menu

1. Go to Appearance > Menus

Menu

2.  Add a menu title and then click Create Menu.

The default menu title ‘Menu 1’ automatically includes a custom Home link to your homepage and any pages you’ve published.  You can change the title ‘Menu 1’ to any name you want.

Here’s what a default menu structure looks like on a newly created blog:

Default menu

After you’ve created your new menu you will notice the following two new settings appear at the bottom of the menu:

  • Auto add pages – if selected, new pages are automatically added to your custom menu when the page is published.
  • Theme locations – allows you to control where the custom menu appears in your theme.

3.  Select Primary menu if you want your new menu to display in the top navigation on your blog.

Select primary menu

4.  Check the boxes next to the pages you want to add to your menu and click Add To Menu.

Add Menu item

5. Drag and drop the link item where you want it to appear on the menu.

Any menu item that is indented under another item will appear as a sub-menu under that tab i.e. you create sub-menus or ‘drop down’ style menus by dragging the individual menu items to the right to ‘nest’ them under a parent item.

Drag menu items

6.  Click on the down arrow to the right of a menu item to access the option to select an icon.

Click on arrow

7.  Click on Select next to icon.

Select icon

8. Click on the icon you want to use in the Dashicons window.

Select Icon

You can modify the following:

  • Hide Label – by default the menu item displays the icon and navigation label.
  • Position – the icon can be displayed before or after the navigation label.
  • Vertical align – super, top, text top, middle, baseline, text bottom, bottom or sub.
  • Font size – used to change the size of the icon.

9. Click Select to add the icon to your menu item.

10.  Click Save Menu once you’ve finished setting up your menu.

Custom menu with icons

Contact Edublogs Support if you need help setting up your custom menu.