title: Why isn't my hamburger icon working?
body: <p><a href="https://codepen.io/anon/pen/QNqgMo" rel="nofollow">https://codepen.io/anon/pen/QNqgMo</a></p>
  
  <p>Why is the top line not animating? Could someone tell me what's wrong in the code?</p>
  
  <p>Thanks</p>
  
  <pre><code>#hamburger-icon.active .line-1 {
  transform: translateY(25px) translateX(0) rotate(45deg);
  -webkit-transform: translateY(25px) translateX(0) rotate(45deg);
  -moz-transform: translateY(25px) translateX(0) rotate(45deg);
  }
  #hamburger-icon.active .line-2 {
  opacity: 0;
  }
  #hamburger-icon.active .line-3 {
  transform: translateY(-10px) translateX(0) rotate(-45deg);
  -webkit-transform: translateY(-10px) translateX(0) rotate(-45deg);
  -moz-transform: translateY(-10px) translateX(0) rotate(-45deg);
  </code></pre>