title: Bootstrap - Large logo beside NavBar
body: <p>I'm trying to create a navbar that is a fraction of the size of the logo, and allows for additional content to be place underneath it. Like this:</p>
  
  <p><img src="https://i.stack.imgur.com/pWexg.png" alt="Example"></p>
  
  <p>The jsFiddle below shows what I have now. The black line shows the bottom of the nav bar, which has extended to be the same size as the image. </p>
  
  <p>I have tried setting the height of the nav bar to 50px, but that causes all content underneath it to move up (which really throws the layout off). I have also tried surrounding everything with containers, but that also did not seem to work. I imagine any solution will involve one or both of those ideas, but I am not sure how to implement it. </p>
  
  <p><a href="https://jsfiddle.net/DTcHh/" rel="nofollow noreferrer"><strong>Here's a Demo in jsFiddle</strong></a></p>
  
  <p>Here's my code:</p>
  
  <pre><code>&lt;div class ="container-fluid"&gt;
  &lt;a href="#" class="pull-left"&gt;&lt;img id="logo" class="img-responsive" src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcQevVAv_ZVUfI8i5cMpRZGbIu71MGjPUqR70qR7F877JKyWJWdEXw"&gt;&lt;/a&gt;
  
  &lt;nav class="navbar navbar-default" role="navigation"&gt;
     &lt;div class="navbar-header"&gt;
        &lt;button type="button" class="navbar-toggle" data-toggle="collapse"
           data-target="#example-navbar-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;!-- &lt;a class="navbar-brand" href="#"&gt;&lt;img class="img-responsive" src="img/logo.jpg"&gt;&lt;/a&gt; --&gt;
     &lt;/div&gt;
     &lt;div class="collapse navbar-collapse" id="example-navbar-collapse"&gt;
       &lt;ul class="nav navbar-nav navbar-right"&gt;
         &lt;li&gt;&lt;a href="#"&gt;Search&lt;/a&gt;&lt;/li&gt;
         &lt;li&gt;&lt;a href="#"&gt;Archives&lt;/a&gt;&lt;/li&gt;
         &lt;li&gt;&lt;a href="#"&gt;Education&lt;/a&gt;&lt;/li&gt;
         &lt;li&gt;&lt;a href="#"&gt;About&lt;/a&gt;&lt;/li&gt;
       &lt;/ul&gt;
     &lt;/div&gt;
  &lt;/nav&gt;
  </code></pre>
  
  <p>Any advice would be appreciated. </p>