fix(nav): cancel full fixed-nav reserve under homepage hero

body.nav-fixed pads 88px but hero only pulled up by --nav-height (60px),
leaving a blank strip above the slider. Share --nav-fixed-reserve so body
padding and hero margin-top cancel exactly, matching zibll slide-header.
This commit is contained in:
kate522 committed 2026-07-17 09:32:28 +08:00
1 parent 46c7c3af07
commit 56b9d61209
2 files changed
+20 -11

No files matched your search

+15 -8
View File
@@ -1,23 +1,28 @@
/* Zibll body.nav-fixed: hard 88px reserve (main.css), not bare --nav-height.
* Nav bar itself is ~60px; extra space matches zibll chrome/shadow gap. */
* Nav bar itself is ~60px; extra space matches zibll chrome/shadow gap.
* --nav-fixed-reserve is shared with the hero pull-up so they cancel exactly
* (zibll: body padding-top 88px + .slide-header { margin-top: -90px }). */
body.nav-fixed {
padding-top: 88px;
--nav-fixed-reserve: 88px;
padding-top: var(--nav-fixed-reserve);
}
@media (max-width: 768px) {
body.nav-fixed {
padding-top: 72px;
--nav-fixed-reserve: 72px;
padding-top: var(--nav-fixed-reserve);
}
}
@media (max-width: 640px) {
body.nav-fixed {
padding-top: 60px;
--nav-fixed-reserve: 60px;
padding-top: var(--nav-fixed-reserve);
}
}
/* Fixed nav without hero overlay: take header out of flow.
body.nav-fixed already reserves --nav-height via padding-top. */
body.nav-fixed already reserves space via padding-top. */
body.nav-fixed .header:not(.show-slide) {
position: fixed;
top: 0;
@@ -41,14 +46,16 @@ body.nav-fixed .header:not(.show-slide) .navbar.navbar-top {
*/
body.nav-fixed:not(:has(.header.show-slide)) .fluid-widget-wrap:first-of-type:empty + main.container,
body.nav-fixed:not(:has(.header.show-slide)) main.container:first-of-type {
scroll-margin-top: calc(var(--nav-height, 60px) + 8px);
scroll-margin-top: calc(var(--nav-fixed-reserve, 88px) + 8px);
}
/* Hero sits under transparent fixed/absolute header (zibll slide-header) */
/* Hero sits under transparent fixed/absolute header.
* MUST cancel the full --nav-fixed-reserve (88/72/60), not just --nav-height (60).
* Using only -60px against 88px padding left a ~28px blank strip above the hero. */
body.nav-fixed .header-slider-container,
body.nav-fixed .header-components-container,
body.nav-fixed .header-components.slide-header {
margin-top: calc(var(--nav-height, 60px) * -1) !important;
margin-top: calc(var(--nav-fixed-reserve, 88px) * -1) !important;
position: relative;
z-index: 1;
}