Navigation Menus

We’ve packed in some cool features in working with navigation menus that you may not be aware of that you can utilize when using WordPres’s menu builder at Appearance > Menus.

Icon Integration

Incorporate any of the Font Awesome icons into your navigation by adding the class “menu-icon-{name_of_icon}” — Make sure this is the first class you add to the menu item if you have other CSS classes attached.

Headers and Dividers

Also, you can utilize the classes “nav-header” and “divider” to do some cool things with your WordPress navigation menus. Take the menu over to the right of this page, for example.

This menu was built in WordPress’s menu builder and then inserted into the sidebar with the “Custom Menu” widget. It utilizes not only the icons discussed above, but also header and dividers.

[alert style=”info”]Note: The “divider” class doesn’t work great with Alyeska because of how lists in widgets are styled. Your menu will look a little nicer if you use headers to separate things.[/alert]

No-click Menu Items

This is a real subtle one… Have you ever created a drop down menu on your primary navigation menu, but then realized you don’t have anywhere for the parent menu item to go? — Well, in this case you can simply create a blank menu item and then add the CSS class “no-click”.