/* ================================================================================================ * BASELINE — KMA CSS MODULE 05 — HEADER ACCOUNT MENU + MENUS + FOOTER MENU ALIGNMENT * ================================================================================================ * * FILE: 05-menus-footer.css * VERSION: 1.0 * Last Updated: 2026-03-21 * * OWNS (HEADER ACCOUNT) * --------------------- * - #main-header .km-account-menu-item * - #main-header .km-account-anchor * - #main-header .km-header-firstname * - #main-header li.km-open-manage (mobile/tablet behavior) * * OWNS (MENUS / DROPDOWN POLISH) * ------------------------------ * - #main-header .sub-menu / .elementor-nav-menu--dropdown (scoped) * - .elementor-nav-menu .sub-menu > li divider rules (global dropdown divider) * * OWNS (FOOTER MENU ALIGNMENT / CARET) * ------------------------------------ * - .km-footer-menu (top-level alignment) * - .km-footer-menu .sub-menu alignment * - .km-footer-menu caret rules (.sub-arrow and/or ::after caret) * * PURPOSE * ------- * - Header: icon + name stacking, caret hiding, mobile “Account” label handling. * - Dropdown: borders, shadow containment, and submenu item dividers. * - Footer: align submenu structure and control caret appearance. * * NOTES * ----- * - Header selectors should remain scoped to #main-header. * - Footer selectors should remain scoped to .km-footer-menu. * - If this file grows, split into: * 05-header-account.css + 15-footer-menu.css + 16-dropdowns.css * * STRUCTURE OVERVIEW * ------------------ * 05A) Desktop header (inside #main-header): * - Stack icon + name vertically * - Center name under icon * - Hide the submenu caret arrow in the header row * * 05B) Mobile/tablet dropdown (hamburger menu mode): * - Replace icon + (first name) with the word "Account" * - Keeps the same submenu behavior (Manage Account / Sign Out) * * IMPORTANT * --------- * - NO LOGIC OR STRUCTURAL CHANGES HAVE BEEN MADE. * - Commented blocks remain intentionally preserved as part of baseline. * - This snapshot reflects the working production version. * * ================================================================================================ */ /* ================================================================================================ * MODULE 05 — HEADER ACCOUNT MENU: HIDE VISIBLE LABEL TEXT * ================================================================================================ * * PURPOSE * ------- * Suppresses the default visible text label on account menu items so the custom * icon + first-name layout can control presentation. * ================================================================================================ */ body #main-header .km-account-menu-item > a{ /**** Hide visible label text while preserving anchor structure. ****/ font-size: 0 !important; } /* ================================================================================================ * MODULE 05A — DESKTOP HEADER * ----------------------------------------------------------------------------------------------- * - Stack icon + name vertically * - Center name under icon * - Hide the submenu caret arrow in the header row * ================================================================================================ */ /* 1) Hide the submenu caret for the account item only */ body #main-header .km-account-menu-item > a.km-account-anchor .sub-arrow{ /**** Remove submenu caret from the desktop account anchor only. ****/ display:none !important; } /* 2) Two-row layout on the anchor: row 1 = icon area, row 2 = name */ body #main-header .km-account-menu-item > a.km-account-anchor{ /**** Use grid to create separate icon and first-name rows. ****/ display:grid !important; grid-template-rows: 34px auto; /**** Center content horizontally and vertically within grid rows. ****/ justify-items:center; align-items:center; /**** Add space between icon row and name row. ****/ row-gap:6px; /**** Remove default anchor padding / line-height interference. ****/ padding:0 !important; line-height:1 !important; /**** Maintain minimum touch target width. ****/ min-width:44px; } /* 3) Force the first-name span into row 2, centered, never overlapping. (Even if the icon is positioned weirdly, the name will stay in its own row.) */ body #main-header .km-account-menu-item > a.km-account-anchor .km-header-firstname{ /**** Place first name in second grid row. ****/ grid-row:2; justify-self:center; align-self:start; /**** Tight spacing / readable small label styling. ****/ margin:0 !important; padding-top:2px; font-size:11.5px; font-weight:600; line-height:1; opacity:0.90; white-space:nowrap; /**** Prevent first-name text from intercepting pointer events. ****/ pointer-events:none; } /* your “nudge right” */ body #main-header .km-account-menu-item > a.km-account-anchor .km-header-firstname{ /**** Slight horizontal nudge preserved exactly as production baseline. ****/ transform: translateX(2px); } /* 4) If the icon is a real element inside the anchor, keep it in row 1 */ body #main-header .km-account-menu-item > a.km-account-anchor svg, body #main-header .km-account-menu-item > a.km-account-anchor img, body #main-header .km-account-menu-item > a.km-account-anchor i{ /**** Force icon assets into the first grid row. ****/ grid-row:1; justify-self:center; align-self:center; display:block; margin:0; padding:0; line-height:1; } /* ================================================================================================ * MODULE 05B — MOBILE / TABLET HEADER (COMMENTED PRESERVED BLOCK) * ----------------------------------------------------------------------------------------------- * - Hide person icon * - Hide first name * - Replace with text: "Account" * - Applies ONLY to the Manage Account menu item * * NOTE * ---- * This entire block remains commented exactly as provided in baseline. * ================================================================================================ */ /*@media (max-width: 1024px){*/ /* Scope tightly to header menu */ /* body #main-header li.km-open-manage > a.km-account-anchor{ display: block !important; text-align: left; position: relative; padding-left: 0; }*/ /* 2) Hide the injected first name */ /* body #main-header li.km-open-manage .km-header-firstname{ display: none !important; }*/ /* 3) Inject the word "Account" */ /* body #main-header li.km-open-manage > a.km-account-anchor::after{ content: "Account"; display: inline-block; font-size: 16px; font-weight: 600; line-height: 1.2; color: inherit; }*/ /*}*/ /* *************************************************************************************************** * MODULE 05E — HEADER POPUP SUBMENUS: BORDER & CONTAINMENT * ***************************************************************************************************/ /* First-level dropdown menu */ #main-header .elementor-nav-menu--dropdown, #main-header .sub-menu { /**** Add visible border / radius / white background to first-level header dropdowns. ****/ border: 2px solid rgba(0, 0, 0, 0.5); border-radius: 8px; background-color: #ffffff; /**** Preserve clean dropdown containment styling. ****/ box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15); /* overflow: hidden; */ } /* Nested submenus (flyouts) */ #main-header .sub-menu .sub-menu { /**** Slightly lighter border treatment for nested flyout submenus. ****/ border: 1px solid rgba(0, 0, 0, 0.25); border-radius: 8px; background-color: #ffffff; /**** Slightly stronger flyout shadow. ****/ box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18); } #main-header .sub-menu { /**** Add separation between parent item and dropdown menu. ****/ margin-top: 6px; } #main-header .sub-menu li > a { /**** Round submenu item anchors slightly for softer appearance. ****/ border-radius: 6px; } /* *************************************************************************************************** * MODULE 05C — FOOTER: ALIGN TOP-LEVEL ITEMS (ACCOUNT) THAT HAVE CHILDREN * ***************************************************************************************************/ /* 1) Kill ANY left offset on the TOP level
  • */ .km-footer-menu ul.elementor-nav-menu > li, .km-footer-menu ul.elementor-nav-menu > li.menu-item-has-children{ /**** Remove left offset from top-level footer list items. ****/ padding-left: 0 !important; margin-left: 0 !important; text-indent: 0 !important; } /* 2) Kill ANY left offset on the TOP level */ .km-footer-menu ul.elementor-nav-menu > li > a, .km-footer-menu ul.elementor-nav-menu > li.menu-item-has-children > a, .km-footer-menu ul.elementor-nav-menu > li > a.elementor-item{ /**** Remove left offset from top-level footer anchors. ****/ padding-left: 0 !important; margin-left: 0 !important; text-indent: 0 !important; } /* 3) Remove any caret/indicator that reserves space */ .km-footer-menu .sub-arrow, .km-footer-menu .elementor-item:after, .km-footer-menu .elementor-item:before{ /**** Remove generic footer menu carets / pseudo indicators. ****/ display: none !important; } /* 4) Submenu alignment (what you already improved) */ .km-footer-menu .sub-menu{ /**** Align footer submenus flush with parent content. ****/ margin-left: 0 !important; padding-left: 0 !important; } /* ------------------------------------------------------------------------- * Footer ONLY: restore submenu caret for Account * ------------------------------------------------------------------------- */ /* Re-enable caret icon for footer Account menu item */ .km-footer-menu li.menu-item-account > a .sub-arrow{ /**** Restore inline caret for Account footer item only. ****/ display: inline-block !important; position: static; margin-left: 6px; opacity: 0.85; } /* Ensure other footer items still have no caret */ .km-footer-menu li:not(.menu-item-account) > a .sub-arrow{ /**** Keep caret hidden for all non-Account footer items. ****/ display: none !important; } /* *************************************************************************************************** * MODULE 05D — FOOTER: INJECT SUBMENU CARET FOR ACCOUNT (WHITE) * ***************************************************************************************************/ /* Footer Account: add caret via pseudo-element */ .km-footer-menu li.menu-item-has-children > a::after{ /**** Inject white caret after footer items that have children. ****/ content: "▾"; display: inline-block; margin-left: 8px; font-size: 14px; line-height: 1; color: #ffffff; opacity: 0.85; vertical-align: middle; } /* *************************************************************************************************** * MODULE 05F — DROPDOWN MENUS: ITEM DIVIDERS * Adds a subtle divider line between submenu items globally * ***************************************************************************************************/ /* Divider between dropdown items */ .elementor-nav-menu .sub-menu > li{ /**** Add subtle divider between submenu items. ****/ border-bottom: 1px solid rgba(0, 0, 0, 0.15); } /* Remove divider from last item */ .elementor-nav-menu .sub-menu > li:last-child{ /**** Remove final divider to avoid trailing border. ****/ border-bottom: none; } /* ================================================================================================ * END OF MODULE 05 * ================================================================================================ */