🖊️ Improve UX for small viewports (#438)

* fix: disable wrapping of navbar, disable shrinkage * fix: use sticky rather than fixed This allows us to scroll * chore: add changeset
jupyter-book · Aug 1, 2024 · cdddd32 · cdddd32
1 parent 61e24ac
commit cdddd32
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 3 deletions.
diff --git a/.changeset/lemon-jars-arrive.md 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
@@ -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