diff --git a/site/src/layouts/Base.astro b/site/src/layouts/Base.astro
index 85494f7..9c1f76a 100644
--- a/site/src/layouts/Base.astro
+++ b/site/src/layouts/Base.astro
@@ -138,8 +138,12 @@ try {
     /* ── Base reset ─────────────────────────────────────────────────────── */
     * { box-sizing: border-box; }
     html { scroll-behavior: smooth; }
-    body { margin: 0; }
+    body { margin: 0; overflow-x: hidden; }
     .maplibregl-canvas { outline: none; }
+
+    /* Nav links scroll horizontally on narrow screens without a scrollbar */
+    .nav-links { scrollbar-width: none; -ms-overflow-style: none; }
+    .nav-links::-webkit-scrollbar { display: none; }
   </style>
 </head>
 <body
@@ -151,36 +155,39 @@ try {
     class="border-b border-zinc-800 sticky top-0 z-50 bg-zinc-950/90 backdrop-blur"
     style="border-color: var(--border)"
   >
-    <div class="max-w-7xl mx-auto px-4 h-12 flex items-center gap-6">
-      <a href={baseUrl} class="font-bold text-white tracking-tight hover:text-[--accent] transition-colors">
+    <div class="max-w-7xl mx-auto px-4 h-12 flex items-center gap-3">
+      <!-- Logo: always visible, never shrinks -->
+      <a href={baseUrl} class="font-bold text-white tracking-tight hover:text-[--accent] transition-colors shrink-0">
         Bincio<span class="text-[--accent]">Activity</span>
       </a>
       {!isPublicPage && (
-        <>
+        <!-- Links: scroll horizontally on mobile, no visible scrollbar -->
+        <div class="nav-links flex items-center gap-5 overflow-x-auto flex-1 min-w-0">
           <!-- Feed tab: only shown for multi-user (more than one shard) -->
           {!singleHandle && (
-            <a href={baseUrl} class="text-sm text-zinc-400 hover:text-white transition-colors">Feed</a>
+            <a href={baseUrl} class="text-sm text-zinc-400 hover:text-white transition-colors shrink-0">Feed</a>
           )}
           <!-- Single-user: static handle link. Multi-user: populated by user-widget script. -->
           {singleHandle
-            ? <a href={`${baseUrl}u/${singleHandle}/`} class="text-sm text-zinc-400 hover:text-white transition-colors">@{singleHandle}</a>
-            : <a id="nav-me" href="#" style="display:none" class="text-sm text-[--accent] hover:text-white transition-colors"></a>
+            ? <a href={`${baseUrl}u/${singleHandle}/`} class="text-sm text-zinc-400 hover:text-white transition-colors shrink-0">@{singleHandle}</a>
+            : <a id="nav-me" href="#" style="display:none" class="text-sm text-[--accent] hover:text-white transition-colors shrink-0"></a>
           }
           <!-- Per-user nav links — updated by user-widget script in multi-user mode -->
-          <a id="nav-stats"   href={singleHandle ? `${baseUrl}u/${singleHandle}/stats/`   : `${baseUrl}stats/`}   data-user-path="stats/"   class="text-sm text-zinc-400 hover:text-white transition-colors">Stats</a>
-          <a id="nav-athlete" href={singleHandle ? `${baseUrl}u/${singleHandle}/athlete/` : `${baseUrl}athlete/`} data-user-path="athlete/" class="text-sm text-zinc-400 hover:text-white transition-colors">Athlete</a>
+          <a id="nav-stats"   href={singleHandle ? `${baseUrl}u/${singleHandle}/stats/`   : `${baseUrl}stats/`}   data-user-path="stats/"   class="text-sm text-zinc-400 hover:text-white transition-colors shrink-0">Stats</a>
+          <a id="nav-athlete" href={singleHandle ? `${baseUrl}u/${singleHandle}/athlete/` : `${baseUrl}athlete/`} data-user-path="athlete/" class="text-sm text-zinc-400 hover:text-white transition-colors shrink-0">Athlete</a>
           {mobileApp && (
-            <a id="nav-record" href={singleHandle ? `${baseUrl}u/${singleHandle}/record/` : `${baseUrl}record/`} data-user-path="record/" class="text-sm text-zinc-400 hover:text-white transition-colors">Record</a>
+            <a id="nav-record" href={singleHandle ? `${baseUrl}u/${singleHandle}/record/` : `${baseUrl}record/`} data-user-path="record/" class="text-sm text-zinc-400 hover:text-white transition-colors shrink-0">Record</a>
           )}
           {mobileApp && (
-            <a href={`${baseUrl}convert/`} class="text-sm text-zinc-400 hover:text-white transition-colors">Convert</a>
+            <a href={`${baseUrl}convert/`} class="text-sm text-zinc-400 hover:text-white transition-colors shrink-0">Convert</a>
           )}
-          <a href={`${baseUrl}about/`} class="text-sm text-zinc-400 hover:text-white transition-colors">About</a>
-          <a id="nav-feedback" href={`${baseUrl}feedback/`} style="display:none" class="text-sm text-zinc-400 hover:text-white transition-colors">Feedback</a>
-        </>
+          <a href={`${baseUrl}about/`} class="text-sm text-zinc-400 hover:text-white transition-colors shrink-0">About</a>
+          <a id="nav-feedback" href={`${baseUrl}feedback/`} style="display:none" class="text-sm text-zinc-400 hover:text-white transition-colors shrink-0">Feedback</a>
+        </div>
       )}
 
-      <div class="ml-auto flex items-center gap-1">
+      <!-- Actions: always visible, never shrinks -->
+      <div class="ml-auto shrink-0 flex items-center gap-1">
         {!isPublicPage && (
           <>
             <!-- Logout button — hidden until logged in -->
