Remove Whitespace Between List Items Generated By wp_nav_menu()

September 26th, 2014 - Posted by Steve Marks to (X)HTML / CSS, PHP, Web Development.

Earlier today I was using wp_nav_menu() function within WordPress to output a navigation menu on a site. I was getting an issue however whereby the whitespace between the list items (<li>) was causing spaces between the menu items on the frontend. My list items had the ‘display’ CSS property set as ‘inline-block’ so I was getting visible gaps between them.

To conquer this I came up with the following snippet of code to strip out the whitespace:

echo preg_replace( '/li>\s+
  • FALSE, 'theme_location' => 'mainnav', 'echo'=>0 ) ) );
  • Sticking with the normal use of wp_nav_menu(), instead of outputting it straight to the screen I set the ‘echo’ argument to FALSE (or zero) and run the output through preg_replace().

    This entry was posted on Friday, September 26th, 2014 at 9:23 am by +Steve Marks and is filed under (X)HTML / CSS, PHP, Web Development. You can follow any responses to this entry through the RSS 2.0 feed.

    Fear not, we won't publish this

    Comments (0)

    No comments have been left yet. Be the first