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:
1 parent
46c7c3af07
commit
56b9d61209
2 files changed
+20
-11
No files matched your search
@@ -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;
|
||||
}
|
||||
|
||||
Reference in new issue
Block a user