main-header - sticky

assets/css/src/nav.css

@@ -1,8 +1,10 @@
-/* Nav */
-
-.expanded-nav,
-.main-nav {
+.main-header {
+  position: sticky;
+  top: 0;
+  background-color: #fff;
+  z-index: 2;
 }
+/* Nav */
 
 /* Expanded nav */
 
@@ -15,7 +17,7 @@
   background-color: var(--color-brown-light);
   display: grid;
   grid-template-columns: 2fr 8fr 1fr;
-  transition: top 0.5s var(--curve-quick-slow);
+  transition: top 0.4s var(--curve-quick-slow);
   padding: 2rem var(--space-m) 2rem 1rem;
   border-bottom: var(--border);
 }

assets/js/script.js

@@ -12,4 +12,16 @@ document.addEventListener("DOMContentLoaded", () => {
   // Listeners
   nodes.burgerBtn.addEventListener("click", () => expandNav(nodes));
   nodes.closeNavBtn.addEventListener("click", () => closeNav(nodes));
+
+  // Key shortcuts
+  window.addEventListener("keyup", (event) => {
+    if (event.key === "Escape") {
+      closeNav(nodes);
+    }
+  });
+  window.addEventListener("scroll", (event) => {
+    if (nodes.expandedNav.classList.contains("open")) {
+      closeNav(nodes);
+    }
+  });
 });