<div class='wrapper'>

  <h1>Super Easy <a title='Responsive Web Design'>RWD</a> Nav Menu</h1>
  <h4>(With Justified Spacing)</h4>
  
  <nav class='nav-main'>
  
    <ul>
      <li class='menu'>
          <a class='fontawesome-reorder' href='#'>Menu</a>
      </li>
      <li>
          <a class='fontawesome-home' href='/'>Home</a>
      </li>
      <li>
          <a class='fontawesome-align-left' href='/'>Articles</a>
      </li>
      <li>
          <a class='fontawesome-signal' href='/'>Analytics</a>
      </li>
      <li>
          <a class='fontawesome-truck' href='/'>Deliveries</a>
      </li>
      <li>
          <a class='fontawesome-comment' href='/'>Contact</a>
      </li>
    </ul>
    
  </nav>
  
  <nav class='nav-main'>
  
    <ul>
      <li class='menu'>
          <a class='fontawesome-reorder' href='#'>Menu</a>
      </li>
      <li>
          <a class='fontawesome-home' href='/'>Home</a>
      </li>
      <li>
          <a class='fontawesome-align-left' href='/'>Articles</a>
      </li>
      <li>
          <a class='fontawesome-signal' href='/'>Analytics</a>
      </li>
      <li>
          <a class='fontawesome-comment' href='/'>Contact</a>
      </li>
    </ul>
    
  </nav>
  
  <p class='single'>
    The two navigations above are using the exact same css. They display a standard nav bar on desktop and shrink into a dropdown menu on small screens. Using text-align: justify and inline-blocks allows the items to span the nav container evenly across no matter how many items there are. This technique requires the use of pseudo elements so beware of issues with Internet Explorer. See <a href='https://tympanus.net/codrops/2013/07/14/justified-and-vertically-centered-header-elements/'> this article</a> by the amazing Mary Lou, for more information.
  </p>
  
</div>
@import "compass/css3";

@import 'https://fonts.googleapis.com/css?family=Montserrat:300,400,700';
// uncomment the next line when weloviconfonts up back up
@import url(http://weloveiconfonts.com/api/?family=fontawesome);
/* fontawesome */
[class*="fontawesome-"]:before {
  font-family: 'FontAwesome', sans-serif;
}

html {
  background: $dkgreen;
  -webkit-font-smoothing: antialiased;
}

body {
  font-family: Montserrat, sans-serif;
  color: #fff;
  padding: 0 2em;
}

.nav-main {
  margin: 1em 0;
  ul {
    box-shadow: 5px 5px 0 rgba(0,0,0,.15);
    background: $dkgray;
    text-transform: uppercase;
    padding: 0;
    font-size: 0;
    text-align: justify;
    border-radius: 5px;
    overflow: hidden;
    &:after {
        // justify inline-block method:
        // https://tympanus.net/codrops/2013/07/14/justified-and-vertically-centered-header-elements/
        content: '';
        display: inline-block;
        width: 100%;
     }
  }
  
  li {
    font-size: 16px;
    display: inline-block;
  }
  .menu {
    display: none;
  }
  a {
    text-decoration: none;
    display: block;
    padding: 1em 1em;
    @include transition(all .2s ease-in);
    &:link {
      color: white;
      }
    &:visited {
      color: white;
      }
    &:hover {
       background: $dkyellow;
    }
    &:before {
      padding-right: .5em;
    }
  }
  @media (max-width: 767px) {
    ul {
    display: inline-block; // makes it only as wide as it needs to be
    vertical-align: top;
    position: relative;
      &:hover {
        li {
          display: block;
        }
      }
    }
    li {
      display: none;
    }
    .menu {
      display: block;
      position: relative;
    }
    a {
      padding: .5em 1em;
    }
  }

}

a {
  &:link {
    color: $yellow;
  }
  &:visited {
    color: $yellow;
  }
  &:hover {
    color: $dkyellow;
  }
}
View Compiled
Run Pen

External CSS

  1. https://codepen.io/geoffyuen/pen/hzJvd

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js