The top bar stays on screen while the page scrolls. "I'm thinking maybe topnav with the Coinos logo search/settings and profile avatar should stick around on screen even as you scroll the feed" (Adam, 2026-11-12). .brand-header is sticky at the top of every page that has it (feed, wallet, settings, profiles), as a frosted strip of the page background the width of the column, pulled out by the padding it adds so nothing moves at rest, clear of a notch by the safe-area inset. html scroll-padding-top keeps a post scrolled into view from landing under it. It sits at z-index 30, under every overlay (40 and up) and level with the bottom nav; nothing fixed lives inside it, so its backdrop-filter traps nothing. Checked on a 390px phone and a 1300px desktop against the live public feed scrolled 1400px; chat-layout, features-smoke and account-access tests pass

Co-Authored-By: Claude Opus 5.5 <[email protected]>
Claude-Session: https://claude.ai/code/session_01VMan6UKGJyuGyZFxddYRxS

1 files changed, 13 insertions, 0 deletions

diff --git a/src/style.css b/src/style.css
index 803979f..ec9fd18 100644
--- a/src/style.css
+++ b/src/style.css
@@ -95,6 +95,8 @@
 * { box-sizing: border-box; }
 
 html {
+  /* a post scrolled into view lands below the sticky top bar */
+  scroll-padding-top: 72px;
   /* Reserve the scrollbar's gutter always, so it doesn't appear the instant
      the history list fills the page and shrink the viewport — that width
      change re-centered the balance carousel's snapped card, the "slight move
@@ -176,6 +178,17 @@ input { scroll-margin-top: 12px; }
 .logo-full { height: 40px; flex: none; color: var(--ink); display: grid; place-items: center; }
 .logo-full svg { height: 40px; width: auto; display: block; }
 .brand h1 { font-size: 19px; }
+/* The top bar (logo, search, settings, avatar) stays on screen while the
+   page scrolls under it (Adam, 2026-11-12). A frosted strip the width of the
+   column, padded out by the same amount it's pulled in, so the layout at
+   rest doesn't move; the safe-area inset keeps it clear of a notch. */
+.brand-header {
+  position: sticky; top: 0; z-index: 30;
+  margin: -8px -16px; padding: 8px 16px;
+  padding-top: max(8px, env(safe-area-inset-top));
+  background: color-mix(in srgb, var(--bg) 84%, transparent);
+  -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px);
+}
 
 .badge {
   font-size: 12px; font-weight: 600; padding: 3px 9px; border-radius: 999px;