From 2dd58a0fc780eb5fe3171bbc5d10c829ced331fb Mon Sep 17 00:00:00 2001
From: Jarvis Prime <jarvis@openclaw.local>
Date: Tue, 24 Mar 2026 04:39:30 +0000
Subject: [PATCH] Priority+ nav: show key items inline, overflow rest to
 hamburger

---
 src/layouts/Base.astro | 24 +++++++++++++++---------
 1 file changed, 15 insertions(+), 9 deletions(-)

diff --git a/src/layouts/Base.astro b/src/layouts/Base.astro
index 6df14cf..31b9641 100644
--- a/src/layouts/Base.astro
+++ b/src/layouts/Base.astro
@@ -388,15 +388,21 @@ const isHome = currentPath === '/';
     /* === RESPONSIVE HELPERS === */
     @media (max-width: 960px) {
       .d-placing { width: 95%; padding: 0 10px; }
-      /* Hamburger menu */
-      .hamburger { display: block; cursor: pointer; padding: 8px; position: absolute; right: 10px; top: 8px; z-index: 101; }
-      .hamburger span { display: block; width: 22px; height: 2px; background: #bb983b; margin: 5px 0; transition: 0.3s; }
-      .d-header { position: relative; }
-      .d-menu { display: none; flex-direction: column; position: absolute; top: 100%; left: 0; right: 0; background: #3a2c18; z-index: 100; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.3); }
-      .d-menu.open { display: flex; }
-      .d-menu li { float: none; padding: 0; margin: 0; }
-      .d-menu .menu-item { display: block; padding: 10px 20px; font-size: 14px; border-bottom: 1px solid #4a3c28; }
-      .d-menu .menu-item:hover { background: #4a3c28; }
+      /* Priority+ nav: show first items, overflow rest into hamburger */
+      .d-header { position: relative; display: flex; align-items: center; }
+      .d-menu { display: flex; flex-wrap: nowrap; list-style: none; margin: 0; padding: 0; overflow: hidden; flex: 1; }
+      .d-menu li { float: none; flex-shrink: 0; }
+      .d-menu .menu-item { font-size: 12px; padding: 4px 8px; }
+      /* Hide items that don't fit — show first 4 (Home, Products, Purchase, Support) */
+      .d-menu li:nth-child(n+5) { display: none; }
+      .d-menu.open li:nth-child(n+5) { display: block; }
+      /* Hamburger button */
+      .hamburger { display: flex; cursor: pointer; padding: 8px; z-index: 101; flex-shrink: 0; }
+      .hamburger span { display: block; width: 18px; height: 2px; background: #bb983b; margin: 3px 0; }
+      /* When open, show all items as dropdown below */
+      .d-menu.open { flex-wrap: wrap; position: absolute; top: 100%; left: 0; right: 0; background: #3a2c18; z-index: 100; padding: 0; box-shadow: 0 4px 8px rgba(0,0,0,0.3); overflow: visible; }
+      .d-menu.open li { width: 100%; }
+      .d-menu.open .menu-item { display: block; padding: 10px 20px; font-size: 14px; border-bottom: 1px solid #4a3c28; }
       .d-menu .with-dropdown .dropdown { display: none; }
       .d-logo { display: none; }
       .d-footer .left, .d-footer .right { float: none; width: 100%; }