Trying to split a horizontal nav (ul) into two rows

Question

Using PureCSS I am trying to change their Responsive Horizontal-to-Vertical Menu example to fit my needs.

I want to split a horizontal nav into two rows, and I am unsuccessfully trying to use css3 columns, as described in this Stackoverflow answer.

How could I solve this? Maybe I must override something that PureCSS has set?

See this Plunker. Note, the horizontal nav is hidden for widths under 1024px, so make it wide to see the (horizontal) nav (there is also an vertical nav for smaller sizes that is not interesting here).

The relevant (selfmade) CSS is:

.pure-menu-list {
    columns: 2;
    -webkit-columns: 2;
    -moz-columns: 2;
    list-style-position: inside;
    text-align: center;
}

The HTML:

  <div class="custom-wrapper pure-g" id="menu">
    <div class="pure-u-1 pure-u-lg-1-5">
      <div class="pure-menu">
        <a href="#" class="pure-menu-heading custom-brand">Braand</a>
        <a href="#" class="custom-toggle" id="toggle"><s class="bar"></s><s class="bar"></s></a>
      </div>
    </div>
    <div class="pure-u-1 pure-u-lg-4-5">
      <div class="pure-menu pure-menu-horizontal custom-can-transform">
        <ul class="pure-menu-list">
          <li class="pure-menu-item"><a href="/1" class="pure-menu-link">Navlink number 1</a></li>
          <li class="pure-menu-item"><a href="/2" class="pure-menu-link">Navlink number 2</a></li>
          <li class="pure-menu-item"><a href="/3" class="pure-menu-link">Navlink number 3</a></li>
          <li class="pure-menu-item"><a href="/4" class="pure-menu-link">Navlink number 4</a></li>
          <li class="pure-menu-item"><a href="/5" class="pure-menu-link">Navlink number 5</a></li>
          <li class="pure-menu-item"><a href="/6" class="pure-menu-link">Navlink number 6</a></li>
          <li class="pure-menu-item"><a href="/7" class="pure-menu-link">Navlink number 7</a></li>
          <li class="pure-menu-item"><a href="/8" class="pure-menu-link">Navlink number 8</a></li>
          <li class="pure-menu-item"><a href="/9" class="pure-menu-link">Navlink number 9</a></li>
          <li class="pure-menu-item"><a href="/10" class="pure-menu-link">Navlink number 10</a></li>
        </ul>
      </div>
    </div>
  </div>

Answer 1

Displaying elements on multiple rows has nothing to do with columns, but with wrapping. You want to override the white-space: nowrap; set by Pure on .pure-menu-horizontal:

div.pure-menu-horizontal {
     white-space: initial; 
}

<link href="http://yui.yahooapis.com/pure/0.6.0/pure-min.css" rel="stylesheet"/>

      <div class="custom-wrapper pure-g" id="menu">
        <div class="pure-u-1 pure-u-lg-1-5">
          <div class="pure-menu">
            <a href="#" class="pure-menu-heading custom-brand">Braand</a>
            <a href="#" class="custom-toggle" id="toggle"><s class="bar"></s><s class="bar"></s></a>
          </div>
        </div>
        <div class="pure-u-1 pure-u-lg-4-5">
          <div class="pure-menu pure-menu-horizontal custom-can-transform">
            <ul class="pure-menu-list">
              <li class="pure-menu-item"><a href="/1" class="pure-menu-link">Navlink number 1</a></li>
              <li class="pure-menu-item"><a href="/2" class="pure-menu-link">Navlink number 2</a></li>
              <li class="pure-menu-item"><a href="/3" class="pure-menu-link">Navlink number 3</a></li>
              <li class="pure-menu-item"><a href="/4" class="pure-menu-link">Navlink number 4</a></li>
              <li class="pure-menu-item"><a href="/5" class="pure-menu-link">Navlink number 5</a></li>
              <li class="pure-menu-item"><a href="/6" class="pure-menu-link">Navlink number 6</a></li>
              <li class="pure-menu-item"><a href="/7" class="pure-menu-link">Navlink number 7</a></li>
              <li class="pure-menu-item"><a href="/8" class="pure-menu-link">Navlink number 8</a></li>
              <li class="pure-menu-item"><a href="/9" class="pure-menu-link">Navlink number 9</a></li>
              <li class="pure-menu-item"><a href="/10" class="pure-menu-link">Navlink number 10</a></li>
            </ul>
          </div>
        </div>
      </div>

Is this what you wanted or you want to count the items and make sure they are equally split between two rows?