title: Bootstrap Hamburger icon animation in navbar-header
body: <p>Good day everyone,</p>
  
  <p>How to make menu Hamburger button animate to <strong>X</strong> in bootstrap <a href="https://jsfiddle.net/8koahdrt/" rel="nofollow noreferrer">navbar-fixed-top</a>?</p>
  
  <pre><code> &lt;nav class="navbar navbar-default navbar-fixed-top"&gt;
            &lt;div class="container"&gt;
              &lt;div class="navbar-header"&gt;
                &lt;button 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;
                 &lt;a class="navbar-brand" href="index.html"&gt;Logo&lt;/a&gt;
              &lt;/div&gt;
              &lt;div id="navbar" class="navbar-collapse collapse"&gt;
                &lt;ul class="nav navbar-nav"&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Menu1&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Menu2&lt;/a&gt;&lt;/li&gt; 
                  &lt;li&gt;&lt;a href="#"&gt;Menu3&lt;/a&gt;&lt;/li&gt;
                &lt;/ul&gt;
  
              &lt;/div&gt;&lt;!--/.nav-collapse --&gt;
  
              &lt;/div&gt;
   &lt;/nav&gt;
  </code></pre>
  
  <p>I was trying to plug in all possible examples, but I am missing the point. Any ideas? </p>
  
  <p>Many thanks.</p>