title: Bootstrap Affix Nav Causes Div Below To Jump Up
body: <p>I've created a JSFiddle using Bootstrap's affix function to make a nav stay at the top of the screen once you scroll down and the header moves out of view.</p>
  
  <p>The problem I'm having is that when using pure HTML, the text below the nav jumps up and hides behind the nav too early.</p>
  
  <p>Check out the problematic code <a href="http://jsfiddle.net/yYE62/3/" rel="noreferrer">here</a>. </p>
  
  <p>Here's the code I used:</p>
  
  <pre><code>&lt;div class="container"&gt;
  &lt;div class="row"&gt;
      &lt;div class="span12"&gt;
          &lt;div class="well"&gt;
              &lt;h1&gt;Banner&lt;/h1&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="nav-wrapper"&gt;
  &lt;div class="nav navbar affix" data-spy="affix" data-offset-top="120"&gt;
      &lt;div class="navbar-inner"&gt;
          &lt;div class="container"&gt;
              &lt;div class="span12"&gt;
                  &lt;a class="brand" href="#"&gt;My Brand&lt;/a&gt;
                  &lt;span class="navbar-text"&gt;
                      This is a navbar.
                  &lt;/span&gt;
              &lt;/div&gt;    
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="container"&gt;
  &lt;div class="span3"&gt;
      &lt;h2&gt;some lorem ipsum for scrolling:&lt;/h2&gt;
     Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
  &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The CSS is as follows:</p>
  
  <pre><code>.affix {
      position: fixed;
      top: 0;
      width: 100%
  }
  </code></pre>
  
  <p>I found a very similar problem <a href="https://stackoverflow.com/questions/15176990/twitter-bootstrap-affixed-navbar-div-below-jumps-up">here</a> but when using the code as in that example, for some reason it doesn't work for me.</p>
  
  <p>The extra piece of CSS that did the trick is as follows:</p>
  
  <pre><code>.affix + .container {
      padding-top:50px
  }
  </code></pre>
  
  <p>I'm also aware of JavaScript solutions such as <a href="http://jsfiddle.net/namuol/Uaa3U/" rel="noreferrer">this one here</a> which uses the following code to create the desired effect:</p>
  
  <pre><code>$(function() {
      $('#nav-wrapper').height($("#nav").height());
  
      $('#nav').affix({
          offset: { top: $('#nav').offset().top }
      });
  });
  </code></pre>
  
  <p>I'm just trying to figure out why my particular HTML-only version is not behaving when implementing the previous fix using the CSS padding-top fix.</p>
  
  <p>Thank you in advance for your assistance.</p>