diff --git a/packages/ui/src/components/SiteHeader.astro b/packages/ui/src/components/SiteHeader.astro
index 0b8abd0..0336874 100644
--- a/packages/ui/src/components/SiteHeader.astro
+++ b/packages/ui/src/components/SiteHeader.astro
@@ -24,8 +24,10 @@ const inWorld = world.some((w) => w.key === current);
 const aria = (key: NavKey) => (key === current ? "page" : undefined);
 ---
 <header class="gk-site-header">
-  <div class="nebula" aria-hidden="true"></div>
-  <img src={filamentBanner} alt="" aria-hidden="true" class="banner" />
+  <div class="decor" aria-hidden="true">
+    <div class="nebula"></div>
+    <img src={filamentBanner} alt="" class="banner" />
+  </div>
   {
     store ? (
       <nav aria-label="Store" class="nav">
@@ -88,17 +90,24 @@ const aria = (key: NavKey) => (key === current ? "page" : undefined);
 </header>
 
 <style>
+  /* The header sits above the page so the My world menu opens over it; only
+     the nebula and banner are clipped to the header. */
   .gk-site-header {
     position: relative;
-    overflow: hidden;
+    z-index: 10;
     color: var(--gk-text);
     isolation: isolate;
   }
+  .decor {
+    position: absolute;
+    inset: 0;
+    z-index: -1;
+    overflow: hidden;
+    pointer-events: none;
+  }
   .nebula {
     position: absolute;
     inset: 0;
-    z-index: -1;
-    pointer-events: none;
     background:
       radial-gradient(ellipse 70% 90% at 100% 0%, rgba(106, 47, 224, 0.28), transparent 70%),
       radial-gradient(ellipse 55% 80% at 0% 70%, rgba(20, 163, 154, 0.18), transparent 70%);
@@ -112,8 +121,6 @@ const aria = (key: NavKey) => (key === current ? "page" : undefined);
     width: 900px;
     max-width: none;
     opacity: 0.22;
-    pointer-events: none;
-    z-index: -1;
   }
   .nav {
     max-width: var(--gk-page-max);