title: bootstrap navbar not working
body: <p>i am trying to get the boostrap navbar to work, but it doesn't seem to be working as expected. here are some incorrect behaviors.</p>
  
  <ul>
  <li>the navbar does not collapse properly (when resizing browser)</li>
  <li>the when clicking on a menu item inside the navbar, the navbar disappears (in chrome)</li>
  <li>the navbar hides the top of each sections</li>
  </ul>
  
  <p>note that i am also trying to make the navbar stick to the top. this effort has been attempted by looking at some so threads as well as the bootstrap site itself. </p>
  
  <pre><code>    &lt;html&gt;
      &lt;head&gt;
      &lt;title&gt;Test Navbar&lt;/title&gt;
      &lt;link href="css/bootstrap.min.css" rel="stylesheet"&gt;
      &lt;link href="css/bootstrap-responsive.min.css" rel="stylesheet"&gt;
      &lt;style&gt;
          .content {
              margin: 20px;
              width: 500px;
          }
      &lt;/style&gt;
      &lt;/head&gt;
      &lt;body&gt;
      &lt;div class="navbar navbar-fixed-top navbar-inverse" id="navbar-wrapper" role="navigation"&gt;
        &lt;div class="navbar-inner"&gt;
          &lt;div class="container"&gt;
            &lt;!-- Be sure to leave the brand out there if you want it shown --&gt;
            &lt;a class="brand" href="#"&gt;MySite&lt;/a&gt;
  
            &lt;!-- Everything you want hidden at 940px or less, place within here --&gt;
            &lt;div class="nav-collapse collapse"&gt;
              &lt;!-- .nav, .navbar-search, .navbar-form, etc --&gt;
              &lt;ul class="nav"&gt;
                &lt;!-- TODO: make class="active" --&gt;
                &lt;li&gt;&lt;a class="navbar-font" href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
                &lt;li class="dropdown"&gt;
                  &lt;a href="#" class="dropdown-toggle" data-toggle="dropdown"&gt;Catagories&lt;b class="caret"&gt;&lt;/b&gt;&lt;/a&gt;
                  &lt;ul class="dropdown-menu"&gt;
                    &lt;li&gt;&lt;a href="#section1"&gt;Section 1&lt;/a&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;a href="#section2"&gt;Section 2&lt;/a&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;a href="#section3"&gt;Section 3&lt;/a&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;a href="#section4"&gt;Section 4&lt;/a&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;a href="#section5"&gt;Section 5&lt;/a&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;a href="#section6"&gt;Section 6&lt;/a&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;a href="#section7"&gt;Section 7&lt;/a&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;a href="#section9"&gt;Section 8&lt;/a&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;a href="#section9"&gt;Section 9&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
                &lt;/li&gt;
              &lt;/ul&gt;
              &lt;form class="navbar-search pull-right" action=""&gt;
                &lt;input type="text" class="search-query span2" placeholder="Search"&gt;
              &lt;/form&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;My Account&lt;b class="caret"&gt;&lt;/b&gt;&lt;/a&gt;
                  &lt;ul class="dropdown-menu"&gt;
                    &lt;li&gt;&lt;a href="#"&gt;Profile&lt;/a&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;a href="#"&gt;Payment&lt;/a&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;a href="#"&gt;Help&lt;/a&gt;&lt;/li&gt;
                    &lt;li class="divider"&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;a href="logout"&gt;Logout&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;/div&gt;
      &lt;section id="section1" class="content"&gt;
      &lt;h2&gt;section 1&lt;/h2&gt;
      &lt;!-- actual content omitted --&gt;
      &lt;/section&gt;
      &lt;!-- there are 9 sections --&gt;
      &lt;section id="section9" class="content"&gt;
      &lt;h2&gt;section 9&lt;/h2&gt;
      &lt;!-- actual content omitted --&gt;
      &lt;/section&gt;
      &lt;script src="js/jquery-1.11.0.min.js"&gt;&lt;/script&gt;
      &lt;script src="js/bootstrap.min.js"&gt;&lt;/script&gt;
      &lt;/body&gt;
      &lt;/html&gt;
  </code></pre>