Make Menu Items Equal Widths for Clean, Consistent Layouts

If you want every menu item to share the same width, the simplest approach is to use a percentage width in your CSS. For example, if there are four items in your menu, set each item’s width to 25% so they fill the full row evenly.

However, when you add a fifth item the layout can break: the extra item usually wraps to a new line because the previous fixed percent widths no longer fit. One option is to use JavaScript to count items and update widths dynamically, but that often causes a flash of unstyled content while the script waits for the page to load.

An alternative that avoids JavaScript is to use WordPress filters to add a class to each menu item indicating the total number of top-level items. In this example we use the nav_menu_css_class filter to append a class such as count-4 or count-5 to each top-level item. That allows you to set widths in CSS once, with no runtime calculation in the browser.

theme_location ) {
        return $classes;
    }

    // Only run for top-level menu items.
    if ( $item->menu_item_parent ) {
        return $classes;
    }

    // Get all items for this menu.
    $menu_items = wp_get_nav_menu_items( $args->menu->term_id );

    // Remove submenu items so we only count top-level items.
    foreach ( $menu_items as $i => $menu_item ) {
        if ( $menu_item->menu_item_parent ) {
            unset( $menu_items[ $i ] );
        }
    }

    // Add a class with the count of top-level items.
    $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%; }

How it works: the PHP hook runs during menu rendering and adds a class to each top-level menu item that reflects the total number of top-level items. If your menu contains four items, each top-level

will include the class count-4. When you add a fifth item, the class becomes count-5 across all items. The CSS then sets each item’s width based on that class so all items remain equal in width and aligned on a single row.

Notes and customization:

• This method targets only a specific menu location (‘header’ in the example). You can change that to any registered theme location you want to affect.
• The example CSS targets .genesis-nav-menu because the author uses the Genesis theme. For other themes, replace that selector with the appropriate navigation container class or ID used by your theme.
• No JavaScript is required, so there’s no flash of unstyled content and the layout is consistent as soon as the CSS loads.
• If you support more than ten items, add additional count-N rules to cover higher counts or use a more flexible CSS approach (for example, CSS Grid or flex with equal distribution) if that suits your design.

This solution is simple, reliable, and compatible with any WordPress theme after you adjust the CSS selector to match your theme’s markup. It keeps menu items evenly distributed without client-side scripting and makes it easy to maintain consistent navigation design as menu items change.