<input id="nav-state" type="checkbox">
    <label id="nav-label" for="nav-state"></label>
      <li><a href="#">Work</a></li>
      <li><a href="#">Services</a></li>
      <li><a href="#">Company</a></li>
      <li><a href="#">Blog</a></li>
      <li><a href="#">Careers</a></li>
      <li><a href="#">Contact</a></li>
If you open this page in a standalone browser and resize the screen you'll notice a few things. 
   <ul> <li>First, you'll see that the menu above will resize it's font to be screen appropriate using a media querry. </li>
   <li> The "more" menu should appear on smaller screens and allow you to expand the menu vertically. This works well for small screens and gives much better information scent. </li>
   <li>On small screens the top menu should also scroll horizontally. This partially works, but would need some fixes to work well across mobile browers. </li>
   <li>Future adoptation would include support for sub-menu items that would be drop-down when using a mouse and drill-down when on small devices that don't support hover. 

body,html {
nav {
  width: 100%;
  background-color: #1a1a1a;
#nav-label {color:#fff;background-color:red;display:block;position:relative;}
nav ul {
  position: relative;
  margin: 0;
  padding: 0 12px 0 0;
  list-style: none;
  white-space: nowrap;
  overflow: hidden;
  overflow-x: scroll;
  -webkit-overflow-scrolling: touch;
  overflow-scrolling: touch;


nav li {
  display: inline-block;

nav a {
  display: block;
  padding: 10px;
  color: #fff;
  text-decoration: none;

#nav-state {
  display: none;

@media (max-width: 400px) {

  nav li {
#nav-state:checked ~ ul > li {
  display: block;

#nav-state:checked ~ label::before {
  content: 'Less';

nav label {
  float: right;
  color: #fff;
  padding: 10px 10px 10px 25px;
  cursor: pointer;
label::before {
  content: 'More...';


External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.