title: "jumping" content in navbar in bootstrap
body: <p><strong>Edit2:</strong>
  <em>Okay, the problem was, that I used a <code>&lt;div class="row"&gt;</code> around the <code>&lt;div class="topimage"&gt;</code> tag. Strange. Could someone explain why it is?</em></p>
  
  <hr>
  
  <p>I'm pretty new to bootstrap and created a web page for learning purposes.
  Everything is working pretty well so far, except the navbar.</p>
  
  <p>This is  my nav code:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"&gt;&lt;/script&gt;
  &lt;link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/&gt;
  &lt;div id="headertest "&gt;
      &lt;nav class="navbar navbar-default navbar-fixed-top" role="navigation"&gt;
          &lt;div class="container"&gt;
              &lt;div class="row"&gt;
                  &lt;div class="col-sm-4  col-sm-offset-1"&gt;
                      &lt;form class="navbar-form navbar-left"&gt;
                          &lt;button class="btn btn-default"&gt;ENTDECKEN&lt;/button&gt;
                          &lt;button class="btn btn-default"&gt;FINDEN&lt;/button&gt;
                          &lt;button class="btn btn-default"&gt;PLANEN&lt;/button&gt;
                          &lt;p class="font"&gt;
                              &lt;b&gt; Zurück zur Hafenseite |&lt;/b&gt; &lt;a style="text-decoration: none"&gt;Salsbury &amp; Mysteriöses Stonehenge&lt;/a&gt;
                          &lt;/p&gt;
                      &lt;/form&gt;
                  &lt;/div&gt;
                  &lt;div class="col-sm-2 "&gt;
                      &lt;div class="navbar-form"&gt;
                          &lt;img src="../assets/aida.png" class="logo "&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class="col-sm-4"&gt;
                      &lt;div class="navbar-form navbar-right"&gt;
                          &lt;form action="#" style&gt;
                              &lt;div class="dropdown"&gt;
                                  &lt;img src="../assets/lupe.png" class="icons" /&gt;
                                  &lt;img src="../assets/telefon.png" class="icons" /&gt;
                                  &lt;button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"&gt;
                                      Dropdown
                                      &lt;span class="caret"&gt;&lt;/span&gt;
                                  &lt;/button&gt;
                                  &lt;ul class="dropdown-menu" aria-labelledby="dropdownMenu1"&gt;
                                      &lt;li&gt;&lt;a href="#"&gt;Erste Aktion&lt;/a&gt;&lt;/li&gt;
                                      &lt;li&gt;&lt;a href="#"&gt;Zweite Aktion&lt;/a&gt;&lt;/li&gt;
                                      &lt;li&gt;&lt;a href="#"&gt;Noch eine Aktion&lt;/a&gt;&lt;/li&gt;
                                      &lt;li role="separator" class="divider"&gt;&lt;/li&gt;
                                      &lt;li&gt;&lt;a href="#"&gt;Ein Link&lt;/a&gt;&lt;/li&gt;
                                  &lt;/ul&gt;
                              &lt;/div&gt;
                          &lt;/form&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/nav&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><strong>The problem is</strong>, if I use the navbar-fixed-top class, the content inside the navbar is jumping while I scroll. 
  Like the top margin is vanishing while I'm scrolling down and if I Scroll up, the margin (or whatever the problem is) just magically appears back.</p>
  
  <p>Normal and scrolling up:
  <a href="https://i.stack.imgur.com/b1reD.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/b1reD.png" alt="enter image description here"></a></p>
  
  <p>Scrolling down:
  <a href="https://i.stack.imgur.com/hlIxG.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/hlIxG.png" alt="enter image description here"></a></p>
  
  <p>I hope you can see what I mean.</p>
  
  <p>Does anybody know what I'm doing wrong?
  (my css classes shouldn't be the problem. If I delete them, the content still keep "jumping")</p>
  
  <p>Thank you</p>
  
  <p><strong>Edit:</strong></p>
  
  <p>I have an image as the first item (after the navbar) that seems to cause the problems.
  If I delete it, the navbar is working as expected.</p>
  
  <p>Css:</p>
  
  <pre><code>.topimage{
    height: 600px;
    width: 100%;
    align-self: center;
    background-image: url("./assets/testbild3.jpg"); 
    background-repeat: no-repeat;
    background-size: cover;
    z-index: -1;
  
  }
  </code></pre>
  
  <p>and how I implemented it:</p>
  
  <pre><code>&lt;div class="row"&gt;
     &lt;headertest&gt;&lt;/headertest&gt;&lt;!-- navbar component --&gt;
  &lt;/div&gt;
  &lt;div class="row "&gt;
     &lt;div class="topimage"&gt;
     &lt;/div&gt;
  &lt;/div&gt; 
  </code></pre>
  
  <p>The fiddler link: (where it works without "jumping" navbar content)
  <a href="https://jsfiddle.net/Biberium/g52cd6v8/" rel="nofollow noreferrer">https://jsfiddle.net/Biberium/g52cd6v8/</a></p>