title: Implementing Navigation drawer bootstrap
body: <p>I am trying to implement a navigation drawer theme for my website using Boostrap. I am able to convert my navbar in desktop screen size to a navigation drawer button for smaller screens. However what I am trying to achieve is get the 3 bar icons of the drawer on the left hand side and "MyName" should not be visible on smaller screen sizes. Could some one help me out?</p>
  
  <p>My HTML code is:</p>
  
  <pre><code>&lt;body&gt;
      &lt;div class="navbar navbar-inverse navbar-fixed-top"&gt;
          &lt;div class="container"&gt; &lt;a href="#" class="navbar-brand"&gt;MyName&lt;/a&gt;
  
              &lt;button class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse"&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;div class="collapse navbar-collapse navHeaderCollapse"&gt;
                  &lt;ul class="nav navbar-nav"&gt;
                      &lt;li class="active"&gt;&lt;a href="#"&gt;ABOUT ME&lt;span class="sr-only"&gt;(current)&lt;/span&gt;&lt;/a&gt;
                      &lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;RESUME&lt;/a&gt;
                      &lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;PROJECTS&lt;/a&gt;
                      &lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;BLOG&lt;/a&gt;
                      &lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;CONTACT&lt;/a&gt;
                      &lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>I have created a JSFiddle for this: <a href="https://jsfiddle.net/DTcHh/9394/" rel="nofollow">https://jsfiddle.net/DTcHh/9394/</a></p>