Merge pull request 'fix(nav): pin right actions to trailing edge of top bar' (#264) from worktree-fix-checkoverflow-insertbefore into main

Reviewed-on: CYL/wordpress-theme-aksrt#264
This commit is contained in:
2026-07-22 20:18:26 +08:00
+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; }