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

fix(nav): align navbar text and icon baselines with zibll

Browse Source 
Center FA icons in toggle-radius/btn chips, restore menu-item title flex baseline, and match CTA/logo vertical alignment so top bar text and icons no longer drift.
This commit is contained in:
kate522 committed 2026-07-24 12:08:09 +08:00
1 parent 9aa0bd0755
commit f492174297
4 files changed
+197 -16
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

assets/css/frontend/nav/zib-utilities.css
+103
View File
@@ -242,6 +242,109 @@ body.mobile-navbar-show { overflow: hidden; }
justify-content: center;
width: 36px;
height: 36px;
padding: 0 !important;
line-height: 1;
gap: 0;
vertical-align: middle;
}
/* Icon-only nav chips: neutralize .btn padding/height so FA sits dead-center */
.navbar-top .list-inline > li > a.btn > i,
.navbar-top .list-inline > li > a.btn > .fa,
.navbar-top .list-inline > li > a.btn > .fas,
.navbar-top .list-inline > li > a.btn > .far,
.navbar-top a.btn.nav-search-btn > i,
.navbar-top a.btn.main-search-btn > i,
.navbar-top a.btn.signin-loader > i {
margin: 0 !important;
line-height: 1 !important;
width: 1em;
height: 1em;
display: inline-flex;
align-items: center;
justify-content: center;
vertical-align: 0;
position: relative;
top: 0;
transform: none;
}
/* Navbar CTA: icon + text baseline (zibll .navbar-but .but) */
.navbar-top .navbar-but .but,
.navbar-top a.navbar-cta.but {
display: inline-flex !important;
align-items: center;
justify-content: center;
line-height: 1;
vertical-align: middle;
}
.navbar-top .navbar-but .but > i,
.navbar-top a.navbar-cta.but > i {
margin: 0 0.25em 0 0 !important;
line-height: 1 !important;
position: relative;
top: 0;
transform: none;
vertical-align: 0;
}
.navbar-top .navbar-but .but > i:last-child,
.navbar-top a.navbar-cta.but > i:only-child {
margin-right: 0 !important;
}
/* Theme toggle in navbar-form (not only cluster) */
.navbar-top .navbar-form .toggle-theme.toggle-radius,
.navbar-top a.toggle-theme.toggle-radius {
display: inline-block;
width: 29px;
height: 29px;
overflow: hidden;
vertical-align: middle;
flex-shrink: 0;
}
.navbar-top .navbar-form .toggle-theme.toggle-radius > i,
.navbar-top a.toggle-theme.toggle-radius > i {
position: absolute;
top: 50%;
left: 0;
right: 0;
margin: auto;
transform: translateY(-50%);
line-height: 1;
}
/* Menu item title + icon baseline (when menu is assigned) */
.navbar-top .nav > li > a {
display: inline-flex !important;
align-items: center;
line-height: 1.44;
}
.navbar-top .nav > li > a > .menu-item-icon,
.navbar-top .nav > li > a > i.menu-item-icon,
.navbar-top .nav > li > a > .fa.menu-item-icon {
margin-right: 0.25em;
line-height: 1;
flex-shrink: 0;
position: relative;
top: 0;
transform: none;
vertical-align: 0;
}
.navbar-top .nav > li > a > .menu-item-title {
line-height: 1.44;
display: inline-block;
vertical-align: middle;
}
/* FA in header: kill common FA vertical drift vs flex centers */
.navbar-top .fa,
.navbar-top .fas,
.navbar-top .far,
.navbar-top .fab {
line-height: 1;
vertical-align: -0.05em;
}
.navbar-top .css-icon {
width: 1em;
height: 1em;
vertical-align: -0.15em;
display: inline-block;
position: relative;
}
/* Sub-user-box width */
.navbar-top .navbar-right .sub-menu {