fix(nav): hide mobile drawer/search off-flow to kill blank band

Desktop was rendering .mobile-header / .mobile-navbar in document flow
because Bootstrap 5 has no visible-xs-block and drawer CSS only ran
inside max-width:767px. Hide drawer shell by default; only show as fixed
off-canvas on small screens. Also fix orphan CSS rules in navbar-core,
give .navbar-search position:fixed so the overlay never reserves height.

assets/css/frontend/nav/zib-mobile-navbar.css

@@ -1,195 +1,235 @@
-/* Ported/adapted from zibll main.css — mobile navbar */
+/* Ported/adapted from zibll main.css — mobile navbar drawer
-@media (max-width: 767px) {
+ *
-        opacity: 0.7;
+ * Desktop: fully off-document (display:none). Bootstrap 5 has no
-        height: 36px;
+ * visible-xs-block; without this the drawer content sits in flow and
-    }
+ * creates a large blank band under the top nav (see blog.rutua.cn).
-
+ */
-    .navbar-toggle .icon-bar {
-        background: var(--main-color);
-    }
-
-    .navbar-toggle .icon-bar + .icon-bar {
-        margin-top: 5px;
-    }
-
-    .navbar-top.center .navbar-brand {
-        position: absolute;
-        width: 100%;
-        text-align: center;
-    }
-
-    .navbar-top.center .navbar-brand + .navbar-toggle {
-        float: left;
-    }
-
-    .navbar-top.center .navbar-brand > img {
-        display: unset;
-    }
-
-    .navbar-top .navbar-logo > img {
-        padding: 0;
-    }
-
-    .mobile-navbar {
-        z-index: 997;
-        position: fixed;
-        top: 0;
-        bottom: 0;
-        background: var(--main-bg-color);
-        width: 281px;
-        padding: 10px 20px 70px;
-        transition: transform 0.5s;
-    }
-
-    .mobile-navbar .navbar-logo {
-        margin-left: -10px;
-    }
-
-    .mobile-navbar badge:not(.top) {
-        transform: unset;
-        margin-left: 5px;
-    }
-
-    .mobile-navbar.right {
-        right: -2px;
-        transform: translateX(110%);
-    }
-
-    .mobile-navbar.left {
-        left: -2px;
-        transform: translateX(-110%);
-    }
-
-    .mobile-navbar.left > .toggle-radius {
-        float: right;
-    }
-
-    .mobile-navbar.top {
-        height: auto;
-        max-height: 70%;
-        width: 100%;
-        transform: translateY(-110%);
-    }
-
-    .mobile-navbar-show .mobile-navbar {
-        transition: transform 0.6s cubic-bezier(0.28, 0.9, 0.34, 0.99);
-        transform: translate(0);
-    }
-
-    .mobile-navbar-show .mobile-navbar + .fixed-body {
-        visibility: unset;
-        opacity: 1;
-    }
-
-    .mobile-navbar-show .navbar-toggle .i-menu > i {
-        opacity: 0;
-    }
-
-    .mobile-navbar-show .navbar-toggle .i-menu::after {
-        transform: rotate(45deg);
-        width: calc(1em + 1px);
-        transform-origin: bottom right;
-    }
-    .mobile-navbar-show .navbar-toggle .i-menu::before {
-        right: 0;
-        width: calc(1em + 1px);
-        transform: rotate(-45deg);
-        transform-origin: top right;
-    }
-
-    .mobile-navbar .navbar-header {
-        margin-top: -58px;
-        margin-bottom: 10px;
-    }
-
-    .mobile-navbar .navbar-brand {
-        padding: 7px 10px;
-    }
-
-    .mobile-navbar .toggle-radius {
-        margin: 0 2px;
-    }
-
-    .mobile-menus li a {
-        display: block;
-        padding: 6px 0;
-        overflow: hidden;
-        white-space: nowrap;
-        text-overflow: ellipsis;
-    }
-
-    .mobile-menus > li > a::before {
-        margin: 0;
-        margin-right: 12px;
-    }
-
-    .mobile-menus .sub-menu {
-        word-wrap: break-word;
-        white-space: normal;
-        margin: 0 -2px;
-    }
-
-    .mobile-menus .sub-menu li {
-        width: calc(50% - 4px);
-        text-align: center;
-        display: inline-block;
-    }
-
-    .mobile-navbar.top .mobile-menus .sub-menu li {
-        width: calc(33.3% - 4px);
-    }
-
-    .mobile-menus .sub-menu li > a {
-        background: var(--main-border-color);
-        padding: 5px;
-        margin: 2px;
-        border-radius: 4px;
-        font-size: 0.9em;
-        position: relative;
-    }
-
-    .mobile-menus .sub-menu li > a > badge:not(.top) {
-        position: absolute;
-        right: 0;
-        top: 0;
-        transform: scale(0.85);
-    }
-
-    .mobile-user-menus a {
-        width: calc(50% - 12px);
-        float: left;
-        margin: 6px;
-    }
-
-    .mobile-nav-widget {
-        display: block;
-        width: 100%;
-        overflow: hidden;
-        white-space: normal;
-    }
-
-    .mobile-navbar .box-body.notop {
-        padding-left: 0;
-        padding-right: 0;
-    }
-
-    .mobile-navbar .sub-user-box {
-        margin-bottom: 30px;
-    }
-
-    .mobile-navbar .posts-nav-box .zib-widget {
-        background: var(--muted-border-color);
-        box-shadow: none;
-    }
-
-    .s-desc,
-    .slide-text,
-    .wp-block-carousel figcaption {
-        padding: 0.7em;
-    }
-
-    .posts-item .item-thumbnail {
-        width: 138px;
-    }
 
