The new WordPress 3 navigation menus are an excellent tool to design your own menus, mixing pages, categories and custom links. iThemes created video tutorials on how to use the new WordPress navigation in Builder and Flexx theme. The following tutorial will show how you can replace the text links in the navigation menu with images. It can be used for any theme, on any WordPress site running WordPress 3+, but it is based on iThemes Flexx.
The Flexx theme, by design, uses graphical icons for the home page links, as can be seen in this theme demo. The WordPress 3 navigation won’t add these automatically.
In the following step by step guide, we will:
- create 2 menus, one for pages, one for categories
- create custom links to link to “home”
- integrate the menus in the WordPress layout
- figure out how we can address these links using CSS
- add the necessary css to make it all work
