diff --git a/src/css/nav.css b/src/css/nav.css
index 67e8338..ae4df01 100644
--- a/src/css/nav.css
+++ b/src/css/nav.css
@@ -56,8 +56,15 @@
 }
 
 /* Navigation adjustments for small screens */
-@media (max-width: 600px) {
+@media (max-width: 768px) {
   nav.site-nav {
+    display: none;
+    flex-direction: column;
+    gap: 0;
+    position: absolute;
+    top: 3em;
+    left: 0;
+
     width: 100%;
     height: auto;
     float: none;
@@ -66,6 +73,9 @@
     border-bottom: 1px solid #444;
     background: #111;
   }
+  .site-nav.active {
+    display: flex;
+  }
   nav.site-nav ul {
     display: block;
     justify-content: center;
@@ -87,5 +97,21 @@
   nav.site-nav a {
     text-transform: capitalize;
   }
+  .menu-toggle {
+    display: inline-block;
+  }
+  .dropdown {
+    position: relative;
+  }
+  .dropdown-content {
+    position: static;
+  }
 }
 
+.menu-toggle {
+  display: none;
+  background: none;
+  border: none;
+  font-size: 1.5em;
+  padding: 0.5em;
+}
diff --git a/src/views/partials/headers.handlebars b/src/views/partials/headers.handlebars
index c7deba8..a5830c9 100644
--- a/src/views/partials/headers.handlebars
+++ b/src/views/partials/headers.handlebars
@@ -3,6 +3,7 @@
     <div class="logo">
       <a href="/">{{siteOwner}}</a>
     </div>
+    <button class="menu-toggle" onclick="toggleMenu()">☰ Menu</button>
     <nav class="site-nav">
       {{#each navLinks}}
       {{#if submenu}}
@@ -25,3 +26,10 @@
     </nav>
   </div>
 </header>
+{{#section "scripts"}}
+<script>
+  function toggleMenu() {
+    document.getElementById("siteNav").classList.toggle("active");
+  }
+</script>
+{{/section}}