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

fix(nav): pin right actions to trailing edge of top bar

Browse Source 
Desktop entries were stacking after the logo because navbar-form.navbar-right
lost Bootstrap 3 float:right. Use flex:1 on the primary menu and
margin-left:auto when no menu is present so publish/user/search sit right.
This commit is contained in:
kate522
2026-07-22 20:17:51 +08:00
parent c5c238bb63
commit 5a6f4e427f
1 changed files with 47 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/css/frontend/nav/zib-utilities.css
+47 -2
View File
@@ -111,14 +111,59 @@ body.mobile-navbar-show { overflow: hidden; }
.navbar.navbar-top .collapse.navbar-collapse {
display: flex !important;
align-items: center;
flex: 1;
flex: 1 1 auto;
min-width: 0;
flex-wrap: nowrap;
visibility: visible;
height: auto;
overflow: visible;
justify-content: flex-start;
gap: 4px;
}
.navbar-header {
display: flex;
align-items: center;
flex-shrink: 0;
}
/* Primary menu: fill middle so right actions pin to trailing edge (zibll). */
.navbar-top .navbar-collapse > .nav.navbar-nav {
display: flex;
align-items: center;
flex: 1 1 auto;
min-width: 0;
margin-left: 12px;
margin-right: 8px;
float: none;
}
.navbar-top .navbar-collapse > .nav.navbar-nav > li {
float: none;
flex: 0 0 auto;
}
/* Right-side actions (publish / VIP / theme / user / search) stay packed. */
.navbar-top .navbar-collapse > .navbar-form,
.navbar-top .navbar-collapse > .navbar-right {
display: flex;
align-items: center;
flex: 0 0 auto;
float: none;
margin-top: 0;
margin-bottom: 0;
}
.navbar-top .navbar-collapse > .navbar-form.navbar-left {
margin-right: 8px;
}
/* No primary menu (or empty menu): pin first visible right cluster to the end.
`.show-nav-but.hide` is display:none and does not participate in flex. */
.navbar-top .navbar-collapse:not(:has(> .nav.navbar-nav)) > .navbar-form.navbar-right:not(.hide) {
margin-left: auto;
}
.navbar-top .navbar-collapse:not(:has(> .nav.navbar-nav)) > .navbar-form.navbar-right:not(.hide) ~ .navbar-form.navbar-right {
margin-left: 0;
}
/* Layout-3: menu lives in a trailing .navbar-right wrapper */
.navbar-top .navbar-collapse > .navbar-right:last-child {
margin-left: auto;
}
.navbar-header { display: flex; align-items: center; flex-shrink: 0; }
.navbar-top .navbar-toggle { display: none; background: none; border: 0; color: inherit; }
@media (max-width: 767px) {
.navbar-top .navbar-toggle { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; }