2

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>
Community
  • 1
  • 1
EricC
  • 5,720
  • 13
  • 52
  • 71

1 Answers1

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?

tao
  • 82,996
  • 16
  • 114
  • 150
  • The answer is exatly what I needed, thanks! :) But I realize I did a mistake, I needed 5 columns (and not 2) for my 10 list items, so they are equally split between two rows. – EricC Dec 09 '15 at 15:48
  • If you only have 10 items, you can just use `display: flex` on `pure-menu-list` and `flex-basis: 20%` on `.pure-menu-item`. If you number of menu items differs, you'll need javascript to count them. Glad I could help. – tao Dec 09 '15 at 15:51
  • Is this better than the white-space suggestion? In addition, since we are on the subject :) If you check the [Plunker](http://plnkr.co/edit/Vxaooy), I have added your white-space, but now the small screen vertical menu does not work properly any more (remove the white-space and see, it should be a 10 row list). – EricC Dec 09 '15 at 15:55
  • Wrap my css in a `@media (min-width: ZZZpx) {...}` where ZZZ is the width of the viewport where you don't want it to apply anymore. – tao Dec 09 '15 at 16:04
  • Thanks again, that worked great :) Just info for other readers: it was the class with the columns that needed the @media, not the class with the white-space (my bad) – EricC Dec 09 '15 at 16:31
  • A question regarding the solution: The original question had equal length string links, so the result was pretty nice looking 2 rows of 5 columns, but if the links are swapped with different length strings, then this is not any more 5 nice columns, see the same [plunk](http://plnkr.co/edit/Vxaooy) altered accordingly. How come and how could this be fixed? – EricC Dec 09 '15 at 19:02
  • If you want your divisions to have equal length, use *box model* (`columns` or `display:inline-block` or `float:left`). If you want them to find the best fit, considering the contents, use *flexbox model* (`display:flex`). That's what flex does. It flexes with the content. :) – tao Dec 09 '15 at 19:08
  • I also tried `display: flex` on `pure-menu-list` and `flex-basis: 20%` on `.pure-menu-item`, but I could not get it to work. See this forked [Plunk](http://plnkr.co/edit/KSjSpC) – EricC Dec 09 '15 at 19:08
  • Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/97440/discussion-between-andrei-gheorghiu-and-ericc). – tao Dec 09 '15 at 19:08
  • Not very fond of plunk, so here's [a fiddlle](http://jsfiddle.net/websiter/rhstqggn/) with what i think you are after, overriding pure's box model for menu with flexbox model. Just wrap it inside a media query for the width you want it applied. – tao Dec 09 '15 at 19:46