Codeable info

Fool Proof Tips to Styling WP Nav Menus

Posted on by in WordPress Tutorials

Kevin wrote a great introduction tutorial on using the WordPress 3.0+ nav menus. As Kevin mentioned in that post, styling your menus can be difficult at times, especially if you are migrating from a static nav menu and attempting to maintain the same styling. Having used the 3.0 nav menus in more than a dozen custom themes myself, I’m going to give you all a few tips on how best to attack the CSS.

Always Use a Wrapper Div

If you wanted, you could just display your navigation menu like this:

1
<?php wp_nav_menu(array('theme_location' => 'main_nav','container' => '',));?>

This works fine as long as the “main_nav” menu has been created through the menu interface. But what if it hasn’t been created? If a menu doesn’t exist, wp_nav_menu() will fall back to the default WordPress nav (automatically inserting pages as they are created). The problem with this is that the HTML structure outputted by the wp_nav_menu() and the fall back wp_page_menu() is different, meaning that your CSS is likely to break. This is where the wrapper comes in.

1
2
3
<div>
	<?php wp_nav_menu(array('theme_location' => 'main_nav','container' => '',));?>
</div>

By placing a wrapper div around the menu, we can ensure that the styling never breaks because all of our CSS selectors will be targeted at the menu items in relation to the wrapper. A lot of people will code their CSS by targeting the .menu class, which is the default class for the wp_page_menu() fall back function. This is not a good practice. Unless you very carefully setup your wp_nav_menu() arguments and assign the class names and containers to match those of the fall back, you should target everything in a general manner, and in relation to the wrapper div. Let me give you a bad and a good example.

Bad

1
2
3
/****** CSS that will likely fail on fall back menu **********/
ul.menu { /* menu UL CSS */ }
ul.menu li { /* menu item CSS */

Good

1
2
3
/****** CSS that works for both menus **********/
#main-nav ul { /* menu UL CSS */ }
#main-nav ul li { /* menu item CSS */

Why is the second better? It’s because it will always work, while the first will only work if the menu UL has a class of menu, which is not always the case. The important thing to remember, is that by default, wp_nav_menu() and wp_page_menu() do not output the same HTML structure, which is why the first (Bad) one will fail. Even though the second is less efficient, in terms of CSS selectors, it is more solid.

I know this hasn’t gone very far into the actual CSS styling of the nav menus, I will get into that next time, but this is where you must start if you want your beautifully designed menus to always work.

I hope this helps anyone who has struggled with this!

)
Codeable info

Comments (3)

Comment by Pagetopia.com says:

I added this fix to a header… about ten minutes later I thought to come back and say thanks – THANKS!

Comment by Simon says:

A good tip, this has always annoyed me, I’m not sure what the rationale was behind the decision. WordPress includes a number of options for adding classes and ID’s to the nav menu and it’s auto-generated container but all of these are rendered useless by the fact that they only appear if a menu has been set up in the dashboard.

Another thing to watch out for is dynamic highlighting. wp-nav includes a handy .current_menu_item class but again this only appears if a menu is defined. .current_page_item is a much better bet if you want your styles to be bulletproof.

Comment by laxmankasula says:

Nice tips.
Need to think about the default fallback menu from now on.

Codeable info