fix(nav): remove extra border-bottom under each nav item (desktop)

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.
This commit is contained in:
Kunthawat Greethong
2026-06-14 15:05:06 +07:00
parent 40382bbf55
commit 73d820412a

View File

@@ -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}