Simple Responsive Nav

index.html

<header class="the-header clearfix">
  <div class="logo"><h1>CoolLogoDude</h1></div>
  <a href="#" class="resToggle">☰</a>
  <nav class="the-nav">
    <ul>
      <li><a href="#">Apples</a></li>
      <li><a href="#">Oranges</a></li>
      <li><a href="#">Pears</a></li>
      <li><a href="#">Strawberries</a></li>
      <li><a href="#">Kiwis</a></li>
      <li><a href="#">Grapes</a></li>
    </ul>
  </nav>
</header>

<br />

<h2 class="align-center" >&rarr; Go ahead and resize me! &larr;</h2>

script.js

$('.resToggle').click(function(){
  $('.the-nav').toggleClass('active');
});

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

Simple Responsive Nav.markdown

Simple Responsive Nav

Mostly a boilerplate one-level responsive menu

A Pen by Juan Alvarado on CodePen.

License.

style.css

*, *:after, *:before {
  box-sizing: border-box;
}
.clearfix:after {
  content: "";
  display: table;
  clear: both;
}

ul{
  margin: 0;
  padding: 0;
}

.the-header {
  background: #fa5a62;
  .logo {
    display: inline-block;
    color: white;
    float: left;
    padding: 0 10px;
  }
  a {
     color: white; text-decoration: none;
  }
}

a.resToggle { display: none;}
.the-nav {
  display: inline-block;
  float: right;
  li {
    display: inline-block;
    a {
      display: block;
      padding: 30px 15px;
    }
    &:hover a{
      background: #fc414e;
    }
  }
}

@media screen and (max-width: 768px) {
  a.resToggle { 
    display: inline-block; 
    float: right; 
    padding: 30px;
    &:hover {
      background: #fc414e;
    }
  }
  .the-nav {
    display: none;
    width: 100%;
    &.active {
      display: block;
    }
    li {
      display: block;
      border-bottom: 1px solid lighten(#fa444d, 10%);
      a {
        padding: 15px 10px;
      }
    }
  }
}

.align-center {
  text-align: center;
}