/* ================================================================================================ * BASELINE — KMA CSS MODULE 03 — STICKY HEADER STABILITY * ================================================================================================ * * FILE: 03-header.css * VERSION: 1.0 * Last Updated: 2026-03-21 * * OWNERSHIP * --------- * Owns: * - #main-header * - #main-header .elementor-widget * - #main-header .elementor-element * - #main-header .e-con * - #main-header .e-con-inner * - Header dropdown containment / spacing stability * * PURPOSE * ------- * - Keep header full width. * - Remove unexpected vertical spacing from nested Elementor containers. * - Avoid layout jumps and overflow issues. * - Ensure dropdown menus can extend outside the header without clipping. * - Stabilize stacking context so menus appear above other sticky elements. * * SCOPING RULE * ------------ * - All header-related selectors must be scoped to #main-header. * - Account menu behavior and styling belong in Module 05. * - This module focuses on structural stability, not branding. * * IMPORTANT * --------- * - NO LOGIC OR STRUCTURAL CHANGES HAVE BEEN MADE. * - !important is used intentionally to override Elementor inline styles. * - Footer rules are included exactly as provided (even though conceptually separate). * * ================================================================================================ */ /* ================================================================================================ * MODULE 01 — HEADER CORE STABILITY * ----------------------------------------------------------------------------------------------- * - Forces full-width alignment. * - Removes stray margins. * - Allows dropdowns/menus to extend beyond header container. * ================================================================================================ */ #main-header { /**** Force sticky header to span full viewport width. ****/ left: 0 !important; right: 0 !important; width: 100% !important; /**** Tighten vertical spacing inside the header shell. ****/ margin: 0 !important; padding-top: 6px !important; padding-bottom: 6px !important; /**** Allow dropdown menus to extend outside the header without being clipped. ****/ overflow: visible !important; } /* ================================================================================================ * MODULE 02 — REMOVE ELEMENTOR NESTED SPACING * ----------------------------------------------------------------------------------------------- * - Elementor often injects margin/padding on containers and widgets. * - This prevents unexpected vertical gaps inside the header. * ================================================================================================ */ #main-header .elementor-widget, #main-header .elementor-element, #main-header .e-con, #main-header .e-con-inner { /**** Remove injected top/bottom margins that can create header height drift. ****/ margin-top: 0 !important; margin-bottom: 0 !important; /**** Remove injected top/bottom padding that can create extra header depth. ****/ padding-top: 0 !important; padding-bottom: 0 !important; } /* ================================================================================================ * MODULE 03 — STACKING CONTEXT SAFETY * ----------------------------------------------------------------------------------------------- * - Ensures header and dropdowns sit above other sticky elements. * - Very high z-index used intentionally. * ================================================================================================ */ #main-header{ /**** Keep header and its menus above other sticky/front-end layers. ****/ z-index: 1000000 !important; } /* ================================================================================================ * MODULE 04 — REMOVE FORCED MIN-HEIGHT FROM ELEMENTOR CONTAINERS * ----------------------------------------------------------------------------------------------- * - Prevents Elementor from forcing tall header sections. * - Ensures compact header layout. * ================================================================================================ */ #main-header > .e-con, #main-header > .elementor-element { /**** Neutralize forced minimum heights on top-level header containers. ****/ min-height: 0 !important; } /* ================================================================================================ * MODULE 05 — FOOTER QUICK LINKS: TWO COLUMN LAYOUT (PRESERVED COMMENTED BLOCK) * ----------------------------------------------------------------------------------------------- * NOTE: * - These rules are included exactly as provided in baseline. * - Although conceptually footer-related, they remain in this module * to preserve current production structure. * ================================================================================================ */ /*.km-footer-menu ul { column-count: 2; column-gap: 20px; } .km-footer-menu li { break-inside: avoid; margin-bottom: 6px; }*/ /* ================================================================================================ * MODULE 06 — MOBILE HAMBURGER MENU: SHRINK-WRAP WIDTH + SUBMENU OFFSET * ----------------------------------------------------------------------------------------------- * - Main dropdown width fits content rather than stretching full width. * - Submenus remain closed by default. * - Expanded submenus appear slightly indented. * ================================================================================================ */ @media (max-width: 1024px){ /* 1) Main dropdown: shrink-wrap + anchor right */ #main-header .elementor-nav-menu__container.elementor-nav-menu--dropdown{ /**** Size main mobile dropdown to its content instead of full-width stretch. ****/ width: max-content !important; max-width: calc(100vw - 24px) !important; white-space: nowrap !important; /**** Override Elementor inline left positioning and anchor from the right edge. ****/ left: auto !important; right: 48px !important; margin-left: 0 !important; margin-right: 0 !important; } /* 2) Make sure the UL doesn’t force full width */ #main-header .elementor-nav-menu__container.elementor-nav-menu--dropdown .elementor-nav-menu{ /**** Prevent inner UL from re-expanding dropdown width. ****/ width: max-content !important; } /* 3) Links/items should size to content (not stretch) */ #main-header .elementor-nav-menu__container.elementor-nav-menu--dropdown li, #main-header .elementor-nav-menu__container.elementor-nav-menu--dropdown a.elementor-item{ /**** Allow list items and links to size naturally to content. ****/ width: auto !important; } /* 4) IMPORTANT: Undo the previous attempt that forced submenus visible */ #main-header .elementor-nav-menu__container.elementor-nav-menu--dropdown .sub-menu{ /**** Keep mobile submenus closed by default. ****/ display: none !important; width: auto !important; margin-left: 0 !important; white-space: nowrap !important; } /* 5) Only show a submenu when its parent link is expanded */ #main-header .elementor-nav-menu__container.elementor-nav-menu--dropdown li.menu-item-has-children > a[aria-expanded="true"] + .sub-menu{ /**** Reveal only the currently expanded submenu and offset it slightly right. ****/ display: block !important; margin-left: 16px !important; width: max-content !important; max-width: calc(100vw - 40px) !important; } } /* ================================================================================================ * MODULE 07 — MOBILE HAMBURGER MENU: OVERLAY SUBMENUS * ----------------------------------------------------------------------------------------------- * - Converts expanded mobile submenus from push-down layout to overlay layout. * - Preserves visibility above surrounding menu items. * ================================================================================================ */ @media (max-width: 1024px){ /* Make each parent LI a positioning context */ #main-header .elementor-nav-menu__container.elementor-nav-menu--dropdown li.menu-item-has-children{ /**** Establish local positioning context for absolute submenu overlay. ****/ position: relative !important; } /* Hide submenus by default */ #main-header .elementor-nav-menu__container.elementor-nav-menu--dropdown li.menu-item-has-children > .sub-menu{ /**** Keep submenu hidden until explicitly expanded. ****/ display: none !important; } /* When expanded, overlay the submenu */ #main-header .elementor-nav-menu__container.elementor-nav-menu--dropdown li.menu-item-has-children > a[aria-expanded="true"] + .sub-menu{ /**** Display expanded submenu as an overlay instead of pushing items downward. ****/ display: block !important; position: absolute !important; left: 16px !important; top: calc(100% + 6px) !important; width: max-content !important; max-width: calc(100vw - 40px) !important; z-index: 9999 !important; } /* The dropdown nav itself (this is the usual clipping culprit) */ #main-header nav.elementor-nav-menu__container.elementor-nav-menu--dropdown{ /**** Ensure nav wrapper does not clip overlaid submenus. ****/ overflow: visible !important; } /* Some Elementor wrappers can also clip */ #main-header .elementor-nav-menu--dropdown, #main-header .elementor-nav-menu__container, #main-header .elementor-nav-menu__container.elementor-nav-menu--dropdown{ /**** Allow all related menu wrappers to show overlay content beyond bounds. ****/ overflow: visible !important; } } /* ================================================================================================ * MODULE 08 — TABLET-ONLY RIGHT OFFSET ADJUSTMENT * ----------------------------------------------------------------------------------------------- * - Fine-tunes the mobile/tablet dropdown horizontal position for tablet widths. * ================================================================================================ */ @media (min-width: 768px) and (max-width: 1024px){ #main-header .elementor-nav-menu__container.elementor-nav-menu--dropdown{ /**** Nudge tablet dropdown closer to the right edge. ****/ right: 0px !important; } } /* ================================================================================================ * END OF MODULE 03 — BASELINE * ================================================================================================ */