How to Change the Shape of Genesis Menu Tabs

Most WordPress nav menus are shaped as square or rectangular blocks. Some menus use color gradients to add depth to those blocky shapes.

How can we change those menu tabs into diamonds, circles or other shapes?

We can use background images to give the illusion of different shapes, or,

We can use CSS3 to skew, make circular or to otherwise change the shape of the menu tabs.

The CSS3 method is the one we are going to use here. This guide is written for the Genesis theme framework and works with the Dynamik child theme framework too. The methods shown should be adaptable to other WordPress themes too.

The code provided below here affects the primary nav bar. Adjust the code as required for your specific nav bar by changing the menu-primary CSS selector to the selector used by your menu e.g menu-secondary.

Step 1: Wrap the Menu Tabs

To adjust the shape of menu tabs in the Genesis theme we will need to wrap each menu list item <li> tag in a wrapper div. Our wrapper div’s class will be called ‘tab-wrap’.

The wrapper for the menu tabs gives us an HTML element to target our CSS at. Using a wrapper provides greater control over the appearance and position of menu buttons.

Other shapes?

You can use CSS to make star shaped menu tabs, triangle shaped page tabs or to jazz up your menu tabs by making them crisscross one and other. Experiment and post links to your creations in the comments box below.

Word to the Wise

CSS3 is not supported out-of-the-box by legacy browsers like IE6 and IE7. IE8 also struggles with many CSS3 directives. Check CSS3 browser compatibility with caniuse.com or css3test.com. Remember to make sure your menus degrade nicely for users of out of date web browsers.

Hi Lee, great post! Used you code to create just the menu I was looking for unfortunatly, when genesis updated to 2.2 last month, it wrecked my menu.
I have it coded in studiopress Outreach Pro theme stylesheet and wondered if you already know what changed to break this menu?

Hi Scott. I tested this method with the latest release version of Genesis. You are right, the method no longer works. I now suspect the filter has changed. Give me a little bit of time and I’ll find a solution.

I suspect either the HTML of your theme has been updated to HTML5 or the CSS classes you’re targeting have altered their names or your code has been overwritten during the update. Post me a link to the website and I will check over it.