<nav class="main-nav">
  <ul>
    <li>Home</li>
    <li>About</li>
    <li>Clients</li>
    <li>Contact Us</li>
  </ul>
</nav>  

<div class="content-wrap">
  
  <header>
    <a id="nav-toggle" href="#0">
      <span class="menu-icon">
      <span class="top"></span>
      <span class="mid"></span>
      <span class="bot"></span>
      </span>
    </a>
  </header>
  
  <div class="inner">
  <h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae.</h1>
  
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda deserunt quo repellendus quibusdam quidem adipisci a laboriosam doloribus esse provident ipsa iste blanditiis illo aperiam explicabo eos illum. Non adipisci aliquam laudantium provident facere aliquid neque magnam minus deserunt quisquam voluptatibus numquam suscipit! Sit nesciunt.</p>
    
    <h1>Lorem ipsum dolor sit amet.</h1>
  
   <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda deserunt quo repellendus quibusdam quidem adipisci a laboriosam doloribus esse provident ipsa iste blanditiis illo aperiam explicabo eos illum. Non adipisci aliquam laudantium provident facere aliquid neque magnam minus deserunt quisquam voluptatibus numquam suscipit! Sit nesciunt.</p>
    
    <h4>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae.</h4>
  
   <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda deserunt quo repellendus quibusdam quidem adipisci a laboriosam doloribus esse provident ipsa iste blanditiis illo aperiam explicabo eos illum. Non adipisci aliquam laudantium provident facere aliquid neque magnam minus deserunt quisquam voluptatibus numquam suscipit! Sit nesciunt.</p>
   
    <h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae.</h1>
  
   <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda deserunt quo repellendus quibusdam quidem adipisci a laboriosam doloribus esse provident ipsa iste blanditiis illo aperiam explicabo eos illum. Non adipisci aliquam laudantium provident facere aliquid neque magnam minus deserunt quisquam voluptatibus numquam suscipit! Sit nesciunt.</p>
    </div>

</div>

@import "compass/css3";

@import url(https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,700);

$f: "Open Sans Condensed";
$drk: #222;
$wht: #f5f5f5;

* {@include box-sizing(border-box);}
img {max-width: 100%;}

body {
  background: $wht;
  color: $drk;
  font-family: $f;
  font-size: 130%;
  line-height: 1.6;
}

#{headings()} {line-height: 1.2;}

.main-nav {
  width: 220px;
  position: fixed;
  top: 0;
  left: -220px;
  height: 100%;
  border-right: 2px solid $drk;
  @include transition(left .5s ease, top .5s ease);
  &.show-nav {
    left: 0;
  }
  ul {
    list-style: none;
    padding: 0;
  }
  
  li {
    text-align: center;
    font-size: 1.2em;
    font-weight: 700;
  }
}

.inner {
  width: 67%;
  margin: 0 auto;
  @include transition(width .3s ease);
  .content-shrink & {
    width: 72%;
  }
}

header {
  position: fixed;
  width: 100%;
}

.menu-icon {
  display: block;
  position: relative;
  width: 40px;
  height: 40px;
  border: 2px solid $drk;
  @include border-radius(50%);
  span {
    width: 22px;
    display: block;
    height: 2px;
    background: $drk;
    position: absolute;
    left: 7px;
    @include transition(transform .33s ease-out, width .2s linear);
  }
  .top { 
    top: 11px; 
     .content-shrink & {
       top: 17px;
      @include transform(rotate(45deg));
    }
  }
  .mid {
    top: 17px;
    .content-shrink & {
     display: none;
    }
  }
  .bot { 
    top: 23px; 
    .content-shrink & {
     top: 17px;
     @include transform(rotate(-45deg));
    }
  }
}

.content-wrap {
  padding: 20px;
  @include transition(margin .5s ease);
  &.content-shrink {
    margin-left: 220px;
  }
}

#nav-toggle {
  display: inline-block;
}


@media (max-width: 48em) {
  
  nav.main-nav {
    width: 100%;
    height: auto;
    border-bottom: 2px solid $drk;
    border-right: none;
    background: $wht;
    top: -100%;
    left: 0;
    &.show-nav {
      top: 0;
    }
  }
  
  div.content-wrap {
    padding: 10px;
    &.content-shrink {
      margin-left: 0px;
    }
  }
  
  .inner {
    width: 98%;
    padding-left: 45px;
    .content-shrink & {
      width: 98%;
    }
  }
  
  body {
    font-size: 105%;
  }
   
}

$('#nav-toggle').on( 'click', function() {
  $('.main-nav').toggleClass('show-nav');
  $('.content-wrap').toggleClass('content-shrink');
});