Hamburger http://cl.ly/image/1Y0K3x3L0H1U

menu-button.html

<a class="menu-button js-menu-button"
  href="#"
  aria-owns="site-menu"
  aria-controls="site-menu"
  title="Menu">
  <span>Toggle Menu</span>
</a>

menu-button.scss

.menu-button {
  display: block;
  height: 70px;
  position: relative;
  -webkit-tap-highlight-color: rgba(black, 0);
  width: 70px;
  z-index: 2;

  @include media($medium-screen) {
    height: 20px;
    width: 20px;
  }

  span { // creates the icon
    bottom: 0;
    direction: ltr;
    display: block;
    left: 0;
    margin: auto;
    right: 0;
    text-indent: -999em;
    top: 0;

    &,
    &:before,
    &:after {
      background-color: white;
      display: block;
      height: 1px;
      position: absolute;
      width: 20px;
    }

    &:before,
    &:after {
      @include fast-transition();
      content: '';
      left: 0;
      margin: 0 auto;
      right: 0;
    }

    &:before {
      top: -6px;
    }

    &:after {
      bottom: -6px;
    }
  }

  @include media($medium-screen) {
    &:hover {
      span {
        &:before {
          @include transform(translateY(-2px));
        }

        &:after {
          @include transform(translateY(2px));
        }
      }
    }
  }
}

.menu-open { // toggle class on `body` via JS
  .menu-button {
    span {
      & {
        background-color: rgba(white, 0);
      }

      &:before {
        @include transform(rotate(-45deg));
        @include fast-transition();
        top: 0;
      }

      &:after {
        @include transform(rotate(45deg));
        @include fast-transition();
        bottom: 0;
      }
    }

    @include media($medium-screen) {
      &:hover {
        span {
          &:before {
            @include transform(rotate(-45deg) scale(1.15));
          }

          &:after {
            @include transform(rotate(45deg) scale(1.15));
          }
        }
      }
    }
  }
}