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:
To view the full content, please sign up for the membership.
Already a member? Log in below or here.