improve navbar toggle and hide code snippets on mobile devices for now

3 files changed, 16 insertions, 2 deletions

diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css
index 25878bcbb..3d6d8bf38 100644
--- a/docs/assets/css/bootstrap.css
+++ b/docs/assets/css/bootstrap.css
@@ -3217,7 +3217,7 @@ button.close {
   display: block;
   width: 22px;
   height: 2px;
-  background-color: #fff;
+  background-color: #ccc;
   border-radius: 1px;
 }
 
@@ -3331,6 +3331,10 @@ button.close {
   background-color: #333;
 }
 
+.navbar-inverse .navbar-toggle .icon-bar {
+  background-color: #fff;
+}
+
 .navbar-inverse .nav > .divider {
   background-color: #151515;
   border-bottom-color: #2f2f2f;
diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css
index baf022d03..196cacb0f 100644
--- a/docs/assets/css/docs.css
+++ b/docs/assets/css/docs.css
@@ -592,6 +592,16 @@ input.focused {
 /* Responsive variations
 -------------------------------------------------- */
 
+/* Hide code snippets on mobile devices */
+@media screen and (max-width: 480px) {
+  .bs-docs-example {
+    border-radius: 4px;
+  }
+  .highlight {
+    display: none;
+  }
+}
+
 /* Tablets and up */
 @media screen and (min-width: 768px) {
 
diff --git a/docs/css.html b/docs/css.html
index dd7654ad1..69b132ce0 100644
--- a/docs/css.html
+++ b/docs/css.html
@@ -2228,7 +2228,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
           </div>
           <p class="lead">For faster mobile-friendly development, use these utility classes for showing and hiding content by device via media query.</p>
 
-          <table class="table table-bordered table-striped responsive-utilities">
+          <table class="table table-bordered table-striped responsive-utilities hidden-phone">
             <thead>
               <tr>
                 <th>Class</th>