title: Bootstrap mobile menu icon change to x close
body: <p><strong>EDIT</strong></p>
  
  <p><a href="https://stackoverflow.com/a/59214165/4513512">@zim</a> answer uses 2020 CSS to easily solve the issue and better applies to Bootstrap 4.</p>
  
  <p>The original question and selected answer are still valid and very informative.</p>
  
  <p><strong>ORIGINAL QUESTION</strong></p>
  
  <p>I would like, when in mobile view, for the menu icon (defined with class icon-bar in the bootstrap basic navbar example) to change to an X shape (Something similar to what happens here: <a href="https://www.mint.com" rel="noreferrer">https://www.mint.com</a> but less fancy (I just want to replace the 3 stripes with an X).</p>
  
  <p>At the moment I am using a custom id: #ChangeToggle</p>
  
  <pre><code>&lt;button id="ChangeToggle" type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"&gt;
              &lt;span class="sr-only"&gt;Toggle navigation&lt;/span&gt;
              &lt;span class="icon-bar"&gt;&lt;/span&gt;
              &lt;span class="icon-bar"&gt;&lt;/span&gt;
              &lt;span class="icon-bar"&gt;&lt;/span&gt;
  &lt;/button&gt;
  </code></pre>
  
  <p>Along with the following javascript function (I know it's basic but I'm new to this):</p>
  
  <pre><code>&lt;script&gt;    
  $('#ChangeToggle').click(function () {
      if($('#ChangeToggle span').hasClass('ToggleButton')) {
          $('#ChangeToggle').html('&lt;span class="sr-only"&gt;Toggle navigation&lt;/span&gt;&lt;span class="icon-bar"&gt;&lt;/span&gt;&lt;span class="icon-bar"&gt;&lt;/span&gt;&lt;span class="icon-bar"&gt;&lt;/span&gt;'); 
      }
      else {      
          $('#ChangeToggle').html('&lt;span class="ToggleButton glyphicon glyphicon-remove"&gt;&lt;/span&gt;'); 
      }
  });
  &lt;/script&gt;
  </code></pre>
  
  <p>Everything works, the only issue is that when I click exactly on the X icon the menu does not close. It only closes when I click outside of it (anywhere else in the button). The only thing it does while clicking on the X icon is going back to the original 3 stripes.</p>
  
  <p>Anyone knows what I am doing wrong?</p>