mobile menu

Author: nlodder

style.css

@@ -279,19 +279,30 @@ footer {
 
 /* MOBILE MENU */
 @media (max-width: 767px) {
-  .menu-toggle.is-open .menu-content {
-    transition-behavior:;
-    flex-direction: column;
+  .menu-content {
+    /* Set the starting position for mobile: off-screen to the right */
     position: fixed;
     top: 0;
-    left: 0;
+    right: 0; /* Align to right */
     width: 100vw;
-    /* dvh (Dynamic Viewport Height) prevents gaps on mobile browsers */
     height: 100dvh;
+    background: var(--white);
+    transform: translateX(100%); /* Hidden off-right */
+
+    flex-direction: column;
     justify-content: center;
     z-index: -1;
-    padding: 0;
-    transition: transform 0.5s cubic-bezier(0.165, 0.84, 0.44, 1), opacity 0.5s ease;
+
+    /* This transition handles BOTH opening and closing */
+    transition:
+      transform 0.5s cubic-bezier(0.165, 0.84, 0.44, 1),
+      opacity 0.5s ease;
+  }
+
+  .menu-toggle.is-open .menu-content {
+    transform: translateX(0); /* Slide into view */
+    opacity: 1;
+    max-width: 100vw; /* Override any desktop max-width */
   }
 
   /* Ensures the body doesn't scroll behind the open menu */