title: overflowing navbar in bootstrap
body: <p>I'm experimenting with Bootstrap 3.2. I'm trying to create a fixed at top navigation bar but I'm running into two problems:</p>
  
  <ol>
  <li>The navigation bar overlaps the content below it.</li>
  <li>The navigation bar seems to be going far off the screen to the right. This makes my button in the navigation bar not visible unless the window width is dragged to a smaller size.</li>
  </ol>
  
  <p>For the first problem, I've followed the <a href="http://getbootstrap.com/components/#navbar-fixed-top" rel="nofollow">Bootstrap example tip</a> by adding a class to my css file, including this file below the Bootstrap css file in the html document, and then referring to the class.</p>
  
  <pre><code>.navbar-height{
      body{padding-top: 200px;}
  }
  
  &lt;body class="navbar-height"&gt;
  </code></pre>
  
  <p>Though, this seems to do nothing (as you can see I specified the number really high hoping to see a dramatic change, which did not occur).</p>
  
  <p>Here's my the navigation bar:</p>
  
  <pre><code>&lt;header id="header-navigation"&gt;
          &lt;div id="nav-bar-container"&gt;
              &lt;nav id="nav-bar" class="navbar navbar-default navbar-fixed-top" role="navigation"&gt;
                  &lt;div id="nav-item-container" class="container-fluid"&gt;
                      &lt;div id="drop-down" class="navbar-header"&gt;
                          &lt;button type="button" class="btn btn-default navbar-btn navbar-toggle collapsed" data-toggle="collapse" data-target="#user-dropdown"&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;div id="home-button" class="navbar-left"&gt;
                              &lt;a class="navbar-brand" href="#"&gt;&lt;img alt="Brand" src=""&gt;&lt;/img&gt;&lt;/a&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                      &lt;div id="user-dropdown" class="navbar-collapse collapse"&gt;
                          &lt;ul class="dropdown-menu" id="dropdown-items" role="menu"&gt;
                              &lt;li&gt;
                                  &lt;div class="list-group-item"&gt;
                                      &lt;div class="row-picture"&gt;
                                          &lt;img class="circle" src="" alt="icon"&gt;&lt;/img&gt;
                                      &lt;/div&gt;
                                      &lt;div class="row-content"&gt;
                                          &lt;h4 class="list-group-item-heading"&gt;Placeholder&lt;/h4&gt;
                                          &lt;p class="list-group-item-text"&gt;Placeholder&lt;/p&gt;
                                      &lt;/div&gt;
                                      &lt;div class="list-group-seperator"&gt;&lt;/div&gt;
                                  &lt;/div&gt;
                              &lt;/li&gt;
                              &lt;li&gt;&lt;a href="#"&gt;&lt;span class="glyphicon glyphicon-log-out"&gt;&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
                          &lt;/ul&gt; 
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/nav&gt;
          &lt;/div&gt;
  &lt;/header&gt;
  </code></pre>
  
  <p>As a quick break down of the above code, I have a <code>&lt;header&gt;</code> tag which will hold the navigation bar. Within this <code>&lt;header&gt;</code>, I have a containing <code>&lt;div&gt;</code> (id="nav-bar-container") which only purpose is to act as a container for the navigation bar (maybe I'll add something else to the header and want to keep the bar seperate). Then, I have the actual <code>&lt;nav&gt;</code> which has the appropriate classes (or so I think): "navbar navbar-default navbar-fixed-top". The next <code>&lt;div&gt;</code> (id="nav-item-container") holds the components of the navigation bar. The following <code>&lt;div&gt;</code> (id="drop-down") contains the button (which seems to disappear at full-screen) and a link with a "brand", which always seems to be visible. The last major <code>&lt;div&gt;</code> contains the "drop down" content for when the button is pressed.</p>
  
  <p><strong>My Question:</strong> why is my navigation bar overlapping the content below it and over extending to the right hiding the button?</p>