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

fix(nav): kill Bootstrap 5 navbar padding so bar matches zibll height

Browse Source 
AKSRT loads BS5 (.navbar --bs-navbar-padding-y:.5rem) while zibll uses
BS3 without it; that alone added ~16px. Zero BS navbar pad, keep only
.header 8px 20px (mobile 0 8px), horizontal CTA margins, tighter mobile
logo/toggle row.
This commit is contained in:
kate522
2026-07-25 11:33:52 +08:00
parent 8a6f6feafb
commit 89b4070614
3 changed files with 99 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/css/frontend/nav.css
+86 -7
View File
@@ -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;
}
}
assets/css/frontend/nav/header-menu-buttons.css
+1 -1
View File
@@ -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;
assets/css/frontend/nav/zib-navbar-core.css
+12 -1
View File
@@ -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;