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
@@ -7,14 +7,21 @@
|
||||
* shell anchoring plus the account action-row geometry.
|
||||
*/
|
||||
|
||||
/* The reference keeps the right cluster as three floated .navbar-form groups, so
|
||||
* only the account row carries its own alignment context; the button groups
|
||||
* inherit their geometry from .navbar-top .navbar-but .but and .navbar-form. */
|
||||
/* The reference keeps the right cluster as three floated .navbar-form groups.
|
||||
* Bootstrap's base .navbar-form rule carries margin-top: 8px and the >=768px
|
||||
* override only zeroes the horizontal margins, so every right-cluster group
|
||||
* starts 8px below the top of .navbar-collapse. The 50px menu row and the logo
|
||||
* put the navbar midline at 25px, so a 34px cross-size lands a group's midline
|
||||
* at 8 + 17 = 25px. The publish/VIP chips already reach that line through their
|
||||
* own 0.4em margin stacked on the group's 8px; the account row reaches it from
|
||||
* its 34px icon tiles, and the theme group needs the same cross-size because
|
||||
* its 29px toggle is otherwise 2.5px high. Nothing here may restate a 50px
|
||||
* min-height: it would double-count the 8px and push that group's content 8px
|
||||
* below the line while inflating the navbar from 50px to 58px. */
|
||||
.navbar-top .aksrt-navbar-account {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
min-height: 50px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
@@ -73,6 +80,12 @@
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
/* Match the account row's 34px cross-size so the 29px toggle shares the 25px
|
||||
* midline instead of sitting 2.5px above it. */
|
||||
.navbar-top .navbar-form.flex.ac {
|
||||
min-height: 34px;
|
||||
}
|
||||
|
||||
.navbar-top .navbar-form .aksrt-navbar-language {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
Reference in new issue
Block a user