fix(header): put the top-nav clusters on one horizontal line
The top-nav account row carried min-height: 50px on top of the 8px margin-top that Bootstrap base .navbar-form rule keeps at >=768px (the override only zeroes the horizontal margins). The 8px was counted twice, so the row ran from 8px to 58px: its icon tiles landed 8px below the 25px midline that the 50px menu row and the logo define, and the navbar grew from 50px to 58px, which also broke the body.nav-fixed offset. Drop the min-height so the row takes its natural 34px height from the icon tiles, and give the theme/language group the same 34px cross-size so its 29px toggle shares that midline instead of sitting 2.5px above it. Measured against the reference theme, the navbar goes from 66px to 50.05px (reference 50.28px) and the logo, menu, publish chip, VIP chip, theme toggle and account icons all centre on 25px. The desktop navbar stays visible below 991px (only the menu folds into a dropdown there), so the same fix applies at the mobile and tablet breakpoints: the top bar drops from 68px to 52.05px. Verified: node --test across tests/ (603 passing), and a stubbed navbar render measured in a headless browser against the reference theme stylesheet.
This commit is contained in:
1 parent
5810693e01
commit
ee39024549
4 files changed
+44
-9
No files matched your search
@@ -356,6 +356,15 @@ test('desktop header actions share one row without generic button masks', () =>
|
||||
assert.doesNotMatch(headerNavbar, /class="btn nav-search-btn main-search-btn"/)
|
||||
assert.match(headerCss, /\.navbar-top \.aksrt-navbar-account\s*\{[^}]*display:\s*inline-flex;[^}]*align-items:\s*center;/s)
|
||||
assert.match(headerCss, /\.navbar-top \.aksrt-nav-icon,[\s\S]*?background:\s*transparent !important;/)
|
||||
// Bootstrap's base .navbar-form rule keeps margin-top: 8px at >=768px (the
|
||||
// override only zeroes the horizontal margins), so every right-cluster group
|
||||
// starts 8px below the top of .navbar-collapse. A 34px cross-size therefore
|
||||
// puts each group's midline on the navbar's 25px line, where the 50px menu row
|
||||
// and the logo already sit. A 50px min-height double-counts that 8px: the
|
||||
// group's content drops 8px below the line and the navbar grows from 50px to
|
||||
// 58px, which also breaks the body.nav-fixed offset.
|
||||
assert.doesNotMatch(headerCss, /\.navbar-top \.aksrt-navbar-account\s*\{[^}]*min-height/s)
|
||||
assert.match(headerCss, /\.navbar-top \.navbar-form\.flex\.ac\s*\{[^}]*min-height:\s*34px;/s)
|
||||
// The publish and VIP chips ride the legacy .but geometry verbatim; nothing in
|
||||
// the header module may restate their padding, margin, radius or icon size.
|
||||
// Descendant, not child: the VIP chip lives inside the hover-show wrapper.
|
||||
|
||||
Reference in new issue
Block a user