title: How to slide nav bar from left instead from top?
body: <p>Bootstrap supports toggling a navbar from the top. How can I slide it from the left when the screen-size is small?</p>
  
  <p>For example:</p>
  
  <p><a href="https://i.stack.imgur.com/o3Xmf.jpg" rel="noreferrer"><img src="https://i.stack.imgur.com/o3Xmf.jpg" alt="preview"></a></p>
  
  <p>In the screenshot provided above, when the screen is re-sized, the navbar is toggled and slides down from the top. I rather want that the navbar should slide from the left. How can I achieve this function in Bootstrap?</p>
  
  <p>Currently, as per code, the navbar slides from the top. Here is my code:</p>
  
  <pre><code>&lt;nav class="navbar navbar-site navbar-default" role="navigation"&gt;
      &lt;div class="container"&gt;
          &lt;div class="navbar-header"&gt;
              &lt;button data-target=".navbar-collapse" data-toggle="collapse" class="navbar-toggle" type="button"&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 href="{% url 'index' %} " class="navbar-brand logo logo-title"&gt;
              &lt;span class="logo-icon"&gt;&lt;i class="icon icon-search-1 ln-shadow-logo shape-0"&gt;&lt;/i&gt; &lt;/span&gt; &lt;span&gt;Companyname &lt;/span&gt; &lt;/a&gt; 
          &lt;/div&gt;
          &lt;div class="navbar-collapse collapse"&gt;
              &lt;ul class="nav navbar-nav navbar-right"&gt;
                  {% if user.is_authenticated %}
                      &lt;li class="dropdown"&gt;
                          &lt;a href="#" class="dropdown-toggle" data-toggle="dropdown"&gt; &lt;span&gt;{{user.first_name}}&lt;/span&gt; &lt;i class="icon-user fa"&gt;&lt;/i&gt; &lt;i class=" icon-down-open-big fa"&gt;&lt;/i&gt;&lt;/a&gt;
                          &lt;ul class="dropdown-menu user-menu"&gt;
                              &lt;li class="active"&gt;&lt;a href="account-home.html"&gt;&lt;i class="icon-home"&gt;&lt;/i&gt; Personal Home &lt;/a&gt;&lt;/li&gt;
                              &lt;li&gt;&lt;a href="statements.html"&gt;&lt;i class=" icon-money "&gt;&lt;/i&gt; Payment history &lt;/a&gt;&lt;/li&gt;
                              &lt;li&gt;&lt;a href="{% url 'logout' %}"&gt; &lt;i class="glyphicon glyphicon-off"&gt;&lt;/i&gt; Signout &lt;/a&gt;&lt;/li&gt;
                          &lt;/ul&gt;
                      &lt;/li&gt;
                  {% else %}
                      &lt;li&gt;&lt;a href="{% url 'login' %}"&gt;Login&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="{% url 'signup' %}"&gt;Signup&lt;/a&gt;&lt;/li&gt;
                  {% endif %}
                  &lt;li class="postadd"&gt;&lt;a class="btn btn-block btn-border btn-post btn-danger" href="{% url 'post_ad' %}"&gt;Post Free Add&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/nav&gt;
  </code></pre>