Merge pull request 'fix(nav): kill Bootstrap 5 navbar padding so bar matches zibll height' (#283) from worktree-fix-theme-toggle-overlap into main

Reviewed-on: CYL/wordpress-theme-aksrt#283

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;
+  min-height: 0 !important;
-  height: auto;
+  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;
+  min-height: 0 !important;
-  height: auto;
+  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

@@ -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

@@ -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;