Note: If you are unfamiliar with the WordPress menus, please take a few moments to watch the Custom Menu WordPress video tutorial.
Caroline comes configured with two navigation menu areas. The Secondary Navigation Menu will show in the on the right side of the site header.
In this menu we’ve built in an incredibly simple and powerful way to display a wide variety icons above the text links by building in Genericons to the theme.
To configure this menu:
- Go to Appearance –> Menus
- If you don’t already have a menu, click the create a new menu link
- On the left hand side click on any pages or links you wish to add to your menu
- Click the Add to Menu button
- On the right hand side arrange your menu items as desired via drag and drop
- Add the CSS Classes for the icon you wish to display (more on that below)
- Towards the bottom of the Right hand side check the box to set this menu for the Secondary Navigation Menu theme location
WordPress does not display the setting for the individual link CSS classes by default so you may need to check your screen options (item 1 in the screenshot below) to enable that CSS Classes setting (item 2):
You may put the genericons CSS classes to display any genericon you like in the CSS classes field. To find the available options go to the Genericons website, and click on the icon you wish to use. Then next to the icon at the top of the page click on the Copy HTML link. Use the classes shown inside the span tag that pops up.
For example the popup for the Home icon (looks like a small house) contains this:
So to use that icon we put just genericon genericon-home in the link setting CSS Class for that link. You may do the same thing for each link in your Secondary Navigation menu.
Here are the CSS classes for the icons used in our theme demo:
- Home –> genericon genericon-home
- Activity –> genericon genericon-time
- Groups –> genericon genericon-website
- Blog –> genericon genericon-edit
- Members –> genericon genericon-sitemap
- Forums –> genericon genericon-chat
- Contact –> genericon genericon-mail
Remember to click the Save Menu button to lock in your changes.
