Horizontal menu justified positioning of items

1 Views

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.

Read More

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);
Post Views: 1

Related posts

1 comment

  1. 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>

Comments are closed.