/* ============================================================ DIVI CUSTOM MEGA MENU — CSS Add this to: Divi → Theme Options → Custom CSS OR your child theme's style.css ============================================================ */ /* ── 1. Hide panels on the FRONTEND only — not inside the Divi builder ─ */ /* Divi builder adds .et_fb_enabled to ; we exclude that state. */ body:has(.et-fb.et-vb-root-ancestor) .divi-mega-menu-panel { display: block !important; visibility: visible !important; opacity: 1 !important; } .nav li.has-mega-menu a { position: relative; transition: all 0.2s ease; } .nav li.has-mega-menu>a:before { /* position: absolute; top: 8px; right: -15px; content: ''; width: 10px; height: 10px; background: url('../img/caret-right.svg'); background-position: center; background-repeat: no-repeat; background-size: 5px; transform: translateY(-50%); */ } .nav li.has-mega-menu:hover>a:before { transform: rotate(90deg) translate(-50%, 0); } /* body:has(.et-fb.et-vb-root-ancestor) .mega-menu-active-panel, .et_vb_parent_module .mega-menu-active-panel { position: relative !important; top: unset !important; display: block !important; visibility: visible !important; opacity: 1 !important; } */ /* ── 2. Once JS has set it up, switch to visibility-based hiding ─────── */ .mega-menu-active-panel { display: block !important; /* override the above after JS init */ visibility: hidden; opacity: 0; pointer-events: none; /* Full-width: stretch from left edge of the page to right */ position: fixed; /* fixed so it always aligns to the viewport */ top: auto; /* JS will set this dynamically — see JS update below */ left: 0; width: 100vw; max-width: 100vw; /* Slide-in animation */ transform: translateY(8px); transition: opacity 0.22s ease, transform 0.22s ease, visibility 0.22s; /* Stack above everything */ z-index: 99999; /* Shadow — no border-radius since it's full width */ box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12); overflow: hidden; margin: 0 !important; } /* ── 3. Open state (added by JS) ─────────────────────────────────────── */ .has-mega-menu.mega-open>.mega-menu-active-panel { visibility: visible; opacity: 1; pointer-events: auto; transform: translateY(0); } /* ── 4. Parent nav item — static so panel escapes it and goes full-width */ #et-main-nav ul.et-menu>li.has-mega-menu { position: static; } /* ── 4b. Ensure the header/nav itself doesn't clip the panel ─────────── */ #main-header, #et-main-nav, .et-menu-nav { overflow: visible !important; } /* ── 5. Optional: highlight the active parent link ───────────────────── */ #et-main-nav ul.et-menu>li.has-mega-menu.mega-open>a { color: var(--mega-accent, #0073e6); /* override with your brand color */ } /* ── 6. Small arrow / caret indicator ───────────────────────────────── */ #et-main-nav ul.et-menu>li.has-mega-menu>a::after { content: " ▾"; font-size: 0.7em; opacity: 0.6; transition: transform 0.2s; display: inline-block; } #et-main-nav ul.et-menu>li.has-mega-menu.mega-open>a::after { transform: rotate(180deg); } .divi-mega-menu-panel .et_pb_row { margin: 0 auto; } /* Divi Vertical Tabs 1 */ .vertical-tabs { border: none; } .vertical-tabs ul.et_pb_tabs_controls { float: left; width: 33%; margin-right: 50px; background: transparent; position: unset; visibility: visible; opacity: 1; transition: unset; -webkit-transform: unset; transform: unset; border: 0; box-shadow: unset; } .vertical-tabs ul.et_pb_tabs_controls:after { content: none; } .vertical-tabs .et_pb_tabs_controls li { width: 100%; padding: 0; border-right: 1px solid var(--gcid-secondary-color)!important; } .vertical-tabs .et_pb_tabs_controls li.et_pb_tab_active { border-right: 1px solid var(--gcid-primary-color) !important; } .vertical-tabs .et_pb_tabs_controls li a { padding: 15px 50px; line-height: 1; /* display: block; */ font-weight: 500 !important; position: relative; } .vertical-tabs .et_pb_tabs_controls li a:hover { opacity: 1; } .vertical-tabs .et_pb_tabs_controls .et_pb_tab_active a:before { position: absolute; content: ''; right: 20px; top: 50%; width: 20px; height: 20px; transform: translateY(-50%); background: url('../img/white-chevron-right.svg'); background-position: center; background-repeat: no-repeat; background-size: 10px; } .vertical-tabs .et_pb_tab { padding: 0; } .vertical-tabs .et_pb_tab_content { display: flex; flex-wrap: wrap; } @media screen and (min-width: 981px) { .nav li>.sub-menu { display: none; } } @media(max-width:767px) { .vertical-tabs ul.et_pb_tabs_controls { width: 100%; margin-bottom: 30px; margin-right: 0; } .vertical-tabs .et_pb_tabs_controls li { border-bottom: none; } .vertical-tabs .et_pb_tab { padding: 0; } .vertical-tabs .et_pb_tab_content { display: block; } } /* ── 7. Mobile styles ────────────────────────────────────────────────── */ @media (max-width: 980px) { .mega-menu-active-panel { position: relative !important; top: auto; left: auto; transform: none !important; width: 100% !important; max-width: 100%; box-shadow: none; border-radius: 0; max-height: 0; overflow: hidden; transition: max-height 0.3s ease, opacity 0.3s ease, visibility 0.3s; } .has-mega-menu.mega-open>.mega-menu-active-panel { max-height: 2000px; /* large enough for any content */ transform: none !important; } }