add in a navbar button for toggling the nav items

docs/assets/css/bootstrap-responsive.css

@@ -86,6 +86,9 @@
     width: auto;
     margin: 0;
   }
+  .btn-navbar {
+    display: block;
+  }
 }
 @media (min-width: 768px) and (max-width: 940px) {
   .container {

docs/base-css.html

@@ -33,6 +33,11 @@
     <div class="navbar navbar-fixed-top">
       <div class="navbar-inner">
         <div class="container">
+          <a class="btn btn-navbar">
+            <span class="i-bar"></span>
+            <span class="i-bar"></span>
+            <span class="i-bar"></span>
+          </a>
           <a class="brand" href="./index.html">Bootstrap</a>
           <ul class="nav">
             <li class="">

docs/components.html

@@ -33,6 +33,11 @@
     <div class="navbar navbar-fixed-top">
       <div class="navbar-inner">
         <div class="container">
+          <a class="btn btn-navbar">
+            <span class="i-bar"></span>
+            <span class="i-bar"></span>
+            <span class="i-bar"></span>
+          </a>
           <a class="brand" href="./index.html">Bootstrap</a>
           <ul class="nav">
             <li class="">

docs/download.html

@@ -33,6 +33,11 @@
     <div class="navbar navbar-fixed-top">
       <div class="navbar-inner">
         <div class="container">
+          <a class="btn btn-navbar">
+            <span class="i-bar"></span>
+            <span class="i-bar"></span>
+            <span class="i-bar"></span>
+          </a>
           <a class="brand" href="./index.html">Bootstrap</a>
           <ul class="nav">
             <li class="">

docs/examples.html

@@ -33,6 +33,11 @@
     <div class="navbar navbar-fixed-top">
       <div class="navbar-inner">
         <div class="container">
+          <a class="btn btn-navbar">
+            <span class="i-bar"></span>
+            <span class="i-bar"></span>
+            <span class="i-bar"></span>
+          </a>
           <a class="brand" href="./index.html">Bootstrap</a>
           <ul class="nav">
             <li class="">

docs/index.html

@@ -33,6 +33,11 @@
     <div class="navbar navbar-fixed-top">
       <div class="navbar-inner">
         <div class="container">
+          <a class="btn btn-navbar">
+            <span class="i-bar"></span>
+            <span class="i-bar"></span>
+            <span class="i-bar"></span>
+          </a>
           <a class="brand" href="./index.html">Bootstrap</a>
           <ul class="nav">
             <li class="active">

docs/javascript.html

@@ -33,6 +33,11 @@
     <div class="navbar navbar-fixed-top">
       <div class="navbar-inner">
         <div class="container">
+          <a class="btn btn-navbar">
+            <span class="i-bar"></span>
+            <span class="i-bar"></span>
+            <span class="i-bar"></span>
+          </a>
           <a class="brand" href="./index.html">Bootstrap</a>
           <ul class="nav">
             <li class="">

docs/less.html

@@ -33,6 +33,11 @@
     <div class="navbar navbar-fixed-top">
       <div class="navbar-inner">
         <div class="container">
+          <a class="btn btn-navbar">
+            <span class="i-bar"></span>
+            <span class="i-bar"></span>
+            <span class="i-bar"></span>
+          </a>
           <a class="brand" href="./index.html">Bootstrap</a>
           <ul class="nav">
             <li class="">

docs/scaffolding.html

@@ -33,6 +33,11 @@
     <div class="navbar navbar-fixed-top">
       <div class="navbar-inner">
         <div class="container">
+          <a class="btn btn-navbar">
+            <span class="i-bar"></span>
+            <span class="i-bar"></span>
+            <span class="i-bar"></span>
+          </a>
           <a class="brand" href="./index.html">Bootstrap</a>
           <ul class="nav">
             <li class="">

docs/templates/layout.mustache

@@ -33,6 +33,11 @@
     <div class="navbar navbar-fixed-top">
       <div class="navbar-inner">
         <div class="container">
+          <a class="btn btn-navbar">
+            <span class="i-bar"></span>
+            <span class="i-bar"></span>
+            <span class="i-bar"></span>
+          </a>
           <a class="brand" href="./index.html">Bootstrap</a>
           <ul class="nav">
             <li class="{{index}}">

docs/upgrading.html

@@ -33,6 +33,11 @@
     <div class="navbar navbar-fixed-top">
       <div class="navbar-inner">
         <div class="container">
+          <a class="btn btn-navbar">
+            <span class="i-bar"></span>
+            <span class="i-bar"></span>
+            <span class="i-bar"></span>
+          </a>
           <a class="brand" href="./index.html">Bootstrap</a>
           <ul class="nav">
             <li class="">

less/bootstrap.less

@@ -33,6 +33,11 @@
 @import "component-animations.less";
 @import "close.less";
 
+// Components: Buttons & Alerts
+@import "buttons.less";
+@import "button-groups.less";
+@import "alerts.less"; // Note: alerts share common CSS with buttons and thus have styles in buttons.less
+
 // Components: Nav
 @import "navs.less";
 @import "navbar.less";
@@ -45,11 +50,6 @@
 @import "tooltip.less";
 @import "popovers.less";
 
-// Components: Buttons & Alerts
-@import "buttons.less";
-@import "button-groups.less";
-@import "alerts.less"; // Note: alerts share common CSS with buttons and thus have styles in buttons.less
-
 // Components: Misc
 @import "thumbnails.less";
 @import "labels.less";

less/navbar.less

@@ -16,6 +16,29 @@
   .box-shadow(@shadow);
 }
 
+// Navbar button for toggling navbar items in responsive layouts
+.btn-navbar {
+  display: none;
+  float: right;
+  padding: 7px 10px;
+  margin-left: 10px;
+  margin-right: 10px;
+  .buttonBackground(@navbarBackgroundHighlight, @navbarBackground);
+  @shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 0 rgba(255,255,255,.075);
+  .box-shadow(@shadow);
+}
+.btn-navbar .i-bar {
+  display: block;
+  width: 18px;
+  height: 2px;
+  background-color: #f5f5f5;
+  .border-radius(1px);
+  .box-shadow(0 1px 0 rgba(0,0,0,.25));
+}
+.btn-navbar .i-bar + .i-bar {
+  margin-top: 3px;
+}
+
 // Brand, links, text, and buttons
 .navbar {
   // Hover and active states

less/responsive.less

@@ -127,6 +127,11 @@
     margin: 0;
   }
 
+  // Navbar button
+  .btn-navbar {
+    display: block;
+  }
+
 }