This post will take to read.

Typically, you’re not using fixed widths when design­ing nav­ig­a­tion menus, but on a recent WordPress pro­ject, I needed to build a menu using 25% width list items. I like to use inline-block in situ­ations like this (read why here), but doing so intro­duces white space that can affect the width of your list items and break your design:

My usu­al fix is to com­ment out the white space in the html, but this isn’t the easi­est thing to do when WordPress is gen­er­at­ing the menu for you. Thankfully, since WordPress 4.7, the WordPress Code Reference provides us with a straight­for­ward fix. Simply add the item_spacing argu­ment to the func­tion array gen­er­at­ing your theme’s nav­ig­a­tion with a value of discard:

function main_nav() {
    wp_nav_menu(
        array(
            'item_spacing' => 'discard'
        )
    );
}

Your fixed width menu built using inline-block now works as expec­ted and you did­n’t have to write a cus­tom walk­er to do it!