Update menu overlay for mobile

alexrturner · Feb 25, 2024 · 211d0f8 · 211d0f8
1 parent 576441d
commit 211d0f8
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 0 deletions.
diff --git a/assets/css/index.css b/assets/css/index.css
@@ -415,6 +415,13 @@ menu overlay
   justify-content: end;
   align-items: end;
 }
+@media (max-width: 768px) {
+  .overlay {
+    align-items: center;
+    justify-content: flex-start;
+  }
+}
+
 .overlay,
 .overlay * {
   pointer-events: none !important;

diff --git a/assets/js/menu-overlay.js b/assets/js/menu-overlay.js
@@ -9,5 +9,11 @@ document.addEventListener("DOMContentLoaded", function () {
     overlay.style.opacity = isOpen ? "0" : "1";
     overlay.style.visibility = isOpen ? "hidden" : "visible";
     menu.classList.toggle("hidden");
+    // toggle body scroll
+    if (isOpen) {
+      document.body.style.overflowY = "scroll";
+    } else {
+      document.body.style.overflowY = "hidden";
+    }
   });
 });