title: Make bootstrap navbar become a dropdown on small screen
body: <p>I am using a bootstrap navbar and I would like it to become a navbar with navbar-brand on left and dropdown with list items on right when it is displayed on a small screen. Right now I have a pretty good working navbar, but when it is resized to a very small size there is no dropdown on right and list items just disappears at all. And there is a problem with navbar-brand I would like to change its style at the same time the dropdown displayed. I thought about using <code>@media</code> but are there an easier solution to this?</p>
  
  <p>This is html:</p>
  
  <pre><code>  &lt;nav class="navbar navbar-transparent" role="navigation"&gt;
                  &lt;div class="container-fluid"&gt;
                      &lt;!-- Brand and toggle get grouped for better mobile display --&gt;
                      &lt;div class="navbar-header"&gt;
                          &lt;button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"&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;span class="navbar-brand"&gt;All kinds of pizza&lt;/span&gt;
                      &lt;/div&gt;
  
                      &lt;!-- Collect the nav links, forms, and other content for toggling --&gt;
                      &lt;div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"&gt;
                          &lt;ul class="nav navbar-nav"&gt;
                              &lt;li class="btn"&gt;All&lt;/li&gt;
                              &lt;li class="btn"&gt;Meat taste&lt;/li&gt;
                              &lt;li class="btn"&gt;Pineapple taste&lt;/li&gt;
                              &lt;li class="btn"&gt;Mushroom taste&lt;/li&gt;
                              &lt;li class="btn"&gt;Seafood taste&lt;/li&gt;
                              &lt;li class="btn"&gt;Vegetarian&lt;/li&gt;
                          &lt;/ul&gt;
                      &lt;/div&gt;&lt;!-- /.navbar-collapse --&gt;
                  &lt;/div&gt;&lt;!-- /.container-fluid --&gt;
              &lt;/nav&gt;
  </code></pre>
  
  <p>And this is less:</p>
  
  <pre><code>.navbar-nav
  {
    width: 100%;
    text-align: center;
  
    &gt; li
    {
      float: none;
      display: inline-block;
    }
  }
  
  .navbar-header
  {
    float: left;
    padding: 15px;
    text-align: center;
    width: 100%;
  
    .navbar-brand
    {
      font:@mainFont;
      font-size: 40px;
      color: white;
      text-shadow: @shadowToGoOverText;
    }
  }
  .navbar-brand {float:none;}
  
  .navbar-inner
  {
    background:transparent;
  }
  
  .navbar-nav
  {
    li
    {
      color: white;
      font: @mainFont;
      border: @mainBorder;
      border-color: transparent;
      text-shadow: @shadowToGoOverText;
    }
  
    li:hover
    {
      color: @mainColor;
      border-color: @borderColor;
      border-radius: @generalRoundness;
      background-color: white;
      text-shadow: none;
    }
  </code></pre>
  
  <p>And its constants: </p>
  
  <pre><code>//borders
  
  @mainBorder: 4px dashed #407a15;
  @generalRoundness: 15px 0px 0px 15px;
  @borderColor: #407a15;
  
  //text
  @mainFont: bold 25px Tahoma;
  @shadowToGoOverText: -2px 0 black, 0 2px black, 2px 0 black, 0 -2px black;
  </code></pre>
  
  <p>If my code seems to be confusing for you feel free to write navbar from scratch and after that I will integrate parts of it into my own.</p>