1 files changed, 42 insertions, 34 deletions

diff --git a/scss/_navbar.scss b/scss/_navbar.scss
index 6c31017dc..854e7df12 100644
--- a/scss/_navbar.scss
+++ b/scss/_navbar.scss
@@ -18,11 +18,22 @@
 .navbar {
   position: relative;
   display: flex;
-  flex-direction: column;
+  flex-wrap: wrap; // allow us to do the line break for collapsing content
+  align-items: center;
+  justify-content: space-between; // space out brand from logo
   padding: $navbar-padding-y $navbar-padding-x;
 
-  @include media-breakpoint-down(nth(map-keys($grid-breakpoints), 1)) {
-    > .container {
+  // Because flex properties aren't inherited, we need to redeclare these first
+  // few properities so that content nested within behave properly.
+  > .container,
+  > .container-fluid {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: space-between;
+
+    @include media-breakpoint-down(nth(map-keys($grid-breakpoints), 1)) {
+      width: 100%; // prevent flex parent container from collapsing
       margin-right: 0;
       margin-left: 0;
     }
@@ -36,11 +47,10 @@
 
 .navbar-brand {
   display: inline-block;
-  align-self: flex-start;
-  padding-top: .25rem;
-  padding-bottom: .25rem;
+  padding-top: $navbar-brand-padding-y;
+  padding-bottom: $navbar-brand-padding-y;
   margin-right: $navbar-padding-x;
-  font-size: $font-size-lg;
+  font-size: $navbar-brand-font-size;
   line-height: inherit;
   white-space: nowrap;
 
@@ -74,8 +84,8 @@
 
 .navbar-text {
   display: inline-block;
-  padding-top:    .425rem;
-  padding-bottom: .425rem;
+  padding-top: $nav-link-padding-y;
+  padding-bottom: $nav-link-padding-y;
 }
 
 
@@ -84,9 +94,15 @@
 // Custom styles for responsive collapsing and toggling of navbar contents.
 // Powered by the collapse Bootstrap JavaScript plugin.
 
+// When collapsed, prevent the toggleable navbar contents from appearing in
+// the default flexbox row orienation. Requires the use of `flex-wrap: wrap`
+// on the `.navbar` parent.
+.navbar-collapse {
+  flex-basis: 100%;
+}
+
 // Button for toggling the navbar when in its collapsed state
 .navbar-toggler {
-  align-self: flex-start; // Prevent toggler from growing to full width when it's the only visible navbar child
   padding: $navbar-toggler-padding-y $navbar-toggler-padding-x;
   font-size: $navbar-toggler-font-size;
   line-height: 1;
@@ -111,23 +127,12 @@
   background-size: 100% 100%;
 }
 
-// Use `position` on the toggler to prevent it from being auto placed as a flex
-// item and allow easy placement.
-.navbar-toggler-left {
-  position: absolute;
-  left: $navbar-padding-x;
-}
-.navbar-toggler-right {
-  position: absolute;
-  right: $navbar-padding-x;
-}
-
-// Generate series of `.navbar-toggleable-*` responsive classes for configuring
+// Generate series of `.navbar-expand-*` responsive classes for configuring
 // where your navbar collapses.
-.navbar-toggleable {
+.navbar-expand {
   @each $breakpoint in map-keys($grid-breakpoints) {
     $next: breakpoint-next($breakpoint, $grid-breakpoints);
-    $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
+    $infix: breakpoint-infix($next, $grid-breakpoints);
 
     &#{$infix} {
       @include media-breakpoint-down($breakpoint) {
@@ -138,7 +143,8 @@
           }
         }
 
-        > .container {
+        > .container,
+        > .container-fluid {
           padding-right: 0;
           padding-left: 0;
         }
@@ -147,11 +153,15 @@
       @include media-breakpoint-up($next) {
         flex-direction: row;
         flex-wrap: nowrap;
-        align-items: center;
+        justify-content: flex-start;
 
         .navbar-nav {
           flex-direction: row;
 
+          .dropdown-menu {
+            position: absolute;
+          }
+
           .nav-link {
             padding-right: .5rem;
             padding-left: .5rem;
@@ -159,16 +169,14 @@
         }
 
         // For nesting containers, have to redeclare for alignment purposes
-        > .container {
-          display: flex;
+        > .container,
+        > .container-fluid {
           flex-wrap: nowrap;
-          align-items: center;
         }
 
         // scss-lint:disable ImportantRule
         .navbar-collapse {
           display: flex !important;
-          width: 100%;
         }
         // scss-lint:enable ImportantRule
 
@@ -187,8 +195,7 @@
 
 // Dark links against a light background
 .navbar-light {
-  .navbar-brand,
-  .navbar-toggler {
+  .navbar-brand {
     color: $navbar-light-active-color;
 
     @include hover-focus {
@@ -218,6 +225,7 @@
   }
 
   .navbar-toggler {
+    color: $navbar-light-color;
     border-color: $navbar-light-toggler-border;
   }
 
@@ -232,8 +240,7 @@
 
 // White links against a dark background
 .navbar-inverse {
-  .navbar-brand,
-  .navbar-toggler {
+  .navbar-brand {
     color: $navbar-inverse-active-color;
 
     @include hover-focus {
@@ -263,6 +270,7 @@
   }
 
   .navbar-toggler {
+    color: $navbar-inverse-color;
     border-color: $navbar-inverse-toggler-border;
   }