diff --git a/assets/css/src/nav.css b/assets/css/src/nav.css index 4114f6b..cd0fb5d 100644 --- a/assets/css/src/nav.css +++ b/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); } diff --git a/assets/js/script.js b/assets/js/script.js index 087715a..c0d1757 100644 --- a/assets/js/script.js +++ b/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); + } + }); });