From bcdfa5e23683ece053edd5f77910b7b8c7c9b2f3 Mon Sep 17 00:00:00 2001 From: Jarvis Prime Date: Tue, 24 Mar 2026 04:58:48 +0000 Subject: [PATCH] Fix hamburger icon: flex-direction column with gap for visible bars --- src/layouts/Base.astro | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/src/layouts/Base.astro b/src/layouts/Base.astro index f83b569..ff90df3 100644 --- a/src/layouts/Base.astro +++ b/src/layouts/Base.astro @@ -389,16 +389,16 @@ const isHome = currentPath === '/'; @media (max-width: 960px) { .d-placing { width: 95%; padding: 0 10px; } /* 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; } + .d-header { position: relative; display: flex; align-items: center; justify-content: space-between; } + .d-menu { display: flex; flex-wrap: nowrap; list-style: none; margin: 0; padding: 0; overflow: hidden; } + .d-menu li { float: none; flex-shrink: 0; padding-right: 0; } + .d-menu .menu-item { font-size: 13px; padding: 6px 10px; } /* Hide items that don't fit — show first 3 (Home, Products, Purchase) */ .d-menu li:nth-child(n+4) { display: none; } .d-menu.open li:nth-child(n+4) { 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; } + .hamburger { display: flex; flex-direction: column; justify-content: center; cursor: pointer; padding: 10px; z-index: 101; flex-shrink: 0; gap: 4px; } + .hamburger span { display: block; width: 20px; height: 2px; background: #bb983b; border-radius: 1px; } /* 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%; }