CSS-Hamburger-Icon.markdown

CSS Hamburger Icon

A Pen by Elijah Manor on CodePen.

License.

index.html

<a id="nav-toggle" href="#"><span></span></a>

style.css

#nav-toggle span, #nav-toggle span:before, #nav-toggle span:after {
  cursor: pointer;
  border-radius: 1px;
  height: 5px;
  width: 35px;
  background: white;
  position: absolute;
  display: block;
  content: '';
}
#nav-toggle span:before {
  top: -10px;
}
#nav-toggle span:after {
  bottom: -10px; 
}

style.scss

#nav-toggle span {
  &, &:before, &:after {
    cursor: pointer;
    -webkit-border-radius: 1px;
    border-radius: 1px;
    height: 5px;
    width: 35px;
    background: white;
    position: absolute;
    display: block;
    content: '';
  }
  &:before {
    top: -10px;
  }
  &:after {
    bottom: -10px; 
  }
}