.nav-icon {
  width: 26px;
  cursor: pointer;
  display: inline-block;
  -webkit-transition: all .3s ease-in-out;
  -o-transition: all .3s ease-in-out;
  transition: all .3s ease-in-out;
}

.nav-icon:after, 
.nav-icon:before, 
.nav-icon div {
  background-color: #fff;
  content: '';
  display: block;
  height: 2px;
  margin: 7.25px 0;
  -webkit-transition: all .3s ease-in-out;
  -o-transition: all .3s ease-in-out;
  transition: all .3s ease-in-out;
  border-radius: 10px;
}

.nav-icon:after{
    margin-bottom: 0;
}

.nav-icon:before{
    margin-top: 0;
}

.nav-icon div {
  -webkit-transform-origin: 0 50%;
      -ms-transform-origin: 0 50%;
          transform-origin: 0 50%;
}

.nav-icon:before {
  -webkit-transform-origin: 0 0;
      -ms-transform-origin: 0 0;
          transform-origin: 0 0;
}

.nav-icon:after {
  -webkit-transform-origin: 0 100%;
      -ms-transform-origin: 0 100%;
          transform-origin: 0 100%;
}

.nav-icon.animate::before{
  -webkit-transform: rotate(45deg) translate(4px , -4px);
      -ms-transform: rotate(45deg) translate(4px , -4px);
          transform: rotate(45deg) translate(4px , -4px);
  background-color: #fff;
}

.nav-icon.animate div{
  opacity: 0;
  -webkit-transform: scaleX(0);
      -ms-transform: scaleX(0);
          transform: scaleX(0);
  background-color: #fff;
}

.nav-icon.animate::after{
  -webkit-transform: rotate(-45deg)  translate(4px , 4px);
      -ms-transform: rotate(-45deg)  translate(4px , 4px);
          transform: rotate(-45deg)  translate(4px , 4px);
  background-color: #fff;
}