Redo navbar-toggler

- Require inner element for the icon for improved customization (e.g., drop the element to replace it with your own icon font or SVG)
- Tighten up padding
- Better comments

2 files changed, 23 insertions, 8 deletions

diff --git a/scss/_navbar.scss b/scss/_navbar.scss
index 49ac07178..b5231d720 100644
--- a/scss/_navbar.scss
+++ b/scss/_navbar.scss
@@ -98,14 +98,11 @@
 // Bootstrap JavaScript plugin.
 
 .navbar-toggler {
-  width: 2.5em;
-  height: 2em;
   padding: $navbar-toggler-padding-y $navbar-toggler-padding-x;
   font-size: $navbar-toggler-font-size;
   line-height: 1;
-  background: transparent no-repeat center center;
-  background-size: 24px 24px;
-  border: $border-width solid transparent;
+  background: transparent; // remove default button style
+  border: $border-width solid transparent; // remove default button style
   @include border-radius($navbar-toggler-border-radius);
 
   @include hover-focus {
@@ -113,6 +110,18 @@
   }
 }
 
+// Keep as a separate element so folks can easily override it with another icon
+// or image file as needed.
+.navbar-toggler-icon {
+  display: inline-block;
+  content: "";
+  width: 1.5em;
+  height: 1.5em;
+  vertical-align: middle;
+  background: no-repeat center center;
+  background-size: 100% 100%;
+}
+
 // Navigation
 //
 // Custom navbar navigation built on the base `.nav` styles.
@@ -163,10 +172,13 @@
   }
 
   .navbar-toggler {
-    background-image: $navbar-light-toggler-bg;
     border-color: $navbar-light-toggler-border;
   }
 
+  .navbar-toggler-icon {
+    background-image: $navbar-light-toggler-bg;
+  }
+
   .navbar-divider {
     background-color: rgba(0,0,0,.075);
   }
@@ -211,10 +223,13 @@
   }
 
   .navbar-toggler {
-    background-image: $navbar-inverse-toggler-bg;
     border-color: $navbar-inverse-toggler-border;
   }
 
+  .navbar-toggler-icon {
+    background-image: $navbar-inverse-toggler-bg;
+  }
+
   .navbar-divider {
     background-color: rgba(255,255,255,.075);
   }
diff --git a/scss/_variables.scss b/scss/_variables.scss
index 8fd381861..b76064d96 100644
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -592,7 +592,7 @@ $navbar-brand-padding-y:            .25rem !default;
 $navbar-divider-padding-y:          .425rem !default;
 
 $navbar-toggler-padding-x:           .75rem !default;
-$navbar-toggler-padding-y:           .5rem !default;
+$navbar-toggler-padding-y:           .25rem !default;
 $navbar-toggler-font-size:           $font-size-lg !default;
 $navbar-toggler-border-radius:       $btn-border-radius !default;