diff --git a/static/css/input.css b/static/css/input.css
index 295171a..5c2abb2 100644
--- a/static/css/input.css
+++ b/static/css/input.css
@@ -213,6 +213,32 @@ input.input-field[type="number"] {
   background-color: var(--accent-subtle);
 }
 
+/* ── Mobile fixed nav ─────────────────────────────────────────── */
+
+@media (max-width: 767px) {
+  :root {
+    --fixed-nav-h: calc(
+      max(1rem, env(safe-area-inset-top, 0px) * 0.9) + 3.25rem
+    );
+  }
+
+  .nav-bar {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    z-index: 30;
+    background-color: var(--page);
+    padding-top: max(1rem, calc(env(safe-area-inset-top, 0px) * 0.9));
+    padding-left: 1.5rem;
+    padding-right: 1.5rem;
+  }
+
+  main {
+    padding-top: calc(var(--fixed-nav-h) + 2rem);
+  }
+}
+
 /* ── Sticky Submit ────────────────────────────────────────────── */
 
 .sticky-submit {
@@ -502,6 +528,12 @@ input.input-field[type="number"] {
   .timeline-item {
     margin-bottom: 1rem;
   }
+
+  /* Stick below fixed nav; 0.5rem tucks behind nav, 1rem visible = matches bottom */
+  .timeline-heading {
+    top: calc(var(--fixed-nav-h) - 0.5rem);
+    padding-top: 1.5rem;
+  }
 }
 
 /* ── Data page ─────────────────────────────────────────────────── */
diff --git a/templates/base.html b/templates/base.html
index 0f26c0e..5697e31 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -2,7 +2,10 @@
 <html lang="en" data-star-root>
   <head>
     <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1, viewport-fit=cover"
+    />
     <meta
       name="description"
       content="{% block description %}
@@ -181,7 +184,7 @@
   </head>
   <body class="min-h-screen bg-page text-text">
     <main
-      class="mx-auto flex w-full max-w-5xl flex-col gap-8 px-6 py-4 md:py-10"
+      class="mx-auto flex w-full max-w-5xl flex-col gap-8 px-6 pb-4 md:py-10"
     >
       {% include "partials/nav.html" %} {% block content %}{% endblock %}
       <footer
diff --git a/templates/pages/timeline.html b/templates/pages/timeline.html
index 084427c..788d9b6 100644
--- a/templates/pages/timeline.html
+++ b/templates/pages/timeline.html
@@ -208,13 +208,19 @@
     }
 
     // Sticky header detection - observe all current and future headings
+    // On mobile the nav is fixed, so shrink the observer root by its height
+    const navBar = document.querySelector(".nav-bar");
+    const navH =
+      navBar && matchMedia("(max-width: 767px)").matches
+        ? navBar.getBoundingClientRect().height
+        : 0;
     const stickyObserver = new IntersectionObserver(
       (entries) => {
         entries.forEach((entry) => {
           entry.target.classList.toggle("is-stuck", !entry.isIntersecting);
         });
       },
-      { rootMargin: "-1px 0px 0px 0px", threshold: 1 },
+      { rootMargin: `-${navH + 1}px 0px 0px 0px`, threshold: 1 },
     );
 
     // Use MutationObserver to watch for new month headings being added
diff --git a/templates/partials/nav.html b/templates/partials/nav.html
index 85668f9..93b87e5 100644
--- a/templates/partials/nav.html
+++ b/templates/partials/nav.html
@@ -1,5 +1,5 @@
 {% import "partials/icons.html" as icons %}
-<nav class="border-b pb-4 text-sm">
+<nav class="nav-bar border-b pb-4 text-sm">
   <div class="flex items-center justify-between">
     <div class="font-semibold uppercase tracking-[0.25em] text-accent">
       <a href="/" class="-m-2 inline-block p-2">B{rew}log</a>
