title: How to change foundation hamburger icon to close icon on click (i.e: mobile menu open)
body: <p>In foundation menu , the drop-down menu icon is in the button as follows-</p>
  
  <p><code>&lt;button class="menu-icon dark" type="button" data-toggle=""&gt;&lt;/button&gt;</code></p>
  
  <p><a href="https://i.stack.imgur.com/Uwdst.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Uwdst.png" alt="Normal menu icon"></a></p>
  
  <pre><code>.menu-icon.dark::after {
      position: absolute;
      top: 0;
      left: 0;
      display: block;
      width: 100%;
      height: 2px;
      background: #0a0a0a;
      -webkit-box-shadow: 0 7px 0 #0a0a0a, 0 14px 0 #0a0a0a;
      box-shadow: 0 7px 0 #0a0a0a, 0 14px 0 #0a0a0a;
      content: '';
  }
  </code></pre>
  
  <p>How can i make it so that when the mobile menu is open the icon changes to this- </p>
  
  <p><a href="https://i.stack.imgur.com/MITSn.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/MITSn.png" alt="enter image description here"></a> </p>
  
  <p>And vice verse</p>
  
  <p><strong><a href="https://codepen.io/IamManchanda/pen/LymroM" rel="nofollow noreferrer">Codepen link to topbar</a></strong></p>