diff --git a/layouts/partials/header.html b/layouts/partials/header.html
index 600e5e9627d3..b9d90ac5859f 100644
--- a/layouts/partials/header.html
+++ b/layouts/partials/header.html
@@ -8,7 +8,7 @@
 <nav class="top-nav-bar transition-all">
     <div class="top-nav-container lg:container lg:px-4 flex-wrap justify-end">
         {{ partial "banner" . }}
-        <div class="w-full p-4">
+        <div class="hidden lg:block w-full p-4">
             <ul class="hidden w-full lg:flex justify-end items-center order-first lg:order-last">
                 <li class="github-widget mr-8">
                     <a data-track="header-github-pulumi" class="github-button" href="https://github.com/pulumi/pulumi"
@@ -357,7 +357,7 @@
                     <label class="mobile-menu-closed" for="mobile-menu">
                         {{ partial "icon" (dict "icon" "hamburger-closed") }}
                     </label>
-                    <label class="mobile-menu-open hidden" for="mobile-menu">
+                    <label class="mobile-menu-open" for="mobile-menu">
                         {{ partial "icon" (dict "icon" "hamburger-open") }}
                     </label>
                 </span>
diff --git a/theme/src/scss/_header.scss b/theme/src/scss/_header.scss
index d230769a785b..1e763c35a4b9 100644
--- a/theme/src/scss/_header.scss
+++ b/theme/src/scss/_header.scss
@@ -350,13 +350,17 @@ pulumi-user-toggle:not(.hydrated) [slot="signed-in"] {
         @apply hidden;
     }
 
+    .mobile-menu-icon .mobile-menu-open {
+        display: none;
+    }
+
     .mobile-menu-toggle:checked + .mobile-menu-icon {
         .mobile-menu-closed {
-            @apply hidden;
+            display: none;
         }
 
         .mobile-menu-open {
-            @apply block;
+            display: block;
         }
     }
 
@@ -530,6 +534,29 @@ pulumi-user-toggle:not(.hydrated) [slot="signed-in"] {
     }
 }
 
+html:has(.mobile-menu-toggle:checked) {
+    overflow: hidden;
+
+    .header-container {
+        position: fixed;
+        top: 0;
+        left: 0;
+        right: 0;
+
+        &.is-pinned {
+            top: -1px;
+        }
+    }
+
+    @include screen-lg {
+        overflow: auto;
+
+        .header-container {
+            position: sticky;
+        }
+    }
+}
+
 .registry-hero, .docs-hero {
     @apply w-full flex relative flex-col justify-center;
 
diff --git a/theme/src/ts/misc.ts b/theme/src/ts/misc.ts
index 39263899f735..9a6f0ffcf5f4 100644
--- a/theme/src/ts/misc.ts
+++ b/theme/src/ts/misc.ts
@@ -165,6 +165,10 @@ export function generateOnThisPage() {
 (function () {
     const observer = new IntersectionObserver(
         ([e]) => {
+            const mobileMenuToggle = document.getElementById("mobile-menu") as HTMLInputElement | null;
+            if (mobileMenuToggle?.checked) {
+                return;
+            }
             e.target.classList.toggle("is-pinned", e.intersectionRatio < 1);
             const pinnedSearchContainerEl = document.querySelector(".header-pinned") as HTMLElement;
             const dotOverlay = document.querySelector(".hide-on-pinned") as HTMLElement;