From 7b413b2a59188d7fd90e03900b0fad5987f26fbd Mon Sep 17 00:00:00 2001 From: unknown Date: Sun, 12 Jul 2026 19:04:21 +0800 Subject: [PATCH] fix(header): resolve show-slide layout conflicts on homepage Remove CSS that forced relative header and cancelled hero underlap, disable sticky inside absolute show-slide nav, hide desktop expanded search form for layout-1, and size logos at 36px height like zibll. --- .../widget-device-visibility.css | 34 ++-------- assets/css/frontend/nav/base.css | 64 ++++++++++++++++--- header.php | 4 +- 3 files changed, 60 insertions(+), 42 deletions(-) diff --git a/assets/css/frontend/header-components/widget-device-visibility.css b/assets/css/frontend/header-components/widget-device-visibility.css index 9cbdc0a3..6a4e074c 100644 --- a/assets/css/frontend/header-components/widget-device-visibility.css +++ b/assets/css/frontend/header-components/widget-device-visibility.css @@ -11,32 +11,13 @@ } } -/* 首页首屏模块：向上抵消导航占位，保证 Hero 与导航重叠显示 */ +/* CMS freeform modules only: hero as first module under nav */ .home-modules > .header-components-container:first-child, -.home-modules--fullbleed > .header-components-container:first-child, -/* Fixed homepage: hero is after , not inside .home-modules */ -body.home.header .header-slider-container, -body.home .header-slider-container.header-components-container, -body.front-page .header-slider-container.header-components-container, -body.aksrt-homepage-active .header-slider-container { +.home-modules--fullbleed > .header-components-container:first-child { margin-top: calc(var(--nav-height, 60px) * -1); } -/* Transparent nav sits above the hero slider */ -body.home header.header.show-slide, -body.front-page header.header.show-slide, -body.aksrt-homepage-active header.header.show-slide { - position: relative; - z-index: 20; -} - -body.home header.header.show-slide .site-nav--fixed, -body.front-page header.header.show-slide .site-nav--fixed, -body.aksrt-homepage-active header.header.show-slide .site-nav--fixed { - background: transparent; - border-bottom-color: transparent; - box-shadow: none; -} +/* Fixed homepage hero under-nav is owned by nav/base.css (body.nav-fixed). */ /* WordPress Admin Bar 已全局禁用，无需偏移规则 */ @@ -323,11 +304,4 @@ body.aksrt-homepage-active header.header.show-slide .site-nav--fixed { -/* Fixed homepage hero under absolute show-slide header */ -body.home header.header.show-slide ~ .header-slider-container, -body.front-page header.header.show-slide ~ .header-slider-container, -body.aksrt-homepage-active header.header.show-slide ~ .header-slider-container, -body.home header.header.show-slide ~ .mobile-header ~ .header-slider-container, -body.front-page header.header.show-slide ~ .mobile-header ~ .header-slider-container { - margin-top: 0; -} + diff --git a/assets/css/frontend/nav/base.css b/assets/css/frontend/nav/base.css index 9000f37a..af8529ce 100644 --- a/assets/css/frontend/nav/base.css +++ b/assets/css/frontend/nav/base.css @@ -3,10 +3,13 @@ body.nav-fixed { padding-top: var(--nav-height, 60px); } +/* Hero sits under transparent fixed/absolute header (zibll slide-header) */ body.nav-fixed .header-slider-container, -body.nav-fixed .header-components.slide-header, -body.nav-fixed .header-components-container { - margin-top: calc(var(--nav-height, 60px) * -1); +body.nav-fixed .header-components-container, +body.nav-fixed .header-components.slide-header { + margin-top: calc(var(--nav-height, 60px) * -1) !important; + position: relative; + z-index: 1; } /* ============================================================ @@ -355,15 +358,28 @@ ul.nav-desktop .sub-menu .sub-menu { } body.nav-fixed .header.show-slide { - position: absolute; + position: absolute !important; top: 0; left: 0; right: 0; width: 100%; z-index: 30; - background: transparent; - box-shadow: none; - border: 0; + background: transparent !important; + box-shadow: none !important; + border: 0 !important; +} + +/* Nav inside absolute header must not use sticky (avoids double offset) */ +body.nav-fixed .header.show-slide .site-nav, +body.nav-fixed .header.show-slide .navbar.navbar-top { + position: relative !important; + top: auto !important; + background: var(--header-bg, transparent) !important; + border-bottom-color: transparent !important; + box-shadow: none !important; + color: var(--header-color, #fff); + backdrop-filter: none !important; + -webkit-backdrop-filter: none !important; } .header.show-slide .navbar.navbar-top, @@ -414,12 +430,14 @@ body.nav-fixed .header.show-slide { .navbar-logo > img, .navbar-logo .site-brand__logo-img, +.site-brand .site-brand__logo-img, .site-brand__logo-img { height: 36px !important; width: auto !important; - max-width: 180px; - padding: 0; - object-fit: contain; + max-width: min(180px, 40vw) !important; + max-height: 36px !important; + padding: 0 !important; + object-fit: contain !important; } .navbar-top .navbar-nav, @@ -464,3 +482,29 @@ body.scroll-down.nav-fixed .header.scroll-down-hide { -webkit-backdrop-filter: none; backdrop-filter: none; } + + +/* Layout-1 style: keep search as icon; hide expanded desktop form */ +@media (min-width: 992px) { + .navbar-top .nav-searchbox--desktop { + display: none !important; + } +} + +/* Transparent white controls on gradient hero */ +.header.show-slide .site-nav:not(.is-scrolled) .btn-outline { + color: #fff; + border-color: rgba(255, 255, 255, 0.55); + background: transparent; +} + +.header.show-slide .site-nav:not(.is-scrolled) .btn-outline:hover { + color: #fff; + border-color: #fff; + background: rgba(255, 255, 255, 0.12); +} + +.header.show-slide .site-nav:not(.is-scrolled) .nav-user__guest-avatar, +.header.show-slide .site-nav:not(.is-scrolled) .icon-btn { + color: #fff; +} diff --git a/header.php b/header.php index 48e0e326..e239b1d6 100644 --- a/header.php +++ b/header.php @@ -171,11 +171,11 @@ if (!empty($aksrt_bg_styles)) { } $aksrt_logo_parts = []; if ($aksrt_logo_url !== '') { - $aksrt_logo_parts[] = '' . esc_attr($aksrt_brand_name) . ' 0 ? ' style="width:' . (int) $aksrt_logo_width . 'px"' : '') . '>'; + $aksrt_logo_parts[] = '' . esc_attr($aksrt_brand_name) . ' 0 ? ' style="height:36px;width:auto;max-width:' . max(36, (int) $aksrt_logo_width) . 'px"' : '') . '>'; $aksrt_brand_logo_src = $aksrt_logo_url; } if ($aksrt_logo_dark_url !== '') { - $aksrt_logo_parts[] = '' . esc_attr($aksrt_brand_name) . ' 0 ? ' style="width:' . (int) $aksrt_logo_width . 'px"' : '') . '>'; + $aksrt_logo_parts[] = '' . esc_attr($aksrt_brand_name) . ' 0 ? ' style="height:36px;width:auto;max-width:' . max(36, (int) $aksrt_logo_width) . 'px"' : '') . '>'; if ($aksrt_brand_logo_src === '') { $aksrt_brand_logo_src = $aksrt_logo_dark_url; }