Responsive nav menu with blocks

Question

I am wondering how to accomplish the way this site has their navigation - at about 60em it stacks into 6 blocks , with text centered and icon on top, I would like to accomplish the same, with either 4 to 6 blocks in my navigation when resized to about 60em.

Here is a jsfiddle

I appreciate the help

  <header class="header">

            <nav class="nav">
        <ul>
                <li>Home</li>
                <li>Home</li>
                <li>Home</li>
                <li>Home</li>
        </ul>
    </nav>


 </header>

CSS

nav {text-align: center;} 
nav ul li { display: inline-block;}

Answer 1

They are using media queries . Are you familiar with these already?

Their breakpoint is at 60em . So, in their stylesheets they have media queries that style the same elements differently on the condition that the viewport is under 60em . For example, the ul in their markup with class nav has this media query conditional and resulting styles:

@media screen and (max-width: 60em)
header .nav {
width: 100%;
float: left;
}

ie When the viewport is under 60em any DOM element with class nav inside a header element will have 100% width and float left.

EDIT

If you are asking how to specifically stack the elements, you can just float them left and when the elements widths exceed the width of the container they will break and drop down below the first floated element inside the container. So, if you have four elements, you will want to style them with something like:

ul.nav li {
float:left;
width:50%;
}

If this doesn't work, make sure your elements are EXACTLY 50%. Margins, border, padding will all affect the width of the element and if it exceeds 50% they will just stack on top of each other. If you for some reason have their display as table then whitespace in your markup (HTML file) will also affect the width.

I updated your fiddle so you can see a working example: http://jsfiddle.net/QAEQ3/1/