If you’d like all your menu items to be the same size, you use a percentage as the width. If you have 4 menu items, you set the width of each menu item to be 25% in your CSS.
But what if you add another menu item? The fifth one drops to another line since it doesn’t fit. You could use Javascript to count and resize them, but then you’d get a flash of unstyled content while the Javascript waits for the page to finish loading.
Or, you can use the built-in WordPress filters to do it. We’re using the nav_menu_css_class
filter to customize the classes on the menu items.
<?php | |
/* | |
* Equal Sized Menu Items | |
* @author Bill Erickson | |
* @link http://www.billerickson.net/menu-item-equal-widths/ | |
* | |
* @param array $classes, current menu classes | |
* @param object $item, current menu item | |
* @param object $args, menu arguments | |
* @return array $classes | |
*/ | |
function be_equal_sized_menu_items( $classes, $item, $args ) { | |
// Only run on the header menu | |
if( 'header' !== $args->theme_location ) | |
return $classes; | |
// Only run on top level menu items | |
if( $item->menu_item_parent ) | |
return $classes; | |
// Grab all menu items | |
$menu_items = wp_get_nav_menu_items( $args->menu->term_id ); | |
// Remove submenu items | |
foreach( $menu_items as $i => $menu_item ) | |
if( $menu_item->menu_item_parent ) | |
unset( $menu_items[$i] ); | |
// Count all top level items, and add as a class | |
$classes[] = 'count-' . count( $menu_items ); | |
return $classes; | |
} | |
add_filter( 'nav_menu_css_class', 'be_equal_sized_menu_items', 10, 3 ); |
.genesis-nav-menu .menu-item.count-2 { | |
width: 50%; | |
} | |
.genesis-nav-menu .menu-item.count-3 { | |
width: 33.3333%; | |
} | |
.genesis-nav-menu .menu-item.count-4 { | |
width: 25%; | |
} | |
.genesis-nav-menu .menu-item.count-5 { | |
width: 20%; | |
} | |
.genesis-nav-menu .menu-item.count-6 { | |
width: 16.666666667%; | |
} | |
.genesis-nav-menu .menu-item.count-7 { | |
width: 14.285714286%; | |
} | |
.genesis-nav-menu .menu-item.count-8 { | |
width: 12.5%; | |
} | |
.genesis-nav-menu .menu-item.count-9 { | |
width: 11.111111111%; | |
} | |
.genesis-nav-menu .menu-item.count-10 { | |
width: 10%; | |
} |
First I make sure that this is the ‘header’ menu location, since that’s the only menu I want to affect. I also make sure this is a top level menu item (I don’t want my submenus affected). I use wp_get_nav_menu_items()
to get a list of all menu items in the menu, filter this list down to only top level menu items, count them up and add it as a class to the menu item.
So if you have 4 menu items, each one will have a class of “count-4”. If you add another menu item, they all will have a class of “count-5”. The CSS styles all the different variations: count-4 is 25% wide, count-5 is 20% wide…
This will work with any WordPress theme. Since I use Genesis, my CSS targets the .genesis-nav-menu
. If you use a different theme just update this to match whatever class your nav menus have.
Vanja says
Thanks for sharing but it didn’t work for me so I had to work a little bit on this. Just few lines added and here is complete function with comments of what I add/change: https://gist.github.com/billerickson/7bedd32df2dfc86b7030f38b0d3134b5