reflect nav changes here in the responsive views

- since we're column to start, need to set row.
- note that flex-direction cannot be inherited, so we have to set it twice.
- apply the horizontal padding again to .nav-link.
- remove the .nav-item styles (un-needed).
- remove previous .nav-link styles as they were un-nested and potentially problematic in old placement should someone mix more navs in here.

diff --git a/scss/_navbar.scss b/scss/_navbar.scss
index 12fe8c1b40171c374cce90d062d106b349fd4840..c9af116dc5d4c91c4079c69302808fb6f57f52ae 100644 (file)
--- a/scss/_navbar.scss
+++ b/scss/_navbar.scss
@@ -265,10 +265,19 @@
       }
 
       @include media-breakpoint-up($next) {
-        display: flex;
+        flex-direction: row;
         flex-wrap: nowrap;
         align-items: center;
 
+        .navbar-nav {
+          flex-direction: row;
+
+          .nav-link {
+            padding-right: .5rem;
+            padding-left: .5rem;
+          }
+        }
+
         // For nesting containers, have to redeclare for alignment purposes
         > .container {
           display: flex;
@@ -283,15 +292,6 @@
         }
         // scss-lint:enable ImportantRule
 
-        .nav-item {
-          display: inline-block;
-        }
-
-        .nav-link {
-          padding-right: .5rem;
-          padding-left: .5rem;
-        }
-
         .navbar-toggler {
           display: none;
         }