diff --git a/assets/css/frontend/nav.css b/assets/css/frontend/nav.css index cff349eb..d213cde8 100644 --- a/assets/css/frontend/nav.css +++ b/assets/css/frontend/nav.css @@ -366,7 +366,6 @@ body.dark-theme .navbar-but-cluster .toggle-theme .theme-icon-sun { vertical-align: middle; } - /* Final FA baseline: never vertical-align in the top bar (flex/abs centering only). */ .navbar-top .fa, .navbar-top .fas, @@ -399,3 +398,164 @@ body.dark-theme .navbar-but-cluster .toggle-theme .theme-icon-sun { min-height: calc(1.44em + 0.6em) !important; /* line-height + vertical padding */ box-sizing: border-box !important; } + +/* ========================================================================== + * P1 — No click deformation on top-nav controls + * ========================================================================== */ +.navbar-top .but, +.navbar-top a.but, +.navbar-top a.btn, +.navbar-top button.but, +.navbar-top .navbar-cta, +.navbar-top .toggle-theme, +.navbar-top .toggle-radius, +.navbar-top a.navbar-avatar, +.navbar-top .navbar-toggle { + transform: none !important; +} +.navbar-top .but:hover, +.navbar-top .but:focus, +.navbar-top .but:active, +.navbar-top a.but:hover, +.navbar-top a.but:focus, +.navbar-top a.but:active, +.navbar-top a.btn:hover, +.navbar-top a.btn:focus, +.navbar-top a.btn:active, +.navbar-top .navbar-cta:hover, +.navbar-top .navbar-cta:focus, +.navbar-top .navbar-cta:active, +.navbar-top .toggle-theme:hover, +.navbar-top .toggle-theme:focus, +.navbar-top .toggle-theme:active, +.navbar-top a.navbar-avatar:hover, +.navbar-top a.navbar-avatar:focus, +.navbar-top a.navbar-avatar:active, +.navbar-top .navbar-toggle:hover, +.navbar-top .navbar-toggle:focus, +.navbar-top .navbar-toggle:active { + transform: none !important; +} +/* Keep CTA chip geometry stable on press (no height/padding jump) */ +.navbar-top .navbar-but .but:hover, +.navbar-top .navbar-but .but:focus, +.navbar-top .navbar-but .but:active, +.navbar-top a.navbar-cta.but:hover, +.navbar-top a.navbar-cta.but:focus, +.navbar-top a.navbar-cta.but:active { + margin: 0.4em; + box-sizing: border-box; +} + +/* ========================================================================== + * P2 — User dropdown under avatar (not floating too high) + * ========================================================================== */ +.navbar-top .list-inline > li, +.navbar-top .list-inline > li.relative { + position: relative; +} +.navbar-top .list-inline > li > .sub-menu, +.navbar-top .navbar-right .list-inline > li > .sub-menu, +.navbar-top .navbar-form .list-inline > li > .sub-menu { + top: calc(100% + 6px) !important; + right: 0 !important; + left: auto !important; + margin-top: 0 !important; + /* Override shared hover enter offset that reads as "too high" */ + transform: translateY(0) !important; +} +.navbar-top .list-inline > li:not(:hover) > .sub-menu { + /* keep hidden state without vertical jump when revealed */ + transform: translateY(4px) !important; +} +.navbar-top .list-inline > li:hover > .sub-menu { + transform: translateY(0) !important; +} + +/* ========================================================================== + * P3 — Hamburger only on mobile; mobile header no logo overlap + * ========================================================================== */ +/* Desktop / tablet landscape: never show mobile drawer toggle */ +.navbar-top .navbar-toggle, +.navbar-top button.navbar-toggle { + display: none !important; +} +@media (max-width: 767px) { + .navbar-top .navbar-header { + display: flex !important; + align-items: center; + justify-content: space-between; + width: 100%; + position: relative; + min-height: 50px; + gap: 4px; + } + .navbar-top .navbar-brand { + position: static !important; + width: auto !important; + max-width: calc(100% - 96px); + flex: 1 1 auto; + min-width: 0; + padding: 4px 8px !important; + justify-content: center; + text-align: center; + } + .navbar-top.center .navbar-brand { + position: static !important; + width: auto !important; + } + .navbar-top .navbar-logo { + max-width: 100%; + } + .navbar-top .navbar-logo > img { + padding: 0 !important; + max-width: 100%; + height: 32px; + max-height: 32px; + } + /* Menu / search toggles: fixed slots on the sides, never over logo */ + .navbar-top .navbar-toggle, + .navbar-top button.navbar-toggle { + display: inline-flex !important; + align-items: center; + justify-content: center; + width: 40px !important; + min-width: 40px !important; + height: 40px !important; + flex: 0 0 40px; + float: none !important; + position: relative; + z-index: 2; + margin: 0; + padding: 0; + } + /* Center layout: brand first in DOM — reorder to [menu][logo][search] */ + .navbar-top.center .navbar-header { + display: grid !important; + grid-template-columns: 40px minmax(0, 1fr) 40px; + align-items: center; + column-gap: 6px; + } + .navbar-top.center .navbar-brand { + grid-column: 2; + grid-row: 1; + justify-self: center; + max-width: 100%; + } + .navbar-top.center .navbar-brand + .navbar-toggle { + grid-column: 1; + grid-row: 1; + justify-self: start; + } + .navbar-top.center .navbar-brand + .navbar-toggle + .navbar-toggle { + grid-column: 3; + grid-row: 1; + justify-self: end; + } +} +/* Mid-width fold (bars) only ≤991; never on true desktop */ +@media (min-width: 992px) { + .navbar-top .show-nav-but { + display: none !important; + } +} diff --git a/assets/css/frontend/nav/zib-mobile-navbar.css b/assets/css/frontend/nav/zib-mobile-navbar.css index 804074d6..5142e472 100644 --- a/assets/css/frontend/nav/zib-mobile-navbar.css +++ b/assets/css/frontend/nav/zib-mobile-navbar.css @@ -38,14 +38,16 @@ margin-top: 5px; } + /* Center layout is grid-driven in nav.css (menu | logo | search). + Do NOT absolute-position brand — it overlaps the hamburger. */ .navbar-top.center .navbar-brand { - position: absolute; - width: 100%; + position: static; + width: auto; text-align: center; } .navbar-top.center .navbar-brand + .navbar-toggle { - float: left; + float: none; } .navbar-top.center .navbar-brand > img { diff --git a/assets/css/frontend/nav/zib-utilities.css b/assets/css/frontend/nav/zib-utilities.css index 7851e441..469bc45c 100644 --- a/assets/css/frontend/nav/zib-utilities.css +++ b/assets/css/frontend/nav/zib-utilities.css @@ -164,14 +164,31 @@ body.mobile-navbar-show { overflow: hidden; } .navbar-top .navbar-collapse > .navbar-right:last-child { margin-left: auto; } -.navbar-top .navbar-toggle { display: none; background: none; border: 0; color: inherit; } +/* Mobile drawer toggle: hidden on PC (nav.css hardens with !important) */ +.navbar-top .navbar-toggle { + display: none; + background: none; + border: 0; + color: inherit; +} @media (max-width: 767px) { - .navbar-top .navbar-toggle { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; } + .navbar-top .navbar-toggle { + display: inline-flex; + align-items: center; + justify-content: center; + width: 40px; + height: 40px; + } .navbar-top .navbar-collapse, .navbar.navbar-top .collapse.navbar-collapse { display: none !important; } } +@media (min-width: 768px) { + .navbar-top .navbar-toggle { + display: none !important; + } +} /* Senior submenu full width under fixed header */ .navbar-top .sub-menu.senior-submenu { @@ -348,14 +365,20 @@ body.mobile-navbar-show { overflow: hidden; } display: inline-block; position: relative; } -/* Sub-user-box width */ +/* Sub-user-box width + anchor under trigger */ .navbar-top .navbar-right .sub-menu { min-width: 280px; padding: 0; + top: calc(100% + 6px); + right: 0; + left: auto; } .navbar-top .navbar-right .sub-menu .sub-user-box { min-width: 280px; } +.navbar-top .list-inline > li { + position: relative; +} /* Ensure fold trigger visible only mid */ @media (min-width: 992px) { .navbar-top .show-nav-but { display: none !important; }