title: How to prevent bootstrap navbar from scrolling with the rest of the page
body: <p>in my angular single page app I have the following navbar:</p>
  
  <pre><code>&lt;nav class="navbar"&gt;
          &lt;div class="navbar-inner"&gt;
              &lt;div class="container"&gt;
                  &lt;!--&lt;a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"&gt;--&gt;
                  &lt;a class="btn btn-navbar"&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;/a&gt;
                  &lt;div class="nav-collapse"&gt;
                      &lt;ul class="nav"&gt;
                          &lt;li class="dropdown"&gt;
                              &lt;a href="#/"&gt;Home&lt;/a&gt;
                          &lt;/li&gt;
                          &lt;li class="dropdown"&gt;
                              &lt;a href="" data-toggle="dropdown"&gt;Customer Instances &lt;b class="caret"&gt;&lt;/b&gt;&lt;/a&gt;
                              &lt;ul class="dropdown-menu"&gt;
                                  &lt;li&gt;&lt;a href="#/itarList"&gt;iTAR&lt;/a&gt;&lt;/li&gt;
                                  &lt;li class="divider"&gt;&lt;/li&gt;
                                  &lt;li&gt;&lt;a href="#/nonItarList"&gt;Non-iTAR&lt;/a&gt;&lt;/li&gt;
                              &lt;/ul&gt;
                          &lt;/li&gt;
                          &lt;li class="dropdown"&gt;
                              &lt;a href="" class="dropdown-toggle" data-toggle="dropdown"&gt;Training &amp; Documentation &lt;b class="caret"&gt;&lt;/b&gt;&lt;/a&gt;
                              &lt;ul class="dropdown-menu"&gt;
                                  &lt;li&gt;&lt;a href="#/videoTutorials"&gt;Video Tutorials&lt;/a&gt;&lt;/li&gt;
                                  &lt;li&gt;&lt;a href="#/taskBasedHelp"&gt;Task-Based Help&lt;/a&gt;&lt;/li&gt;
                                  &lt;li class="divider"&gt;&lt;/li&gt;
                                  &lt;li&gt;&lt;a href="#/documentTemplates"&gt;Document Templates&lt;/a&gt;&lt;/li&gt;
                                  &lt;li&gt;&lt;a href="#/artifactSamples"&gt;Artifact Samples&lt;/a&gt;&lt;/li&gt;
                              &lt;/ul&gt;
                          &lt;/li&gt;
                          &lt;li class="dropdown"&gt;
                              &lt;a href="" class="dropdown-toggle" data-toggle="dropdown"&gt;Service Requests &lt;b class="caret"&gt;&lt;/b&gt;&lt;/a&gt;
                              &lt;ul class="dropdown-menu"&gt;
                                  &lt;li&gt;&lt;a href="#/viewExistingRequests"&gt;View Existing Requests&lt;/a&gt;&lt;/li&gt;
                                  &lt;li class="divider"&gt;&lt;/li&gt;
                                  &lt;li&gt;&lt;a href="#/enterNewRequest"&gt;Enter New Request&lt;/a&gt;&lt;/li&gt;
                              &lt;/ul&gt;
                          &lt;/li&gt;
                          &lt;li class="dropdown"&gt;
                              &lt;a href="" class="dropdown-toggle" data-toggle="dropdown"&gt;Development Tracker &lt;b class="caret"&gt;&lt;/b&gt;&lt;/a&gt;
                              &lt;ul class="dropdown-menu"&gt;
                                  &lt;li&gt;&lt;a href="#/viewBacklogItems"&gt;View Backlog Items&lt;/a&gt;&lt;/li&gt;
                                  &lt;li&gt;&lt;a href="#/viewFeatureReleaseSchedule"&gt;View Feature Release Schedule&lt;/a&gt;&lt;/li&gt;
                                  &lt;li class="divider"&gt;&lt;/li&gt;
                                  &lt;li&gt;&lt;a href="#/viewListOfSuggestedEnhancements"&gt;View List Of Suggested Enhancements&lt;/a&gt;&lt;/li&gt;
                                  &lt;li&gt;&lt;a href="#/suggetAnEnhancement"&gt;Suggest An Enhancement&lt;/a&gt;&lt;/li&gt;
                                  &lt;li class="divider"&gt;&lt;/li&gt;
                                  &lt;li&gt;&lt;a href="#/viewActiveBugReports"&gt;View Active Bug Reports&lt;/a&gt;&lt;/li&gt;
                                  &lt;li&gt;&lt;a href="#/reportABug"&gt;Report A Bug&lt;/a&gt;&lt;/li&gt;
                              &lt;/ul&gt;
                          &lt;/li&gt;
                          &lt;/ul&gt;
                              &lt;ul class="nav pull-right"&gt;
                                  &lt;li class="divider-vertical"&gt;&lt;/li&gt;
                                  &lt;li class="dropdown"&gt;
                                      &lt;a href="" class="dropdown-toggle" data-toggle="dropdown"&gt;Site Administration &lt;b class="caret"&gt;&lt;/b&gt;&lt;/a&gt;
                                      &lt;ul class="dropdown-menu"&gt;
                                          &lt;li&gt;&lt;a href="#/userAdministration"&gt;User Administration&lt;/a&gt;&lt;/li&gt;
                                          &lt;li class="divider"&gt;&lt;/li&gt;
                                          &lt;li&gt;&lt;a href="#/instanceAdministration"&gt;Instance Administration&lt;/a&gt;&lt;/li&gt;
                                          &lt;li class="divider"&gt;&lt;/li&gt;
                                          &lt;li&gt;&lt;a href="#/applicationAdministration"&gt;Application Administration&lt;/a&gt;&lt;/li&gt;
                                      &lt;/ul&gt;
                                  &lt;/li&gt;
                               &lt;/ul&gt; 
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/nav&gt;
  </code></pre>
  
  <p>I need to prevent this navbar from scrolling with the rest of the page.
  When I try to add the navbar-fixed-top class attribute to the top-most  element, I do get the desired result, but, my right-most nav item (Site Administration) is being shifted down (or wrapped around), making the entire navbar twice the height.
  Is there a way to achieve this scroll-free navbar without having such a side affect?</p>