WordPress 4.4 update breaks wp_nav_menu() layout

  • Resolved lagunas

    (@lagunas)


    8 years, 4 months ago

    Hello,
    I have recently updated a website to wordpress 4.4, and experienced a change in the front-end layout when using wp_nav_menu().
    Been testing locally, and have come to the conclusion that with this css:

    nav > ul
{ text-align: justify; }

nav > ul li
{ display: inline-block;  }

nav > ul:after
{ content:''; width: 100%; display: inline-block; font-size: 0; line-height: 0; margin-bottom:2%; }

    this code displays fine:

    <nav>
<ul>
<li><a href="#">text</a></li>
<li><a href="#">text</a></li>
<li><a href="#">text</a></li>
</ul>
</nav>

    but this breaks the layout:

    <nav><ul><li><a href="#">text</a></li><li><a href="#">text</a></li><li><a href="#">text</a></li></ul></nav>

    The last html code format is the one produced by wp_nav_menu() in WordPress 4.4.
    Everything was displaying correctly before updating to the latest version.

    Is there any way I can fix this?
    Or maybe change my css to adapt it to the new html format?

    Thank you!

Viewing 7 replies - 1 through 7 (of 7 total)
  • Creative Slice

    (@creativeslice)

    8 years, 4 months ago

    I’m having this same issue. Any fix yet?

    rodsazo

    (@rodsazo)

    8 years, 4 months ago

    When using this justified layout “trick”, you need the “li” elements separated by at least one space.

    Previous versions of the nav walker (the class WP uses to construct the menu) appended a new line after every “li” element like so:

    public function end_el( &$output, $item, $depth = 0, $args = array() ) {
	$output .= "</li>\n";
}

    The newest version does not:

    public function end_el( &$output, $item, $depth = 0, $args = array() ) {
	$output .= '</li>';
}

    The result is “li” elements adjacent to one another like

    "<li> ... </li><li> ... </li>"

    with no space in between, which does not work for the justified grid layout.

    SOLUTION

    This isn’t very elegant, but you can solve the problem with this filter:

    // 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);
}

    Or something like that. 🙂

    Creative Slice

    (@creativeslice)

    8 years, 4 months ago

    Thank you rodsazo, this “fix” is perfect.

    Thread Starter lagunas

    (@lagunas)

    8 years, 4 months ago

    Thank you!!!

    whiteriverdesign

    (@whiteriverdesign)

    8 years, 4 months ago

    Perfect fix! This solved the problem for us too @rodsazo.

    I was struggling to find what was different about the menu before and after. I didn’t realise a space instead of a new line could break it so easily.

    Hopefully this get resolved in future releases as I don’t like the idea of adding filter and function workarounds for things like this on new WP version updates.

    Frank Gomez

    (@frank6tg)

    8 years, 4 months ago

    Perfect!

    hazardawareness

    (@hazardawareness)

    8 years, 4 months ago

    Thanks for this. Was directed here from my stackoverflow question regarding the same problem

    http://stackoverflow.com/questions/34306029/why-is-wordpress-outputting-menu-html-with-no-space-between-li-tags/34340506#34340506

    Apparently this ‘feature’ was submitted and included in 4.4 so don’t hold your breath that they’ll go back on it.

    https://core.trac.wordpress.org/ticket/27762

    I think it’s a crazy default to have and will break menus for everyone who is using display:inline-block; and justify.

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘WordPress 4.4 update breaks wp_nav_menu() layout’ is closed to new replies.