diff --git a/assets/css/frontend/nav.css b/assets/css/frontend/nav.css index d5246c87..ed2c72ab 100644 --- a/assets/css/frontend/nav.css +++ b/assets/css/frontend/nav.css @@ -19,6 +19,29 @@ margin: 0; border-radius: 0 !important; font-size: 15px; + /* + * Bootstrap 5 .navbar defaults --bs-navbar-padding-y: .5rem (8+8px). + * zibll uses BS3 (no that padding) + only .header { padding: 8px 20px }. + * Extra BS5 pad is why AKSRT bar is taller than zibll on PC and mobile. + */ + --bs-navbar-padding-y: 0; + --bs-navbar-padding-x: 0; + --bs-navbar-brand-padding-y: 0; + padding: 0 !important; + min-height: 0 !important; + flex-wrap: nowrap; +} +.header .navbar.navbar-top, +.header > .navbar { + --bs-navbar-padding-y: 0; + --bs-navbar-padding-x: 0; + padding-top: 0 !important; + padding-bottom: 0 !important; + min-height: 0 !important; +} +/* zibll .header — vertical rhythm only from this padding + logo row */ +.header { + padding: 8px 20px; } .navbar-top .navbar-form, .navbar-top .navbar-right, @@ -123,7 +146,7 @@ .navbar-top .navbar-vip a.navbar-cta { font-size: 0.8em !important; padding: 0.3em 1em !important; - margin: 0.4em !important; + margin: 0 0.4em !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; @@ -382,20 +405,39 @@ body.dark-theme .navbar-but-cluster .toggle-theme .theme-icon-sun { * Natural stack: .header padding 8px 20px + brand pad 7px + logo 36px * → content row ~50px, bar ~66px. Senior submenu top: 59px. Fixed reserve 88px. * Do NOT force min-height:50 on the flex row (over-tall vs zibll). + * CTA vertical margin uses 0 .4em (not .4em all sides) so flex cross-size + * stays logo-driven like a tight zibll bar. */ .navbar-top .container-header { display: flex !important; align-items: center !important; - min-height: 0; - height: auto; + min-height: 0 !important; + height: auto !important; + padding-top: 0 !important; + padding-bottom: 0 !important; } .navbar-top .navbar-form, .navbar-top .navbar-right, .navbar-top .navbar-header { display: flex !important; align-items: center !important; - min-height: 0; - height: auto; + min-height: 0 !important; + height: auto !important; + margin-top: 0 !important; + margin-bottom: 0 !important; + padding-top: 0 !important; + padding-bottom: 0 !important; +} +/* Brand: zibll padding 7px 10px only — kill BS5 brand pad/height */ +.navbar-top .navbar-brand { + display: flex !important; + align-items: center !important; + padding: 7px 10px !important; + margin: 0 !important; + height: auto !important; + min-height: 0 !important; + line-height: 1 !important; + font-size: inherit !important; } /* Hover/active: same box as rest (prevent press stretch; ripple is absolute) */ @@ -481,13 +523,13 @@ body.dark-theme .navbar-but-cluster .toggle-theme .theme-icon-sun { .navbar-top a.navbar-cta.but:hover, .navbar-top a.navbar-cta.but:focus, .navbar-top a.navbar-cta.but:active { - margin: 0.4em !important; + margin: 0 0.4em !important; padding: 0.3em 1em !important; + line-height: 1.44 !important; height: auto !important; min-height: 0 !important; max-height: 50px !important; font-size: 0.8em !important; - line-height: 1.44 !important; box-sizing: border-box !important; transform: none !important; } @@ -625,3 +667,40 @@ body.dark-theme .navbar-but-cluster .toggle-theme .theme-icon-sun { margin: 0 !important; flex: none !important; } + + +/* ---- zibll mobile header height (main.css @media max-width 640/767) ---- */ +@media (max-width: 767px) { + .header { + padding: 0 8px !important; + } + .navbar-top, + .header .navbar.navbar-top { + --bs-navbar-padding-y: 0; + padding-top: 0 !important; + padding-bottom: 0 !important; + } + .navbar-top .navbar-brand { + padding: 7px 6px !important; + } + .navbar-top .navbar-logo > img { + height: 32px !important; + max-height: 32px !important; + padding-left: 8px !important; + padding-right: 8px !important; + } + /* touch row: match logo, not min 50 */ + .navbar-top .navbar-header { + min-height: 0 !important; + } + .navbar-top .navbar-toggle, + .navbar-top button.navbar-toggle { + width: 36px !important; + min-width: 36px !important; + height: 36px !important; + flex-basis: 36px; + } + .navbar-top.center .navbar-header { + grid-template-columns: 36px minmax(0, 1fr) 36px; + } +} diff --git a/assets/css/frontend/nav/header-menu-buttons.css b/assets/css/frontend/nav/header-menu-buttons.css index bc384a1f..1eaaabf7 100644 --- a/assets/css/frontend/nav/header-menu-buttons.css +++ b/assets/css/frontend/nav/header-menu-buttons.css @@ -43,7 +43,7 @@ width: fit-content !important; max-width: fit-content !important; min-width: 0 !important; - margin: 0.4em !important; + margin: 0 0.4em !important; appearance: none; -webkit-appearance: none; cursor: pointer; diff --git a/assets/css/frontend/nav/zib-navbar-core.css b/assets/css/frontend/nav/zib-navbar-core.css index 30dbe3f4..2c501a43 100644 --- a/assets/css/frontend/nav/zib-navbar-core.css +++ b/assets/css/frontend/nav/zib-navbar-core.css @@ -57,6 +57,17 @@ transition: 0.15s; } +/* BS5 .navbar injects --bs-navbar-padding-y: .5rem; zibll (BS3) has no such pad */ +.header > .navbar, +.header .navbar.navbar-top { + --bs-navbar-padding-y: 0; + --bs-navbar-padding-x: 0; + --bs-navbar-brand-padding-y: 0; + padding-top: 0 !important; + padding-bottom: 0 !important; + min-height: 0 !important; +} + .body-scroll .header { box-shadow: 0px 4px 10px var(--main-shadow); } @@ -295,7 +306,7 @@ badge.top, .navbar-top .navbar-but .but { font-size: 0.8em; padding: 0.3em 1em !important; - margin: 0.4em; + margin: 0 0.4em; display: inline-flex !important; align-items: center; justify-content: center;