[CSS3] Make a horizontal-scrolling Menu

Our web app on desktop may use elements that use great deal of width. On many occasions we can’t simply turn these elements into columns so that they fit on a small screen. Such elements may not only fit inadequately on small screens, they could ruin the entire layout of our page if we’re not careful. In many cases, we can use a horizontal-scrolling menu to preserve the width, but keep it easily usable.

 

  <nav>
    <a href="">Home</a>
    <a href="">My Profile</a>
    <a href="">Favorites</a>
    <a href="">Links</a>
    <a href="">Tasks</a>
    <a href="">Promotions</a>
    <a href="">Settings</a>
  </nav>

nav {
  display: flex;
  overflow-x: auto; /*Allow children in nav can overflow in x direction*/
  -webkit-overflow-scrolling: touch; /*Let the scroll more smoothing*/
  margin: 10px 0;
}

a {
  margin-right: 20px;
  margin-bottom: 10px;
  white-space: nowrap;
}