title: Bootstrap 3 navbar collapsing to two lines instead of shrinking images
body: <p>This looks great:</p>
  
  <p><a href="http://imageshack.us/a/img96/5789/n4u7.png" rel="nofollow">http://imageshack.us/a/img96/5789/n4u7.png</a></p>
  
  <p>But when you shrink another 5 pixels, the columns appear to break and the image goes to a new line.</p>
  
  <p><a href="http://imageshack.us/a/img59/2195/uk4v.png" rel="nofollow">http://imageshack.us/a/img59/2195/uk4v.png</a></p>
  
  <p>Instead, I would like the image to shrink, so it can stay on the same line as the collapsible button.</p>
  
  <p>The HTML:</p>
  
  <pre><code>  &lt;!-- navbar --&gt;
    &lt;nav class="navbar navbar-default navbar-fixed-top"&gt;
        &lt;!-- container --&gt;
        &lt;div class="container"&gt;
          &lt;!-- navbar header --&gt;
            &lt;div class="navbar-header"&gt;
              &lt;button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse"&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="#"&gt;
                &lt;img class="img-responsive" src="assets/img/logo.png" &gt;
              &lt;/a&gt;
            &lt;/div&gt;
            &lt;!-- /navbar header --&gt;
            &lt;!-- collapse --&gt;
            &lt;div class="collapse navbar-collapse navbar-ex1-collapse navbar-right"&gt;
              &lt;ul class="nav navbar-nav"&gt;
                &lt;li class="active"&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="#"&gt;Services&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="#"&gt;About&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;Contact&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
            &lt;/div&gt;
            &lt;!-- /collapse --&gt;
          &lt;/div&gt;
      &lt;!-- container --&gt;
    &lt;/nav&gt;
    &lt;!-- /navbar --&gt;
  </code></pre>
  
  <p>The CSS:</p>
  
  <pre><code>    nav.navbar {
        padding-top: 0;
        padding-bottom: 0;
        background: rgba(179, 153, 255, .5)
      }
  
      nav.navbar div.container {
        background: rgba(179, 153, 255, 1.0);
        border: 1px solid black;
      }
  
      a.navbar-brand {
        padding: 0 0 20px 15px;
      }
  
      img.img-responsive {
        width: 100%;
      }
  
      @media (min-width: 992px) {
          ul.navbar-nav li a {
              padding-top: 12px;
              padding-bottom: 12px;
              border-top: 2px solid white;
              border-bottom: 2px solid white;
            margin-top: 36px;
          }
      }
  </code></pre>