WordPress – Fixing Justify Menu Items in version 4.4

I had a recent issue where a client of mine has a site and the previous developers used a method that justifies the output of list menu items.

In order to justify list items, each element needs to be separated by at least one space.

<li>Tab 1</li> <li>Tab 2</li>

This was the default end_el output of Walker_Nav_menu but it has been removed in WordPress 4.4, leaving all the nav items aligned to the left.

<li>Tab 1</li><li>Tab 2</li>

Here is a quick solution that adds the space between the li elements. It just filters through the output, searches for the end of, and start of each list item and adds the necessary space.
It probably would be better to create your own Walker class for a more long term solution though.

// Justified layout fix
add_filter('wp_nav_menu_items', 'filter_menu_items');
function filter_menu_items($menu_items){
  return str_replace('</li><li', "</li> <li", $menu_items);
}

So much thanks to the following resource https://wordpress.org/support/topic/wordpress-44-update-breaks-wp_nav_menu-layout

About Joe Buckle

10 years + experience in web development working with lots of different technology.