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.
This commit is contained in:
@@ -1,195 +1,235 @@
|
||||
/* Ported/adapted from zibll main.css — mobile navbar */
|
||||
@media (max-width: 767px) {
|
||||
opacity: 0.7;
|
||||
height: 36px;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
/* Ported/adapted from zibll main.css — mobile navbar drawer
|
||||
*
|
||||
* Desktop: fully off-document (display:none). Bootstrap 5 has no
|
||||
* 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);
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user