Horizontal menu justified positioning of items

Question

The menu on this website is not justified as intended.

This may be a repost, although I have read all previous solutions for this issue... it is breaking my brain right now.

I am currently using this CSS technique for justifying the elements of a menu :

<ul class="justified"><li>Element</li></ul>

http://jsfiddle.net/89bnF/77/

Explanation is given on CSS Tricks (last technique) :

https://css-tricks.com/equidistant-objects-with-css/

I have been using this solution on different websites and I now encounter this issue after a Wordpress update. (First time I get a problem on a theme after an upgrade).

Thanks for the help,

UPDATE #1

As of Pangloss answer, WordPress is generating <li> elements without separating them with a whitespace. This is a strange behaviour... I fixed the problem by manually adding the missing whitespace.

  $menu = wp_nav_menu($defaults);
  $menu = str_replace("</li><li", "</li> <li", $menu);

As a side note, here is an easier modern approach - http://stackoverflow.com/a/29188477/2680216 In your case, it looks like you just need to remove the pseudo elements and add back the uncommented line(s). — Josh Crozier, Jan 04 '16 at 18:52
Why not use inline-blocks with percentual width and `text-align: center` instead? — Alex, Jan 04 '16 at 18:54
Thanks for your comments, unfortunately it seems Flex is not supported by my client browser. This is why I used the "text-align:justify" positioning trick. — wlarcheveque, Jan 04 '16 at 20:14

Stickers · Accepted Answer · 2016-01-04T19:35:53.417

The text-align:justify positioning trick requires to have white space (blank space) between the child items in the markup.

In the following example, it works, because there are white spaces between the <li> tags.

ul {
  text-align: justify;
  padding: 0;
}
li {
  display: inline-block;
}
ul:after {
  content: '';
  display: inline-block;
  width: 100%;
}

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
</ul>

However, it doesn't work in the following example, because there is no white space in between them, although the CSS is exactly the same as above. It's the same issue with your WordPress generated code.

ul {
  text-align: justify;
  padding: 0;
}
li {
  display: inline-block;
}
ul:after {
  content: '';
  display: inline-block;
  width: 100%;
}

<ul><li>1</li><li>2</li><li>3</li></ul>

But, there are other ways, such as using Modern CSS3 flexbox.

ul {
  display: flex;
  justify-content: space-between;
  list-style: none;
  padding: 0;
}

<ul><li>1</li><li>2</li><li>3</li></ul>

I have meticulously checked the code and compared the HTML and CSS markup without seeing this. Thanks Pangloss. I find it strange that Wordpress menu generation with `wp_nav_menu` removes the whitespace between `

Horizontal menu justified positioning of items

1 Answers1