diff --git a/.changeset/lemon-jars-arrive.md b/.changeset/lemon-jars-arrive.md
new file mode 100644
index 00000000..61cf13f5
--- /dev/null
+++ b/.changeset/lemon-jars-arrive.md
@@ -0,0 +1,5 @@
+---
+'@myst-theme/site': patch
+---
+
+Improve navbar UX for small viewports
diff --git a/packages/site/src/components/Navigation/TopNav.tsx b/packages/site/src/components/Navigation/TopNav.tsx
index 3257fe1b..245c7e2f 100644
--- a/packages/site/src/components/Navigation/TopNav.tsx
+++ b/packages/site/src/components/Navigation/TopNav.tsx
@@ -149,9 +149,9 @@ export function TopNav({ hideToc }: { hideToc?: boolean }) {
   const { title, nav, actions } = config ?? {};
   const { logo, logo_dark, logo_text } = config?.options ?? {};
   return (
-    <div className="bg-white/80 backdrop-blur dark:bg-stone-900/80 shadow dark:shadow-stone-700 p-3 md:px-8 fixed w-screen top-0 z-30 h-[60px]">
-      <nav className="flex items-center justify-between flex-wrap max-w-[1440px] mx-auto">
-        <div className="flex flex-row xl:min-w-[19.5rem] mr-2 sm:mr-7 justify-start items-center">
+    <div className="bg-white/80 backdrop-blur dark:bg-stone-900/80 shadow dark:shadow-stone-700 p-3 md:px-8 sticky w-screen top-0 z-30 h-[60px]">
+      <nav className="flex items-center justify-between flex-nowrap max-w-[1440px] mx-auto">
+        <div className="flex flex-row xl:min-w-[19.5rem] mr-2 sm:mr-7 justify-start items-center shrink-0">
           {!hideToc && (
             <div className="block xl:hidden">
               <button