Clean Grid Pattern
This is a really simple way to condense your menu when on smaller screens. It just drops your menu into a clean grid. Each li element is floated left and at 50% width. I'm using box-sizing: border-box; on all elements, so I don't have to worry about padding or borders - just FYI.
This method doesn't work if you have sub-navigation and if you have an odd number of menu items then you will want to make sure that the last one is 100% width.
The CSS:
.nav { width: 100%; }
.nav ul { list-style: none; padding: 0px; margin: 0px; font-weight: bold; text-align: center; }
.nav ul li { display: inline-block; }
.nav ul li a { display: block; padding: 10px 20px; text-decoration: none; color: #444; }
.nav ul li a:hover { background-color: #888; color: #fff; }
@media (max-width:48.000em){
.example-header .container { width: 100%; }
.nav ul { width: 100%; font-weight: normal; }
.nav ul li { width: 50%; float: left; }
.nav ul li:nth-of-type(odd) a { border-right: 1px solid #ccc; }
.nav ul li a { padding: 8px 0px; border-bottom: 1px solid #ccc; display: block; }
}