/* ============================================================ LEFT MENU - InsideLeftMenu.master To change the sidebar width, edit ONE variable here: ============================================================ */ :root { --left-nav-width: 220px; } /* ============================================================ 1. FIXED FULL-VIEWPORT-HEIGHT LEFT SIDEBAR ============================================================ */ #leftMenu { position: fixed !important; top: 0 !important; left: 0 !important; width: var(--left-nav-width) !important; height: 100vh !important; overflow-y: auto !important; background-color: var(--primary) !important; padding: 0 !important; z-index: 9999999 !important; } /* ============================================================ 2. PUSH THE ENTIRE PAGE RIGHT A single padding-left on shifts everything in one shot: header, page-title, content, pre-footer, footer — all of it. The fixed header needs its own left/width since it's out of flow. ============================================================ */ body.yes-inside-menu { padding-left: var(--left-nav-width) !important; } body.yes-inside-menu .main-header { left: var(--left-nav-width) !important; width: calc(100% - var(--left-nav-width)) !important; } /* Inner wrapper: top padding clears the fixed header (~152px) */ #leftMenuInner { padding: 162px 20px 40px 20px; } /* ============================================================ 3. TITLE (.dropTitle) - white text on dark background ============================================================ */ #leftMenu .dropTitle { color: var(--white) !important; border-bottom: 1px solid rgba(255,255,255,0.35) !important; font-size: 13px !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: 1px !important; margin-bottom: 12px !important; padding-bottom: 10px !important; display: block !important; } /* ============================================================ 4. ALL LINK TEXT - white ============================================================ */ #leftMenu #dropWrap li a, #leftMenu #dropWrap ul.dropdownMenu > li > a, #leftMenu .sm-blue a, #leftMenu .sm-blue a:hover, #leftMenu .sm-blue a:focus, #leftMenu .sm-blue a:active { color: var(--white) !important; background: transparent !important; } /* Top-level item borders use a subtle white line */ #leftMenu #dropWrap ul.dropdownMenu > li > a { border-bottom-color: rgba(255,255,255,0.2) !important; padding: 10px 0 10px 0 !important; } /* Sub-item text - slightly dimmed white for hierarchy */ #leftMenu #dropWrap li ul li a { color: rgba(255,255,255,0.85) !important; } /* Current/active item */ #leftMenu .sm-blue a.current, #leftMenu .sm-blue a.current:hover { color: var(--white) !important; font-weight: 700 !important; } /* ============================================================ 5. VERTICAL STACKING ============================================================ */ #leftMenu ul.sm-blue > li, #leftMenu ul.sm-blue ul > li, #leftMenu .navbar-nav > li { float: none !important; width: 100% !important; display: block !important; } #leftMenu ul.sm-blue { flex-direction: column !important; white-space: normal !important; } /* Sub-menus: static position so they flow inline, not as floating dropdowns */ #leftMenu ul.sm-blue li ul { position: static !important; float: none !important; min-width: 0 !important; box-shadow: none !important; background: transparent !important; border: none !important; } /* ============================================================ 6. SmartMenus cleanup ============================================================ */ #leftMenu .sm-blue.nav { border-left: none !important; } #leftMenu ul.sm-blue, #leftMenu ul.sm-blue ul { background-color: transparent !important; } /* ============================================================ 7. SUB-ARROW: right/down chevrons (Font Awesome) ============================================================ */ #leftMenu .sm-blue a span.sub-arrow { background: none !important; width: auto !important; height: auto !important; position: absolute !important; right: 8px !important; left: auto !important; /* top: 50% !important;*/ transform: translateY(-50%) !important; font-size: 0 !important; overflow: visible !important; } /* COLLAPSED -> fa-chevron-right */ #leftMenu .sm-blue a span.sub-arrow:before, #leftMenu .sm-blue a.current span.sub-arrow:before { font-family: "Font Awesome 6 Free" !important; font-weight: 900 !important; content: '\f054' !important; font-size: 11px !important; color: var(--white) !important; position: static !important; display: inline-block !important; top: auto !important; left: auto !important; line-height: 1 !important; } /* EXPANDED -> fa-chevron-down */ #leftMenu .sm-blue a.highlighted span.sub-arrow:before, #leftMenu .sm-blue a.current.highlighted span.sub-arrow:before { content: '\f078' !important; } /* ============================================================ 8. MOBILE: hide fixed sidebar, reset body padding ============================================================ */ @media (max-width: 990px) { #leftMenu { display: none !important; } body.yes-inside-menu { padding-left: 0 !important; } body.yes-inside-menu .main-header { left: 0 !important; width: 100% !important; } }