kate522/wordpress-theme-aksrt
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
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
2026-07-17 09:32:28 +08:00
parent 46c7c3af07
commit 56b9d61209
2 changed files with 20 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/css/frontend/header-components/widget-device-visibility.css
+5 -3
View File
@@ -11,10 +11,12 @@
}
}
/* CMS freeform modules only: hero as first module under nav */
/* CMS freeform modules only: hero as first module under nav.
* Prefer --nav-fixed-reserve when body.nav-fixed is present so the pull-up
* matches body padding-top (88/72/60), not just the 60px bar height. */
.home-modules > .header-components-container:first-child,
.home-modules--fullbleed > .header-components-container:first-child {
margin-top: calc(var(--nav-height, 60px) * -1);
margin-top: calc(var(--nav-fixed-reserve, var(--nav-height, 60px)) * -1);
}
/* Fixed homepage hero under-nav is owned by nav/base.css (body.nav-fixed). */
@@ -41,7 +43,7 @@
}
.header-components.slide-header .header-components__content.slide-text {
padding-top: var(--nav-height, 60px);
padding-top: var(--nav-fixed-reserve, var(--nav-height, 60px));
}
/* WordPress Admin Bar 已全局禁用，无需偏移规则 */
assets/css/frontend/nav/base.css
+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;
}