How to modify the output of the _wp_menu_output function of menu-header.php file

What you’re dealing with is the 0.25em/4px margin that browsers automatically add to inline/inline-block list items. The solution you mention is possible by writing your own “walker” class for your wp_nav_menu() which would allow you to override the HTML of the list items before they’re printed to the screen. There are easier ways to address this, but if you insist on implementing the custom HTML solution, you want to look up writing a custom nav walker and calling it in your wp_nav_menu() call in your theme.

The other solutions are CSS-based:

• float your items left, which collapses the space between them
• set the font size on the ul to 0, and then set the font size on your li back to your target font size

Either one of these works extremely well, but I can’t recommend which you should use as I don’t know enough about your nav menu.

(Note: In response to the other discussion we’re having, your “hooK” here is actually being able to write the custom walker class which you would include in your theme folder and call from your functions file and wp_nav_menu() function.)

Thank you New Nine, I’ll look into writing a new walker class as you suggest.

Also, I appreciate that you have suggested some other possible alternatives. I’ve already tried floating the items, however, and in order to get that to work with other divs and button elements in the menu, I’d have to modify the html anyway; so might as well fix the “\n\t” problem. (It would be nice if WordPress commented these out in some future release, but I understand that it might cause problems for those who have already added negative margins in their css; and besides, someday, perhaps css4 or 5 will include a white-space-collapse property that will provide another solution to this problem).

Also, the reason I don’t want to go with the font sizing solution is because it has been suggested that it may have different behaviors in various situations; it just doesn’t seem very solid to me.

Anyway, rewriting the walker class may not be the easiest solution, but I think it is the right solution and exactly what I’m looking for; so thank you for your direction.

OK, just to provide an update for anyone else who might have to deal with this issue, here’s what I did:

It turns out all I needed was to override the end_el walker function, which is very short, and in the end, I put the following in a file in my child dir:

<?php
class Storefront_child_Walker_Nav_Menu extends Walker_Nav_Menu {
	public function end_el( &$output, $item, $depth = 0, $args = array() ) {
	    $output .= "</li><!--\n-->";
	}
}

Then required it in my functions.php file, like so:
‘require (‘inc/child_storefront_walker_nav_extension.php’);’ (I could have just added it directly to my functions.php file without putting it in a separate file I suppose…).

I also then had to locate where the wp_nav_menu function was called in my parent theme, I copied that whole function to another file in my child theme and required it in a similar manner as the file above, and inside that function, I modified the call from this:

wp_nav_menu(
				array(
					'theme_location'	=> 'primary',
					'container_class'	=> 'primary-navigation',
					)
			);

to this:

wp_nav_menu(
				array(
					'theme_location'	=> 'primary',
					'container_class'	=> 'primary-navigation',
					'walker' => new Storefront_child_Walker_Nav_Menu(),
					)
			);

In some cases I think instead of just requiring or including these files, you might need to do something like this in your functions.php file: remove_action('function_that_called_the_wp_nav_menu','function_name'); and then: add_action('new_overridden_function','function_name');

Anyway, I hope that is descriptive enough to help someone else…