kate522
b8d6f70af3
Align nav-fixed geometry with zibll: only .slide-header pulls under the bar; restore card container gutters so home overlay cards match other page types.
84 lines
2.5 KiB
CSS
84 lines
2.5 KiB
CSS
/* Zibll-aligned fixed header + slide pull-under-nav
|
|
*
|
|
* demo.zibll.com / main.css:
|
|
* - body.nav-fixed → padding-top reserve
|
|
* - .nav-fixed .header → always position:fixed (including .show-slide)
|
|
* - body.nav-fixed .slide-header → margin-top negative (swiper ONLY)
|
|
* - Do NOT pull .header-slider-container as a whole (breaks card overlap on homepage)
|
|
*/
|
|
|
|
body.nav-fixed {
|
|
--nav-fixed-reserve: 88px;
|
|
padding-top: var(--nav-fixed-reserve);
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
body.nav-fixed {
|
|
--nav-fixed-reserve: 72px;
|
|
padding-top: var(--nav-fixed-reserve);
|
|
}
|
|
}
|
|
|
|
@media (max-width: 640px) {
|
|
body.nav-fixed {
|
|
--nav-fixed-reserve: 60px;
|
|
padding-top: var(--nav-fixed-reserve);
|
|
}
|
|
}
|
|
|
|
/* zibll .nav-fixed .header — fixed even with .show-slide */
|
|
body.nav-fixed .header {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
width: 100%;
|
|
z-index: 999;
|
|
}
|
|
|
|
/* Transparent chrome over slider */
|
|
body.nav-fixed:not(.body-scroll):not(.mobile-navbar-show) .header.show-slide {
|
|
--header-bg: linear-gradient(0, rgba(0, 0, 0, 0) 5%, rgba(0, 0, 0, 0.1) 80%);
|
|
--header-color: #fff;
|
|
-webkit-backdrop-filter: unset;
|
|
backdrop-filter: unset;
|
|
}
|
|
|
|
/* ONLY the slide shell pulls under the fixed nav — not the card row / search.
|
|
* zibll: body.nav-fixed .slide-header { margin-top: -90px; } */
|
|
body.nav-fixed .header-slider-container > .zib-slider > .new-swiper.slide-header,
|
|
body.nav-fixed .header-slider-container > .relative.zib-slider > .new-swiper.slide-header,
|
|
body.nav-fixed .header-slider-container .new-swiper.slide-index.slide-header,
|
|
body.nav-fixed .header-components-container > .zib-slider > .new-swiper.slide-header,
|
|
body.nav-fixed .header-components:not(.new-swiper).slide-header,
|
|
body.nav-fixed .new-swiper.slide-header.slide-index {
|
|
margin-top: calc(var(--nav-fixed-reserve, 88px) * -1);
|
|
}
|
|
|
|
/* Kill legacy whole-container pull (homepage-only visual break vs other pages) */
|
|
body.nav-fixed .header-slider-container,
|
|
body.nav-fixed .header-components-container {
|
|
margin-top: 0 !important;
|
|
}
|
|
|
|
/* Cards keep zibll overlap relative to slider bottom */
|
|
body.nav-fixed .header-slider-card,
|
|
body.nav-fixed .header-components-card {
|
|
margin-top: -40px;
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
|
|
.scroll-down.nav-fixed .header.scroll-down-hide {
|
|
transform: translate3d(0, -105%, 0);
|
|
-webkit-backdrop-filter: none;
|
|
backdrop-filter: none;
|
|
}
|
|
|
|
@media (max-width: 767px) {
|
|
body.nav-fixed .header-slider-card,
|
|
body.nav-fixed .header-components-card {
|
|
margin-top: -35px;
|
|
}
|
|
}
|