fix(nav): stop CTA press warp, pin user menu, hide PC hamburger
Lock top-bar button transforms on press; anchor avatar dropdown under the trigger; show mobile drawer toggle only ≤767 and grid-layout the mobile header so logo and menu no longer overlap.
This commit is contained in:
+161
-1
@@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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 {
|
||||
|
||||
@@ -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; }
|
||||
|
||||
Reference in New Issue
Block a user