update collapsible nav in navbar

17 files changed, 27 insertions, 20 deletions

diff --git a/docs/assets/bootstrap.zip b/docs/assets/bootstrap.zip
index 0e691e2907..ebd162b671 100644
--- a/docs/assets/bootstrap.zip
+++ b/docs/assets/bootstrap.zip
diff --git a/docs/assets/css/bootstrap-responsive.css b/docs/assets/css/bootstrap-responsive.css
index 44e0125c13..68ccf676fd 100644
--- a/docs/assets/css/bootstrap-responsive.css
+++ b/docs/assets/css/bootstrap-responsive.css
@@ -218,7 +218,7 @@
     position: static;
     margin-bottom: 18px;
   }
-  .navbar-inner {
+  .navbar-fixed-top .navbar-inner {
     padding: 5px;
     background-image: none;
   }
@@ -305,10 +305,13 @@
   .btn-navbar {
     display: block;
   }
-  .nav-collapse {
+  .nav-collapse.collapse {
     overflow: hidden;
     height: 0;
   }
+  .nav-collapse.collapse.in {
+    height: auto;
+  }
 }
 @media (min-width: 1200px) {
   .thumbnails {
diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css
index 5330b5102b..9b6217fbd4 100644
--- a/docs/assets/css/bootstrap.css
+++ b/docs/assets/css/bootstrap.css
@@ -2396,7 +2396,7 @@ button.btn.small, input[type="submit"].btn.small {
   margin-top: 3px;
 }
 .nav-collapse.collapse {
-  height: auto !important;
+  height: auto;
 }
 .navbar .brand:hover {
   text-decoration: none;
diff --git a/docs/base-css.html b/docs/base-css.html
index 0406ff229e..291feb6e16 100644
--- a/docs/base-css.html
+++ b/docs/base-css.html
@@ -39,7 +39,7 @@
             <span class="i-bar"></span>
           </a>
           <a class="brand" href="./index.html">Bootstrap</a>
-          <div class="nav-collapse">
+          <div class="nav-collapse collapse">
             <ul class="nav">
               <li class="">
                 <a href="./index.html">Overview</a>
diff --git a/docs/components.html b/docs/components.html
index 63a4b3dd08..19ab820f5f 100644
--- a/docs/components.html
+++ b/docs/components.html
@@ -39,7 +39,7 @@
             <span class="i-bar"></span>
           </a>
           <a class="brand" href="./index.html">Bootstrap</a>
-          <div class="nav-collapse">
+          <div class="nav-collapse collapse">
             <ul class="nav">
               <li class="">
                 <a href="./index.html">Overview</a>
diff --git a/docs/download.html b/docs/download.html
index 832b07ce65..97f1c24c49 100644
--- a/docs/download.html
+++ b/docs/download.html
@@ -39,7 +39,7 @@
             <span class="i-bar"></span>
           </a>
           <a class="brand" href="./index.html">Bootstrap</a>
-          <div class="nav-collapse">
+          <div class="nav-collapse collapse">
             <ul class="nav">
               <li class="">
                 <a href="./index.html">Overview</a>
diff --git a/docs/examples.html b/docs/examples.html
index 7d79fc0a0a..b2fd296d14 100644
--- a/docs/examples.html
+++ b/docs/examples.html
@@ -39,7 +39,7 @@
             <span class="i-bar"></span>
           </a>
           <a class="brand" href="./index.html">Bootstrap</a>
-          <div class="nav-collapse">
+          <div class="nav-collapse collapse">
             <ul class="nav">
               <li class="">
                 <a href="./index.html">Overview</a>
diff --git a/docs/index.html b/docs/index.html
index e20d08bcdd..7d728dc7dd 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -39,7 +39,7 @@
             <span class="i-bar"></span>
           </a>
           <a class="brand" href="./index.html">Bootstrap</a>
-          <div class="nav-collapse">
+          <div class="nav-collapse collapse">
             <ul class="nav">
               <li class="active">
                 <a href="./index.html">Overview</a>
diff --git a/docs/javascript.html b/docs/javascript.html
index eb4a175c33..9838aa0d19 100644
--- a/docs/javascript.html
+++ b/docs/javascript.html
@@ -39,7 +39,7 @@
             <span class="i-bar"></span>
           </a>
           <a class="brand" href="./index.html">Bootstrap</a>
-          <div class="nav-collapse">
+          <div class="nav-collapse collapse">
             <ul class="nav">
               <li class="">
                 <a href="./index.html">Overview</a>
diff --git a/docs/less.html b/docs/less.html
index 5935c91259..76794dbe44 100644
--- a/docs/less.html
+++ b/docs/less.html
@@ -39,7 +39,7 @@
             <span class="i-bar"></span>
           </a>
           <a class="brand" href="./index.html">Bootstrap</a>
-          <div class="nav-collapse">
+          <div class="nav-collapse collapse">
             <ul class="nav">
               <li class="">
                 <a href="./index.html">Overview</a>
diff --git a/docs/scaffolding.html b/docs/scaffolding.html
index b00f5630b5..00aadd472e 100644
--- a/docs/scaffolding.html
+++ b/docs/scaffolding.html
@@ -39,7 +39,7 @@
             <span class="i-bar"></span>
           </a>
           <a class="brand" href="./index.html">Bootstrap</a>
-          <div class="nav-collapse">
+          <div class="nav-collapse collapse">
             <ul class="nav">
               <li class="">
                 <a href="./index.html">Overview</a>
@@ -127,7 +127,7 @@
   <div class="row">
     <div class="span4">
       <p>The default grid system provided as part of Bootstrap is a <strong>940px-wide, 12-column grid</strong>.</p>
-      <p>It also has three responsive variations for various devices and resolutions: phone, tablet, and large widescreen desktops.</p>
+      <p>It also has four responsive variations for various devices and resolutions: phone, tablet portrait, table landscape and small desktops, and large widescreen desktops.</p>
     </div>
     <div class="span4">
 <pre class="prettyprint linenums">
diff --git a/docs/templates/layout.mustache b/docs/templates/layout.mustache
index 7c0ab655be..b49ec28f6e 100644
--- a/docs/templates/layout.mustache
+++ b/docs/templates/layout.mustache
@@ -39,7 +39,7 @@
             <span class="i-bar"></span>
           </a>
           <a class="brand" href="./index.html">Bootstrap</a>
-          <div class="nav-collapse">
+          <div class="nav-collapse collapse">
             <ul class="nav">
               <li class="{{index}}">
                 <a href="./index.html">{{_i}}Overview{{/i}}</a>
diff --git a/docs/templates/pages/components.mustache b/docs/templates/pages/components.mustache
index 75ca3eb7e4..fd7c464db4 100644
--- a/docs/templates/pages/components.mustache
+++ b/docs/templates/pages/components.mustache
@@ -669,7 +669,7 @@
 &lt;/form&gt;
 </pre>
       <h3>{{_i}}Optional responsive variation{{/i}}</h3>
-      <p>{{_i}}Depending on the amount of content in your topbar, you might want to implement the responsive options. To do so, wrap your nav content in a containing div, <code>.nav-collapse</code>, and add the navbar toggle button, <code>.btn-navbar</code>.{{/i}}</p>
+      <p>{{_i}}Depending on the amount of content in your topbar, you might want to implement the responsive options. To do so, wrap your nav content in a containing div, <code>.nav-collapse.collapse</code>, and add the navbar toggle button, <code>.btn-navbar</code>.{{/i}}</p>
 <pre class="prettyprint linenums">
 &lt;div class="navbar"&gt;
   &lt;div class="navbar-inner"&gt;
@@ -686,7 +686,7 @@
       &lt;a class="brand" href="#"&gt;{{_i}}Project name{{/i}}&lt;/a&gt;
 
       &lt;!-- Everything you want hidden at 940px or less, place within here --&gt;
-      &lt;div class="nav-collapse"&gt;
+      &lt;div class="nav-collapse collapse"&gt;
         &lt;!-- .nav, .navbar-search, .navbar-form, etc --&gt;
       &lt;/div&gt;
 
diff --git a/docs/templates/pages/scaffolding.mustache b/docs/templates/pages/scaffolding.mustache
index 239d152652..15c438b975 100644
--- a/docs/templates/pages/scaffolding.mustache
+++ b/docs/templates/pages/scaffolding.mustache
@@ -55,7 +55,7 @@
   <div class="row">
     <div class="span4">
       <p>{{_i}}The default grid system provided as part of Bootstrap is a <strong>940px-wide, 12-column grid</strong>.{{/i}}</p>
-      <p>{{_i}}It also has three responsive variations for various devices and resolutions: phone, tablet, and large widescreen desktops.{{/i}}</p>
+      <p>{{_i}}It also has four responsive variations for various devices and resolutions: phone, tablet portrait, table landscape and small desktops, and large widescreen desktops.{{/i}}</p>
     </div>
     <div class="span4">
 <pre class="prettyprint linenums">
diff --git a/docs/upgrading.html b/docs/upgrading.html
index d7ad30f561..b8e82fe31b 100644
--- a/docs/upgrading.html
+++ b/docs/upgrading.html
@@ -39,7 +39,7 @@
             <span class="i-bar"></span>
           </a>
           <a class="brand" href="./index.html">Bootstrap</a>
-          <div class="nav-collapse">
+          <div class="nav-collapse collapse">
             <ul class="nav">
               <li class="">
                 <a href="./index.html">Overview</a>
diff --git a/less/navbar.less b/less/navbar.less
index 25ca7b4e28..b677b192b4 100644
--- a/less/navbar.less
+++ b/less/navbar.less
@@ -42,8 +42,9 @@
 .btn-navbar .i-bar + .i-bar {
   margin-top: 3px;
 }
+// Override the default collapsed state
 .nav-collapse.collapse {
-  height: auto !important; // Required to be !important to override native collapse plugin
+  height: auto;
 }
 
 
diff --git a/less/responsive.less b/less/responsive.less
index 107fa7dd77..7ae28b8258 100644
--- a/less/responsive.less
+++ b/less/responsive.less
@@ -240,7 +240,7 @@
     position: static;
     margin-bottom: @baseLineHeight;
   }
-  .navbar-inner {
+  .navbar-fixed-top .navbar-inner {
     padding: 5px;
     background-image: none;
   }
@@ -335,10 +335,13 @@
   }
 
   // Hide everything in the navbar save .brand and toggle button */
-  .nav-collapse {
+  .nav-collapse.collapse {
     overflow: hidden;
     height: 0;
   }
+  .nav-collapse.collapse.in {
+    height: auto;
+  }
 
 }