+/* ---- Base: hide drawer + overlay on all viewports by default ---- */
+.mobile-header {
+  display: none;
+}
+
+.mobile-navbar {
+  display: none;
+}
+
+.fixed-body {
+  position: fixed;
+  inset: 0;
+  z-index: 996;
+  background: rgba(0, 0, 0, 0.45);
+  opacity: 0;
+  visibility: hidden;
+  pointer-events: none;
+  transition: opacity 0.35s ease, visibility 0.35s ease;
+}
+
+.mobile-navbar + .fixed-body {
+  z-index: 996;
+}
+
+@media (max-width: 767px) {
+  .navbar-toggle .icon-bar {
+    background: var(--main-color);
+  }
+
+  .navbar-toggle .icon-bar + .icon-bar {
+    margin-top: 5px;
+  }
+
+  .navbar-top.center .navbar-brand {
+    position: absolute;
+    width: 100%;
+    text-align: center;
+  }
+
+  .navbar-top.center .navbar-brand + .navbar-toggle {
+    float: left;
+  }
+
+  .navbar-top.center .navbar-brand > img {
+    display: unset;
+  }
+
+  .navbar-top .navbar-logo > img {
+    padding: 0;
+  }
+
+  /* Shell participates only on small screens */
+  .mobile-header {
+    display: block;
+  }
+
+  .mobile-navbar,
+  .mobile-navbar.visible-xs-block {
+    display: block;
+    z-index: 997;
+    position: fixed;
+    top: 0;
+    bottom: 0;
+    background: var(--main-bg-color);
+    width: 281px;
+    max-width: 86vw;
+    padding: 10px 20px 70px;
+    transition: transform 0.5s;
+    overflow-y: auto;
+    -webkit-overflow-scrolling: touch;
+  }
+
+  .mobile-navbar .navbar-logo {
+    margin-left: -10px;
+  }
+
+  .mobile-navbar badge:not(.top) {
+    transform: unset;
+    margin-left: 5px;
+  }
+
+  .mobile-navbar.right {
+    right: -2px;
+    transform: translateX(110%);
+  }
+
+  .mobile-navbar.left {
+    left: -2px;
+    transform: translateX(-110%);
+  }
+
+  .mobile-navbar.left > .toggle-radius {
+    float: right;
+  }
+
+  .mobile-navbar.top {
+    height: auto;
+    max-height: 70%;
+    width: 100%;
+    max-width: 100%;
+    left: 0;
+    right: 0;
+    transform: translateY(-110%);
+  }
+
+  .mobile-navbar-show .mobile-navbar {
+    transition: transform 0.6s cubic-bezier(0.28, 0.9, 0.34, 0.99);
+    transform: translate(0);
+  }
+
+  .mobile-navbar-show .mobile-navbar + .fixed-body {
+    visibility: visible;
+    opacity: 1;
+    pointer-events: auto;
+  }
+
+  .mobile-navbar-show .navbar-toggle .i-menu > i {
+    opacity: 0;
+  }
+
+  .mobile-navbar-show .navbar-toggle .i-menu::after {
+    transform: rotate(45deg);
+    width: calc(1em + 1px);
+    transform-origin: bottom right;
+  }
+
+  .mobile-navbar-show .navbar-toggle .i-menu::before {
+    right: 0;
+    width: calc(1em + 1px);
+    transform: rotate(-45deg);
+    transform-origin: top right;
+  }
+
+  .mobile-navbar .navbar-header {
+    margin-top: -58px;
+    margin-bottom: 10px;
+  }
+
+  .mobile-navbar .navbar-brand {
+    padding: 7px 10px;
+  }
+
+  .mobile-navbar .toggle-radius {
+    margin: 0 2px;
+  }
+
+  .mobile-menus li a {
+    display: block;
+    padding: 6px 0;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+
+  .mobile-menus > li > a::before {
+    margin: 0;
+    margin-right: 12px;
+  }
+
+  .mobile-menus .sub-menu {
+    word-wrap: break-word;
+    white-space: normal;
+    margin: 0 -2px;
+  }
+
+  .mobile-menus .sub-menu li {
+    width: calc(50% - 4px);
+    text-align: center;
+    display: inline-block;
+  }
+
+  .mobile-navbar.top .mobile-menus .sub-menu li {
+    width: calc(33.3% - 4px);
+  }
+
+  .mobile-menus .sub-menu li > a {
+    background: var(--main-border-color);
+    padding: 5px;
+    margin: 2px;
+    border-radius: 4px;
+    font-size: 0.9em;
+    position: relative;
+  }
+
+  .mobile-menus .sub-menu li > a > badge:not(.top) {
+    position: absolute;
+    right: 0;
+    top: 0;
+    transform: scale(0.85);
+  }
+
+  .mobile-user-menus a {
+    width: calc(50% - 12px);
+    float: left;
+    margin: 6px;
+  }
+
+  .mobile-nav-widget {
+    display: block;
+    width: 100%;
+    overflow: hidden;
+    white-space: normal;
+  }
+
+  .mobile-navbar .box-body.notop {
+    padding-left: 0;
+    padding-right: 0;
+  }
+
+  .mobile-navbar .sub-user-box {
+    margin-bottom: 30px;
+  }
+
+  .mobile-navbar .posts-nav-box .zib-widget {
+    background: var(--muted-border-color);
+    box-shadow: none;
+  }
+
+  .s-desc,
+  .slide-text,
+  .wp-block-carousel figcaption {
+    padding: 0.7em;
+  }
+
+  .posts-item .item-thumbnail {
+    width: 138px;
+  }
 }

assets/css/frontend/nav/zib-navbar-core.css

@@ -50,10 +50,6 @@
     transition: 0.3s;
 }
 
