/**
* EA Navigation - unified BuddyBoss sidebar fixes (v1.0.18).
*
* This stylesheet is intentionally defensive because BuddyBoss applies
* different BuddyPanel rules in expanded, collapsed and admin-bar states.
* The rules below force readable labels in the normal platform sidebar,
* create a clear active marker, align the avatar dropdown, and avoid
* interfering with page content.
*/
:root {
--ea-nav-navy: #04203e;
--ea-nav-navy-2: #0f2f4f;
--ea-nav-navy-3: #153b61;
--ea-nav-navy-4: #1b4770;
--ea-nav-accent: #fa3c00;
--ea-nav-text: #f5f9ff;
--ea-nav-text-muted: #a7bbcf;
--ea-nav-border: rgba(255,255,255,.08);
--ea-nav-radius: 12px;
--ea-nav-width: 292px;
}
/* -------------------------------------------------------------------------
* BuddyPanel shell
* ---------------------------------------------------------------------- */
body.logged-in .buddypanel,
body.logged-in .buddypanel.bb-buddypanel,
body.logged-in .buddypanel .side-panel-inner {
background: var(--ea-nav-navy) !important;
}
body.logged-in .buddypanel {
color: var(--ea-nav-text) !important;
overflow-x: visible !important;
}
/*
* v1.0.17: the fixed 292px width is now applied only in the EXPANDED state
* (body.buddypanel-open) and for panels whose toggle is disabled (which can
* never collapse). Previously it was unconditional, which prevented the
* BuddyBoss collapsed rail from ever narrowing — a prerequisite for the
* collapsed compact-mark logo below.
*/
body.logged-in.buddypanel-open .buddypanel,
body.logged-in .buddypanel.buddypanel--toggle-off {
min-width: var(--ea-nav-width) !important;
width: var(--ea-nav-width) !important;
}
body.logged-in .buddypanel .side-panel-inner {
padding-top: 6px !important;
overflow-x: hidden !important;
}
body.admin-bar .buddypanel {
top: var(--wp-admin--admin-bar--height, 32px) !important;
}
/* -------------------------------------------------------------------------
* Logo — native BuddyBoss ownership (v1.0.18).
*
* EA Navigation no longer renders or sizes the BuddyPanel logo. The logo is
* BuddyBoss's own `.bb-logo` (Theme Options -> Desktop Logo) in the expanded
* panel and the WordPress Site Icon (`.buddypanel-site-icon`) in the
* collapsed rail. The only sizing override lives in the BuddyBoss child
* theme (assets/css/custom.css, v1.0.6). This plugin keeps the containers
* flat on the navy shell and nothing more.
* ---------------------------------------------------------------------- */
body.logged-in .buddypanel .site-branding,
body.logged-in .buddypanel .site-header__logo,
body.logged-in .buddypanel .bb-logo-wrap,
body.logged-in .buddypanel .buddypanel-site-icon,
body.logged-in .buddypanel .side-panel-logo,
body.logged-in .buddypanel .site-logo,
body.logged-in .buddypanel .custom-logo-link {
background: transparent !important;
box-shadow: none !important;
border: 0 !important;
border-radius: 0 !important;
}
/* --- Accessibility: visible keyboard focus on the logo link ------------- */
body.logged-in .buddypanel .site-branding .site-title a:focus-visible {
outline: 3px solid var(--ea-nav-accent);
outline-offset: 4px;
border-radius: 6px;
}
/* -------------------------------------------------------------------------
* Menu layout and section headings
* ---------------------------------------------------------------------- */
body.logged-in .buddypanel #buddypanel-menu.side-panel-menu,
body.logged-in .buddypanel .side-panel-menu {
padding: 8px 12px 28px !important;
margin: 0 !important;
background: transparent !important;
}
body.logged-in .buddypanel #buddypanel-menu .menu-item,
body.logged-in .buddypanel .side-panel-menu .menu-item {
margin: 3px 0 !important;
background: transparent !important;
}
body.logged-in .buddypanel #buddypanel-menu li.ea-nav-section > a,
body.logged-in .buddypanel #buddypanel-menu li.bb-menu-section.ea-nav-section > a,
body.logged-in .buddypanel .side-panel-menu li.ea-nav-section > a {
display: block !important;
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
padding: 18px 14px 7px !important;
margin: 0 !important;
font-size: 11px !important;
line-height: 1.2 !important;
letter-spacing: .16em !important;
text-transform: uppercase !important;
font-weight: 800 !important;
color: var(--ea-nav-text-muted) !important;
opacity: 1 !important;
visibility: visible !important;
pointer-events: none !important;
cursor: default !important;
}
body.logged-in .buddypanel #buddypanel-menu li.ea-nav-section:first-child > a {
padding-top: 8px !important;
}
body.logged-in .buddypanel #buddypanel-menu li.ea-nav-section > a .link-text,
body.logged-in .buddypanel .side-panel-menu li.ea-nav-section > a .link-text {
color: var(--ea-nav-text-muted) !important;
display: inline !important;
opacity: 1 !important;
visibility: visible !important;
}
/* -------------------------------------------------------------------------
* Menu items - force labels visible by default.
* BuddyBoss can hide labels in compact panel states with width/opacity/position
* rules; these declarations intentionally reset those rules for EA items.
* ---------------------------------------------------------------------- */
body.logged-in .buddypanel #buddypanel-menu li.ea-nav-item > a,
body.logged-in .buddypanel .side-panel-menu li.ea-nav-item > a {
position: relative !important;
display: flex !important;
align-items: center !important;
justify-content: flex-start !important;
gap: 12px !important;
width: 100% !important;
min-height: 44px !important;
padding: 11px 14px 11px 16px !important;
margin: 0 !important;
border: 0 !important;
border-radius: var(--ea-nav-radius) !important;
background: transparent !important;
box-shadow: none !important;
color: var(--ea-nav-text) !important;
line-height: 1.28 !important;
text-decoration: none !important;
white-space: normal !important;
overflow: visible !important;
transition: background .16s ease, color .16s ease, box-shadow .16s ease, transform .16s ease !important;
}
body.logged-in .buddypanel #buddypanel-menu li.ea-nav-item > a .link-text,
body.logged-in .buddypanel .side-panel-menu li.ea-nav-item > a .link-text,
body.logged-in .buddypanel #buddypanel-menu li.ea-nav-item > a span.link-text,
body.logged-in .buddypanel .side-panel-menu li.ea-nav-item > a span.link-text {
position: static !important;
display: inline-block !important;
flex: 1 1 auto !important;
width: auto !important;
min-width: 0 !important;
max-width: calc(var(--ea-nav-width) - 86px) !important;
height: auto !important;
clip: auto !important;
clip-path: none !important;
transform: none !important;
text-indent: 0 !important;
margin: 0 !important;
padding: 0 !important;
opacity: 1 !important;
visibility: visible !important;
overflow: visible !important;
text-overflow: clip !important;
white-space: normal !important;
word-break: normal !important;
overflow-wrap: anywhere !important;
font-size: 14.5px !important;
line-height: 1.3 !important;
font-weight: 600 !important;
letter-spacing: 0 !important;
color: var(--ea-nav-text) !important;
}
/* Prevent BuddyBoss compact-panel tooltip behaviour from blanking our labels. */
body.logged-in .buddypanel #buddypanel-menu li.ea-nav-item > a:before,
body.logged-in .buddypanel #buddypanel-menu li.ea-nav-item > a:after,
body.logged-in .buddypanel .side-panel-menu li.ea-nav-item > a:before,
body.logged-in .buddypanel .side-panel-menu li.ea-nav-item > a:after {
pointer-events: none !important;
}
body.logged-in .buddypanel #buddypanel-menu li.ea-nav-item .ea-nav__icon-wrap,
body.logged-in .buddypanel .side-panel-menu li.ea-nav-item .ea-nav__icon-wrap {
flex: 0 0 22px !important;
width: 22px !important;
height: 22px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
margin: 0 !important;
color: var(--ea-nav-text-muted) !important;
line-height: 1 !important;
opacity: 1 !important;
visibility: visible !important;
}
body.logged-in .buddypanel #buddypanel-menu li.ea-nav-item .ea-nav__icon,
body.logged-in .buddypanel .side-panel-menu li.ea-nav-item .ea-nav__icon {
width: 20px !important;
height: 20px !important;
stroke: currentColor !important;
}
body.logged-in .buddypanel #buddypanel-menu li.ea-nav-item > a > i.bb-icon-file,
body.logged-in .buddypanel #buddypanel-menu li.ea-nav-item > a > i.ea-nav-suppress,
body.logged-in .buddypanel #buddypanel-menu li.ea-nav-item > a > i._mi,
body.logged-in .buddypanel .side-panel-menu li.ea-nav-item > a > i.bb-icon-file,
body.logged-in .buddypanel .side-panel-menu li.ea-nav-item > a > i.ea-nav-suppress,
body.logged-in .buddypanel .side-panel-menu li.ea-nav-item > a > i._mi {
display: none !important;
}
/* Hover is an enhancement only; labels are already visible before hover. */
body.logged-in .buddypanel #buddypanel-menu li.ea-nav-item > a:hover,
body.logged-in .buddypanel #buddypanel-menu li.ea-nav-item > a:focus-visible,
body.logged-in .buddypanel .side-panel-menu li.ea-nav-item > a:hover,
body.logged-in .buddypanel .side-panel-menu li.ea-nav-item > a:focus-visible {
background: var(--ea-nav-navy-2) !important;
color: #fff !important;
box-shadow: inset 0 0 0 1px var(--ea-nav-border) !important;
}
body.logged-in .buddypanel #buddypanel-menu li.ea-nav-item > a:hover .link-text,
body.logged-in .buddypanel #buddypanel-menu li.ea-nav-item > a:focus-visible .link-text,
body.logged-in .buddypanel .side-panel-menu li.ea-nav-item > a:hover .link-text,
body.logged-in .buddypanel .side-panel-menu li.ea-nav-item > a:focus-visible .link-text,
body.logged-in .buddypanel #buddypanel-menu li.ea-nav-item > a:hover .ea-nav__icon-wrap,
body.logged-in .buddypanel #buddypanel-menu li.ea-nav-item > a:focus-visible .ea-nav__icon-wrap {
color: #fff !important;
opacity: 1 !important;
visibility: visible !important;
}
/* Strong active treatment: lighter navy tile + orange bar + orange icon. */
body.logged-in .buddypanel #buddypanel-menu li.ea-nav-item.current-menu-item > a,
body.logged-in .buddypanel #buddypanel-menu li.ea-nav-item.current_page_item > a,
body.logged-in .buddypanel #buddypanel-menu li.ea-nav-item.ea-nav-item--active > a,
body.logged-in .buddypanel .side-panel-menu li.ea-nav-item.current-menu-item > a,
body.logged-in .buddypanel .side-panel-menu li.ea-nav-item.ea-nav-item--active > a {
background: var(--ea-nav-navy-3) !important;
color: #fff !important;
box-shadow: inset 4px 0 0 0 var(--ea-nav-accent), inset 0 0 0 1px rgba(255,255,255,.08) !important;
}
body.logged-in .buddypanel #buddypanel-menu li.ea-nav-item.current-menu-item > a .link-text,
body.logged-in .buddypanel #buddypanel-menu li.ea-nav-item.current_page_item > a .link-text,
body.logged-in .buddypanel #buddypanel-menu li.ea-nav-item.ea-nav-item--active > a .link-text,
body.logged-in .buddypanel .side-panel-menu li.ea-nav-item.current-menu-item > a .link-text,
body.logged-in .buddypanel .side-panel-menu li.ea-nav-item.ea-nav-item--active > a .link-text {
color: #fff !important;
opacity: 1 !important;
visibility: visible !important;
}
body.logged-in .buddypanel #buddypanel-menu li.ea-nav-item.current-menu-item .ea-nav__icon-wrap,
body.logged-in .buddypanel #buddypanel-menu li.ea-nav-item.current_page_item .ea-nav__icon-wrap,
body.logged-in .buddypanel #buddypanel-menu li.ea-nav-item.ea-nav-item--active .ea-nav__icon-wrap,
body.logged-in .buddypanel .side-panel-menu li.ea-nav-item.current-menu-item .ea-nav__icon-wrap,
body.logged-in .buddypanel .side-panel-menu li.ea-nav-item.ea-nav-item--active .ea-nav__icon-wrap {
color: var(--ea-nav-accent) !important;
}
/* Override BuddyBoss collapsed/mini text hiding for this platform menu. */
body.logged-in.bb-buddypanel-collapse .buddypanel,
body.logged-in.buddypanel--toggle-off .buddypanel,
body.logged-in.buddypanel--toggle-on .buddypanel,
body.logged-in.bb-buddypanel-mini .buddypanel {
min-width: var(--ea-nav-width) !important;
width: var(--ea-nav-width) !important;
}
body.logged-in.bb-buddypanel-collapse .buddypanel #buddypanel-menu li.ea-nav-item > a .link-text,
body.logged-in.buddypanel--toggle-off .buddypanel #buddypanel-menu li.ea-nav-item > a .link-text,
body.logged-in.buddypanel--toggle-on .buddypanel #buddypanel-menu li.ea-nav-item > a .link-text,
body.logged-in.bb-buddypanel-mini .buddypanel #buddypanel-menu li.ea-nav-item > a .link-text {
display: inline-block !important;
opacity: 1 !important;
visibility: visible !important;
width: auto !important;
}
/* -------------------------------------------------------------------------
* Mobile: do not crush labels; let BuddyBoss overlay/slide the panel.
* ---------------------------------------------------------------------- */
@media (max-width: 980px) {
body.logged-in .buddypanel {
max-width: 88vw !important;
width: min(var(--ea-nav-width), 88vw) !important;
}
body.logged-in .buddypanel #buddypanel-menu li.ea-nav-item > a .link-text,
body.logged-in .buddypanel .side-panel-menu li.ea-nav-item > a .link-text {
max-width: calc(88vw - 86px) !important;
font-size: 14px !important;
}
}
/* -------------------------------------------------------------------------
* Emergency recovery v1.0.12: sidebar section-heading scroll fix only.
* This deliberately avoids all BuddyBoss top-bar/header/search overrides.
* ---------------------------------------------------------------------- */
body.logged-in .buddypanel .side-panel-inner,
body.logged-in .buddypanel #buddypanel-menu,
body.logged-in .buddypanel .side-panel-menu {
position: relative !important;
}
body.logged-in .buddypanel #buddypanel-menu li.ea-nav-section,
body.logged-in .buddypanel .side-panel-menu li.ea-nav-section,
body.logged-in .buddypanel #buddypanel-menu li.ea-nav-section > a,
body.logged-in .buddypanel .side-panel-menu li.ea-nav-section > a,
body.logged-in .buddypanel #buddypanel-menu li.ea-nav-section > a .link-text,
body.logged-in .buddypanel .side-panel-menu li.ea-nav-section > a .link-text {
position: static !important;
top: auto !important;
right: auto !important;
bottom: auto !important;
left: auto !important;
z-index: auto !important;
transform: none !important;
translate: none !important;
}
body.logged-in .buddypanel .side-panel-inner {
overflow-y: auto !important;
overflow-x: hidden !important;
}
/* ---------------------------------------------------------------------------
* v1.0.21 — Profile dropdown row alignment.
*
* EA_Nav_Menu::inject_title() has always emitted
*
* Label
* for the avatar dropdown, but this stylesheet only ever styled the sidebar's
* .ea-nav__icon-wrap. The account icons therefore had no width, no flex box and
* no baseline alignment, so each glyph sat wherever BuddyBoss's default anchor
* layout happened to put it — the reported symptom (Membership's icon sitting
* high and reading larger than View profile / Account settings / Log out).
*
* These rules mirror the sidebar's icon treatment: a fixed 22px optical box,
* a 20px glyph centred inside it, and a flex row so every label starts on the
* same x and every icon shares one vertical centre line.
* ------------------------------------------------------------------------- */
.bb-profile-menu .sub-menu li.ea-account-item > a,
.bb-my-account-menu .sub-menu li.ea-account-item > a,
#header-my-account-menu li.ea-account-item > a,
li.ea-account-item > a {
display: flex !important;
align-items: center !important;
gap: 12px !important;
line-height: 1.4 !important;
}
.bb-profile-menu .sub-menu li.ea-account-item > a .ea-account__icon-wrap,
.bb-my-account-menu .sub-menu li.ea-account-item > a .ea-account__icon-wrap,
#header-my-account-menu li.ea-account-item > a .ea-account__icon-wrap,
li.ea-account-item > a .ea-account__icon-wrap {
flex: 0 0 22px !important;
width: 22px !important;
height: 22px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
margin: 0 !important;
padding: 0 !important;
line-height: 1 !important;
opacity: 1 !important;
visibility: visible !important;
}
/* EA_Nav_Icons::get() stamps the default class `ea-nav__icon` on the