It's just a matter of adjusting the width of the <li>tags
li { width: 25%; float: left; }
@media screen and ( min-width: 960px ) {
li { width: 12.5%; }
}
^ That should work
Edit: To clarify, if you have 8 elements, that will take it from two rows of 25% width elements, to 1 row of 12.5% elements. Obviously, if you have a different page count, those numbers will change.
I'm trying to figure out how to make a menu bump down to two rows like Chris did on here. Can anyone help me with this?
You mean when the browser is resized? That's done with media queries.
http://css-tricks.com/css-media-queries/
I get it changes with media queries but I didn't know how he made it bump down to a second line.
It's just a matter of adjusting the width of the
<li>tags^ That should work
Edit: To clarify, if you have 8 elements, that will take it from two rows of 25% width elements, to 1 row of 12.5% elements. Obviously, if you have a different page count, those numbers will change.
There is a great tutorial for a similar effect here: http://www.onextrapixel.com/2012/08/27/creating-a-css3-responsive-menu/
As @ChrisP said - it's just about the li widths. If you want a row of 8 at desktop, use 12.5% width (of their container, which is 100% width).
Then if you stick them at 25% it will naturally force the last four onto a line below.