-
-    margin-left: -100%;
-}
-
 .header {
     padding: 8px 20px;
     background: var(--header-bg);
@@ -252,14 +248,12 @@ body.nav-fixed .slide-header {
     z-index: 999;
     width: 100%;
     top: 0;
+    left: 0;
+    right: 0;
     -webkit-backdrop-filter: saturate(5) blur(20px);
     backdrop-filter: saturate(5) blur(20px);
 }
 
-.mobile-navbar + .fixed-body {
-    z-index: 996;
-}
-
 .navbar-top {
     margin: 0;
     border-radius: 0 !important;
@@ -385,6 +379,11 @@ badge.top,
 }
 
 .navbar-search {
+    position: fixed;
+    left: 0;
+    right: 0;
+    top: 0;
+    width: 100%;
     visibility: hidden;
     transform: translateY(-101%);
     padding: 10px 30px;
@@ -396,11 +395,13 @@ badge.top,
     z-index: 998;
     transition: all 0.5s;
     border-radius:0 0 var(--main-radius) var(--main-radius);
+    pointer-events: none;
 }
 
 .navbar-search.show {
-    visibility: unset;
+    visibility: visible;
     transform: translateY(0);
+    pointer-events: auto;
 }
 
 .navbar-top .navbar-right .sub-menu {
@@ -672,7 +673,7 @@ badge.top,
     height: 36px;
 }
 
-
+@media (min-width: 768px) {
     .container {
         width: 95%;
     }