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:
1 parent
f599cfe3fb
commit
4c18910dc4
3 files changed
+192
-7
No files matched your search
@@ -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