Merge pull request 'Worktree fix checkoverflow insertbefore' (#262) from worktree-fix-checkoverflow-insertbefore into main

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

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

@@ -1,9 +1,35 @@
-/* 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).
+ */
+
+/* ---- 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);
   }
@@ -30,15 +56,25 @@
     padding: 0;
   }
 
-    .mobile-navbar {
+  /* 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 {
@@ -68,6 +104,9 @@
     height: auto;
     max-height: 70%;
     width: 100%;
+    max-width: 100%;
+    left: 0;
+    right: 0;
     transform: translateY(-110%);
   }
 
@@ -77,8 +116,9 @@
   }
 
   .mobile-navbar-show .mobile-navbar + .fixed-body {
-        visibility: unset;
+    visibility: visible;
     opacity: 1;
+    pointer-events: auto;
   }
 
   .mobile-navbar-show .navbar-toggle .i-menu > i {
@@ -90,6 +130,7 @@
     width: calc(1em + 1px);
     transform-origin: bottom right;
   }
+
   .mobile-navbar-show .navbar-toggle .i-menu::before {
     right: 0;
     width: calc(1em + 1px);
@@ -191,5 +232,4 @@
   .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%;
     }
@@ -774,4 +775,7 @@ badge.top,
     }
 
     .full-widget-sm {
-
+        margin-left: 0;
+        margin-right: 0;
+    }
+}