diff --git a/pkgs/docs-site/src/routes/+layout.svelte b/pkgs/docs-site/src/routes/+layout.svelte
index 0c27bef29..16f300d29 100644
--- a/pkgs/docs-site/src/routes/+layout.svelte
+++ b/pkgs/docs-site/src/routes/+layout.svelte
@@ -35,6 +35,12 @@
       }
     })();
   });
+
+  function toggleMenu() {
+    menuOpen = !menuOpen;
+    window.scrollTo({ top: 0 });
+    document.documentElement.classList.toggle("no-scroll", menuOpen);
+  }
 </script>
 
 <svelte:head>
@@ -64,7 +70,7 @@
       {/if}
     </div>
     <div class={["menu", menuOpen && "open"]}>
-      <button onclick={() => (menuOpen = !menuOpen)}>Menu</button>
+      <button onclick={toggleMenu}>Menu</button>
       <ul>
         {@render navItems(docs.navItems)}
       </ul>
@@ -130,6 +136,7 @@
     color: #666;
   }
   .menu {
+    color: var(--fgColor);
     & > ul {
       visibility: hidden;
       position: fixed;
diff --git a/pkgs/docs-site/src/routes/global.css b/pkgs/docs-site/src/routes/global.css
index e9c987120..3f19a8d1f 100644
--- a/pkgs/docs-site/src/routes/global.css
+++ b/pkgs/docs-site/src/routes/global.css
@@ -3,12 +3,18 @@
 :root {
   --pagePadding: 15px;
   --globalBarHeight: 60px;
+  --fgColor: #000;
   --fgInvertedColor: #fff;
   --bgInvertedColor: #203637;
 }
 
 html {
   box-sizing: border-box;
+
+  &.no-scroll {
+    overflow: hidden;
+    height: 100vh;
+  }
 }
 *,
 *:before,