From 73d820412a008368d7e0560eecc3eaac720bb7b9 Mon Sep 17 00:00:00 2001 From: Kunthawat Greethong Date: Sun, 14 Jun 2026 15:05:06 +0700 Subject: [PATCH] fix(nav): remove extra border-bottom under each nav item (desktop) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit User reported: 'header menu มีบรรทัดเกิน แปลกๆ' — the 'หน้าแรก' active link had 2 horizontal lines under it (coral ::after + gray border-bottom). ROOT CAUSE: v7-5 .fx-nav-menu>li had border-bottom: 1px solid meant for MOBILE menu (separating stacked items) but the rule escaped the @media block during Phase 6.2 refactor and now applied to ALL viewports. FIX: Add .fx-nav-menu>li { border-bottom: none; } in base CSS (placed AFTER the original v7-5 rule so cascade applies it). Mobile @media block below still re-enables border-bottom:1px for stacked menu. Verified in built CSS: 12 .fx-nav-menu rules, override present and last. Build: 22 pages, 2.06s. --- src/styles/fx-system.css | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/src/styles/fx-system.css b/src/styles/fx-system.css index 4145288..1a95cb6 100644 --- a/src/styles/fx-system.css +++ b/src/styles/fx-system.css @@ -757,6 +757,12 @@ body, .fx-utility-bar, .fx-nav, .fx-hero-content, .fx-case, .fx-services, .fx-ca .fx-nav-dropdown a.active{background:var(--coral);color:#FAFAFA} .fx-nav-menu a.active{color:var(--coral)} .fx-nav-menu a.active::after{content:'';display:block;height:2px;background:var(--coral);margin-top:4px} + +/* Override v7-5 .fx-nav-menu>li border-bottom that escaped the @media + block during Phase 6.2 refactor. The border was meant for MOBILE only + (separating stacked menu items) but applied to all viewports — caused + a 1px gray line under every nav item in desktop. Kill it on desktop. */ +.fx-nav-menu>li { border-bottom: none; } @media (max-width:768px){ .fx-nav-inner{flex-direction:column;align-items:flex-start;padding:12px 16px} .fx-nav-menu{flex-direction:column;width:100%;gap:0}