Menu items with percentage widths

Featured in: Display menu items with equal widths

<?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 );
view raw functions.php hosted with ❤ by GitHub
.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%;
}
view raw style.css hosted with ❤ by GitHub

Bill Erickson

Bill Erickson is the co-founder and lead developer at CultivateWP, a WordPress agency focusing on high performance sites for web publishers.

About Me
Ready to upgrade your website?

I build custom WordPress websites that look great and are easy to manage.

Let's Talk