This post will take to read.
Typically, you’re not using fixed widths when designing navigation menus, but on a recent WordPress project, I needed to build a menu using 25% width list items. I like to use inline-block
in situations like this (read why here), but doing so introduces white space that can affect the width of your list items and break your design:
My usual fix is to comment out the white space in the html, but this isn’t the easiest thing to do when WordPress is generating the menu for you. Thankfully, since WordPress 4.7, the WordPress Code Reference provides us with a straightforward fix. Simply add the item_spacing
argument to the function array generating your theme’s navigation 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 expected and you didn’t have to write a custom walker to do it!