title: Logo image overlay on menu bar to stick out above and below menu bar
body: <p>I have a menu bar with height 20px, my logo is 150x150px. 
  I want to vertically align my logo such that it sticks out on top and below my menu bar. Thus 65px above my menu bar and 65px below my menu bar. Now my menu bar height adjusts correspondingly with the height of my logo image, so the menu bar entirely expands from 20px to 150px. Is it possible to achieve my goal since the logo is part of the menu bar, but also not in a way?
  <img src="https://i.stack.imgur.com/oOJi2.png" alt="enter image description here"></p>
  
  <p>Fiddle<a href="http://jsfiddle.net/rabas007/hr064mjz/" rel="nofollow noreferrer">Fiddle</a></p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div id="nav"&gt;
          &lt;div class="navbar navbar-default navbar-static"&gt;
              &lt;div class="menu-container"&gt;
                  &lt;!-- .btn-navbar is used as the toggle for collapsed navbar content --&gt;
                  &lt;a class="navbar-toggle" data-target=".navbar-collapse"
                  data-toggle="collapse"&gt;&lt;span class=
                  "glyphicon glyphicon-bar"&gt;&lt;/span&gt; &lt;span class=
                  "glyphicon glyphicon-bar"&gt;&lt;/span&gt; &lt;span class=
                  "glyphicon glyphicon-bar"&gt;&lt;/span&gt;&lt;/a&gt; &lt;a class="navbar-brand"
                  href="#"&gt;&lt;img alt="" src=
                  "http://placehold.it/150x150&amp;text=Logo"&gt;&lt;/a&gt;
  
                  &lt;div class="navbar-collapse collapse"&gt;
  
                      &lt;/ul&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;&lt;!-- /.navbar --&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.menu-container {
      background-color:#000000;
  }
  
  #nav.affix {
      position:fixed;
      top:0;
      width:100%;
      z-index:10
  }
  
  #sidebar.affix-top {
      position:static
  }
  
  #sidebar.affix {
      position:fixed;
      top:80px
  }
  </code></pre>