navbar working

assets/css/_nav-bar-help.scss

@@ -0,0 +1,47 @@
+.navbar-expand-lg {
+  .nav-item {
+    margin-left: 2px;
+    a {
+      &.nav-link {
+        padding: 0 0 0 6px;
+        margin: 8px 0 8px 0;
+        border-left: 6px transparent solid;
+        &.active {
+          border-left: 6px $secondary solid;
+          border-bottom: none;
+        }
+        &:hover, &:active {
+          color: $primary !important;
+          border-left: 6px $secondary solid;
+          border-bottom: none;
+        }
+      }
+    }
+  }
+}
+
+@include media-breakpoint-up(lg) {
+  .navbar-expand-lg {
+    .nav-item {
+      margin-left: 0;
+      a {
+        &.nav-link {
+          padding: 0 0 6px 0;
+          margin: 0 12px 0 12px;
+          border-left: none;
+          border-top: 6px transparent solid;
+          border-bottom: 6px transparent solid;
+          &.active {
+            border-left: none;
+            border-bottom: 6px $secondary solid;
+          }
+          &:hover, &:active {
+            color: $primary !important;
+            border-left: none;
+            border-bottom: 6px $secondary solid;
+          }
+        }
+      }
+    }
+  }
+}

assets/css/_nav-burger.scss

@@ -0,0 +1,56 @@
+/* Hamburger settings overrides */
+$hamburger-padding-x: 0.95rem !default;
+$hamburger-padding-y: 0.625rem !default;
+$hamburger-layer-width: 1.5rem !default;
+$hamburger-layer-height: 2px !default;
+$hamburger-layer-spacing: 6px !default;
+// * skipping default color, using color from bootstrap instead, below
+// $hamburger-layer-color: rgba(0, 0, 0, 0.55) !default;
+$hamburger-layer-border-radius: 0.25rem !default;
+$hamburger-hover-opacity: 0.7 !default;
+// * skipping default color, using color from bootstrap instead, below
+// $hamburger-active-layer-color: $hamburger-layer-color !default;
+$hamburger-active-hover-opacity: $hamburger-hover-opacity !default;
+
+/* import hamburgers sass */
+@import "../../node_modules/hamburgers/_sass/hamburgers/hamburgers.scss";
+
+/* correct colors to match bootstrap defaults */
+.navbar-light {
+  .hamburger {
+    &.navbar-toggler {
+      border: 1px $navbar-light-toggler-border-color solid !important;
+      .hamburger-inner {
+        &,
+        &::before,
+        &::after {
+          background-color: $navbar-light-color;
+        }
+      }
+      &.is-active {
+        .hamburger-inner::after {
+          background-color: $navbar-light-color;
+        }
+      }
+    }
+  }
+}
+.navbar-dark {
+  .hamburger {
+    &.navbar-toggler {
+      border: 1px $navbar-dark-toggler-border-color solid !important;
+      .hamburger-inner {
+        &,
+        &::before,
+        &::after {
+          background-color: $navbar-dark-color;
+        }
+      }
+      &.is-active {
+        .hamburger-inner::after {
+          background-color: $navbar-dark-color;
+        }
+      }
+    }
+  }
+}

assets/css/app.scss

@@ -7,7 +7,11 @@
 /*SVG ICON SYSTEM*/
 @import "svg-icons";
 
+/* Navbar toggler icon override */
+@import "nav-burger";
 
+/* Navbar custom styling */
+@import "nav-bar-help";
 
 /* main */
 html,
@@ -39,6 +43,11 @@ a {
     }
   }
 }
+
+/* navbar menus */
+// nav.navbar ul.navbar-nav li.menu-item
+
+/* more */
 .border-gray-900 {
   border-color: $gray-900 !important;
 }
@@ -82,3 +91,4 @@ a {
   padding-top: 2px;
   padding-bottom: 2px;
 }
+