In this article I share how I have set up circular navigation items in the Primary Navigation of Genesis in a recent PSD > WP project.
Each image is a sprite with regular state and hover state images next to each other horizontally.
Since the desired icons' size is 60 x 60, I have set 120 x 120 sized regular and hover images in each sprite to ensure that images look sharp on retina displays by using double resolution.
240 x 120 sprite image for the 'Manufacturing' menu item:
All the sprite images have been uploaded to nav-icons directory inside child theme's images directory.
Here's the CSS:
I like that look, gonna have to try this on a legal website I’m working on. Thanks for the great idea and tutorial.
Is there a way to keep the circular icons from being on the sub-menu items also? I mod’ed my site TheOldRailroadBridge.com (http://oldrailroadbridge.com/) and the circular menu items appeared on all of the sub menu selections
I see that Andrea Whitmer provided you with the working solution.
For anyone looking for an answer to the same, go here.