overflow menu s touch swipe

by Petr Haluza

HTML

<header>
  <nav role='navigation' class="show">
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Clients</a></li>
      <li><a href="#">Contact</a></li>
      <li><a href="#">Clients</a></li>
      <li><a href="#">Contact</a></li>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Clients</a></li>
      <li><a href="#">Clients</a></li>
      <li><a href="#">Contact</a></li>

    </ul>
  </nav>
</header>

CSS

@import "https://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css";

nav { background-color:#282828;  overflow-x: scroll;  width: 100%; -webkit-overflow-scrolling: touch;}

ul { list-style: none;  margin: 0;  padding: 1em;  text-align: justify;  white-space: nowrap;}

li { background-color: #161616; display: inline-block; padding: 0.6em; text-align: center; width: auto;}

li a { color: #ccc; display: block; text-align: center; text-decoration: none;}

li a:before {
  display: block;
  font-family: FontAwesome;
  font-weight: normal;
  font-size: 2rem;
  font-style: normal;
  text-decoration: inherit;
  vertical-align: top;
  -webkit-font-smoothing: antialiased;
}

li:first-child a:before {
  content: '\f015';
}
li:nth-child(n+1) a:before {
  content: '\f05a';
}
li:nth-child(n+2) a:before {
  content: '\f0b1';
}
li:nth-child(n+3) a:before {
  content: '\f0e0';
}