Navigation completed, updated links active status with scrolling. Updated gulpfile.js to use terser instead as it supports es6

src/css/main.css

@@ -11,6 +11,7 @@
     --grey: hsla(0, 0%, 39%, 1);
     --mutedGrey: hsla(0, 0%, 67%, 0.58);
     --mutedBlack: hsla(0, 0%, 0%, 0.25);
+    --navBack: hsl(0, 0%, 30%);
 
     /* font sizes */
     --titleFS: 2.25rem;
@@ -20,6 +21,10 @@
 
 /*** Template Styles ****/
 
+html {
+    scroll-behavior: smooth;
+}
+
 a:visited {
     color: inherit;
 }
@@ -109,8 +114,14 @@ nav {
     flex-direction: row;
     justify-content: space-between;
     padding: 0.25em;
-    position: sticky;
+    position: fixed;
     top: 0;
+    width: 100%;
+    transition: background-color 0.4s ease-in;
+}
+
+nav.scrolled {
+    background-color: var(--navBack);
 }
 
 nav #nav-check {
@@ -147,7 +158,7 @@ nav ul li span {
     visibility: hidden;
 }
 
-nav ul li a:hover span {
+nav ul li a:hover span, nav ul li .active span {
     visibility: visible;
 }
 
@@ -184,8 +195,9 @@ i.fa-chevron-down {
         display: block;
         height: 50px;
         width: 100%;
-        background-color: #4d4d4d;
-        position: relative;
+        background-color: var(--navBack);
+        position: fixed;
+        top: 0;
         padding: 0;
     }
 
@@ -196,12 +208,12 @@ i.fa-chevron-down {
     nav  .nav-btn {
         display: inline-block;
         position: absolute;
-        right: 30px;
-        top: -353px;
+        right: 75px;
+        top: -360px;
     }
 
     nav ul {
-        position: relative;
+        position: fixed;
         display: block;
         width: 100%;
         background-color: #333;
@@ -221,12 +233,10 @@ i.fa-chevron-down {
 
     .nav-btn label {
         display: inline-block;
-        padding: 13px 0;
-        margin: 0;
         cursor: pointer;
         width: 60px;
-        height: 20px;
-        position: relative;
+        height: 50px;
+        position: fixed;
         -webkit-transform: rotate(0deg);
         -moz-transform: rotate(0deg);
         -o-transform: rotate(0deg);
@@ -262,7 +272,7 @@ i.fa-chevron-down {
     }
 
     nav #nav-check:not(:checked) ~ .nav-btn label span:nth-child(1) {
-        top: 0;
+        top: 8px;
         -webkit-transform-origin: left center;
         -moz-transform-origin: left center;
         -o-transform-origin: left center;
@@ -270,7 +280,7 @@ i.fa-chevron-down {
     }
 
     nav #nav-check:not(:checked) ~ .nav-btn label span:nth-child(2) {
-        top: 15px;
+        top: 23px;
         -webkit-transform-origin: left center;
         -moz-transform-origin: left center;
         -o-transform-origin: left center;
@@ -278,7 +288,7 @@ i.fa-chevron-down {
     }
 
     nav #nav-check:not(:checked) ~ .nav-btn label span:nth-child(3) {
-        top: 30px;
+        top: 38px;
         -webkit-transform-origin: left center;
         -moz-transform-origin: left center;
         -o-transform-origin: left center;