diff --git a/apps/kb/src/components/Header.tsx b/apps/kb/src/components/Header.tsx
index f1b9c746a54..14b7ce68bbe 100644
--- a/apps/kb/src/components/Header.tsx
+++ b/apps/kb/src/components/Header.tsx
@@ -7,7 +7,7 @@ import { ThemeToggle } from './ThemeToggle'
 // search, no user menu, no dashboard link — kb doesn't have any of that yet.
 function Header() {
   return (
-    <header className="backdrop-blur-sm backdrop-filter bg-default/75 border-b border-default w-full px-5 lg:pl-10 items-center flex h-(--header-height) gap-3">
+    <header className="relative z-50 backdrop-blur-sm backdrop-filter bg-default/75 border-b border-default w-full px-5 lg:pl-10 items-center flex h-(--header-height) gap-3">
       <div className="flex basis-full h-full items-center justify-center gap-2">
         <Logo />
         <Nav />
diff --git a/apps/kb/src/components/Nav.tsx b/apps/kb/src/components/Nav.tsx
index 16ff6977028..1f93936eefc 100644
--- a/apps/kb/src/components/Nav.tsx
+++ b/apps/kb/src/components/Nav.tsx
@@ -38,7 +38,7 @@ const triggerClass =
 // unconditional here; without it, an open menu pushes its siblings around
 // below the `md` breakpoint instead of overlaying them.
 const contentClass =
-  'absolute top-[calc(100%+4px)]! min-w-56 max-h-[calc(100vh-4rem)] border-y w-screen md:w-64 overflow-hidden overflow-y-auto rounded-none md:rounded-md md:border border-overlay bg-overlay text-foreground-light shadow-md duration-0!'
+  'absolute top-[calc(100%+4px)]! z-50 min-w-56 max-h-[calc(100vh-4rem)] border-y w-screen md:w-64 overflow-hidden overflow-y-auto rounded-none md:rounded-md md:border border-overlay bg-overlay text-foreground-light shadow-md duration-0!'
 const itemClass =
   'w-full flex h-8 items-center text-foreground-light text-sm hover:text-foreground select-none rounded-md p-2 leading-none no-underline focus-ring focus-visible:text-foreground'