/* ========================================
MOBILE ONLY STYLES
add and modify varibales for mobile breakpoint
========================================= */
html.dwc-mobile {
--mobile-menu-width: min(450px, 100%);
--menu-item-font-size: 18px;
--dropdown-item-font-size: var(--menu-item-font-size);
--back-text-font-size: 16px;
--menu-item-hover-border-bg: initial;
}
/* =======================================
GENERAL NAV STYLES
========================================= */
:root {
/* ========================
GENERAL COLORS/BACKGROUND
======================== */
--primary-clr: orangered;
--header-bg: white;
--dropdown-content-bg: white;
--mobile-menu-bg: var(--header-bg);
--mobile-menu-topbar-bg: var(--header-bg);
/* ===============================
GENERAL WIDTH | HEIGHT | SPACINGS
================================== */
--mobile-menu-width: min(300px, 100%); /* mobile & offcanvas */
--multilevel-dropdown-width: 200px;
--dropdown-content-gap: 0px; /* gap between header and dropdown, add unit (e.g. 0px) */
--header-min-height: 60px;
--fullscreen-mobile-menu-top-height: 60px;
--top-offset: 40px; /* when nav is below header */
--dropdown-content-default-width: 1120px; /* preview width & default width for dropdown content */
--header-inline-padding: clamp(1.5rem, calc(0.625vw + 1.375rem), 1.875rem);
/* ==============================================
GENERAL BORDERS | SHADOWS | OVERLAY BACKDROP
================================================= */
/* dropdown content */
--dropdown-content-border-radius: 0px;
--dropdown-content-shadow: 0px 5px 15px -10px rgb(0 0 0 / 0%);
--dropdown-content-border-size: 1px; /* at least 1px */
--dropdown-content-border-color: var(--dropdown-content-bg);
/* overlay backdrop */
--nav-overlay-backdrop-blur: 0px;
--nav-overlay-backdrop-clr: rgba(0, 0, 0, 0.3);
/* sidebar nav */
--sidebar-shadow: 0px 0px 2px rgba(0, 0, 0, 0.7);
/* radius for special mobile style on overlay header*/
--mobile-menu-radius: var(--overlay-header-radius);
/* mobile & offcanvas */
--slide-out-speed: 1.3;
/* ===============================
MENU TOGGLE - Hamburger
(additional settings at line 202)
================================== */
--menu-toggle-clr: var(--menu-item-clr);
--menu-close-toggle-clr: var(--menu-item-clr);
--menu-toggle-hover-clr: var(--menu-item-hover-clr);
--open-icon-size: 40px; /* menu toggle size*/
/* ========================
MENU ITEMS
======================== */
/* DEFAULT STATE */
--menu-item-clr: #000;
--menu-item-font-size: 14px;
--menu-item-font-weight: 500;
--menu-item-bg: initial;
/* HOVER STATE */
--menu-item-hover-clr: var(--primary-clr);
--menu-item-hover-bg: initial;
--menu-item-hover-border-bg: var(--menu-item-active-border-bg);
--menu-item-hover-border-height: var(--menu-item-active-border-height);
/* ACTIVE STATE
(to exclude a link from this style,
add .dwc-exclude to its container)*/
--menu-item-active-clr: var(--menu-item-hover-clr);
--menu-item-active-bg: initial;
--menu-item-active-border-bg: var(--primary-clr);
--menu-item-active-border-height: 2px;
/* PADDING | GAP */
--menu-item-inline-padding: 1.1rem;
--menu-item-block-padding: 1rem;
--menu-items-gap: 0;
/* BORDERS | RADIUS */
--menu-item-border: 1px solid rgba(0, 0, 0, 0.1);
--menu-item-radius: 0;
/* CHEVRON (dropdown arrow) */
--chevron-size: 14px;
--chevron-clr: var(--menu-item-clr);
--chevron-hover-clr: var(--menu-item-hover-clr);
/* ========================
MULTILEVEL DROPDOWN LINKS
======================== */
/* DEFAULT STATE */
--dropdown-item-clr: var(--menu-item-clr);
--dropdown-item-font-size: var(--menu-item-font-size);
--dropdown-item-bg: initial;
--dropdown-indent-bg: rgb(0 0 0 / 5%);
--dropdown-heading-clr: var(--primary-clr);
/* HOVER STATE */
--dropdown-item-hover-clr: var(--menu-item-hover-clr);
--dropdown-item-hover-bg: white;
/* EXPANDED STATE (PARENT) - mobile */
/* when [data-submenu-reveal="expand"] */
--dropdown-expanded-clr: white;
--dropdown-expanded-bg: black;
/* PADDING | GAP | INDENT */
--dropdown-item-inline-padding: var(--menu-item-inline-padding);
--dropdown-item-block-padding: var(--menu-item-block-padding);
--dropdown-indent: 0.6rem;
--dropdown-indent-item-pad-offset: 0.5;
--dropdown-indent-line: solid 1px rgb(0 0 0 / 25%);
/* RADIUS */
--dropdown-item-radius: var(--dropdown-content-border-radius);
/* OTHERS */
--dropdown-inactive-overlay: rgb(0 0 0 / 10%);
/* ========================
MENU CTA BUTTON (ALL BUTTONS)
======================== */
/* all cta buttons max width on mobile */
--cta-width: 100%;
/* gap offset between 2 or 3 cta buttons on mobile/offcanvas/sidebar*/
--cta-gap-offset: 0;
/* gap between breakout cta and menu toggle on mobile */
--cta-breakout-gap: 20px;
/* ========================
MENU CTA BUTTON (LAST BUTTON)
======================== */
/* DEFAULT STATE */
--menu-cta-clr: white;
--menu-cta-bg: black;
--menu-cta-inline-padding: calc(var(--menu-item-inline-padding) * 1.3);
--menu-cta-block-padding: var(--menu-item-block-padding);
--menu-cta-border: none;
--menu-cta-radius: 0em;
/* HOVER STATE */
--menu-cta-hover-clr: white;
--menu-cta-hover-bg: var(--primary-clr);
/* ========================
MENU CTA BUTTON (SECOND BUTTON)
======================== */
/* DEFAULT STATE */
--menu-cta-2-clr: white;
--menu-cta-2-bg: black;
--menu-cta-2-inline-padding: var(--menu-cta-inline-padding);
--menu-cta-2-block-padding: var(--menu-cta-block-padding);
--menu-cta-2-border: var(--menu-cta-border);
--menu-cta-2-radius: var(--menu-cta-radius);
/* HOVER STATE */
--menu-cta-2-hover-clr: white;
--menu-cta-2-hover-bg: var(--primary-clr);
/* ========================
MENU CTA BUTTON (THIRD BUTTON)
======================== */
/* DEFAULT STATE */
--menu-cta-3-clr: white;
--menu-cta-3-bg: black;
--menu-cta-3-inline-padding: var(--menu-cta-inline-padding);
--menu-cta-3-block-padding: var(--menu-cta-block-padding);
--menu-cta-3-border: var(--menu-cta-border);
--menu-cta-3-radius: var(--menu-cta-radius);
/* HOVER STATE */
--menu-cta-3-hover-clr: white;
--menu-cta-3-hover-bg: var(--primary-clr);
/* ========================
MENU TOGGLE - Hamburger additional settings
======================== */
--open-icon-align: 0; /* 0 = right | auto = left */
--open-icon-horizontal-offset: 0px; /* nudge icon left or right from edge of screen*/
--open-icon-close-offset: 1.2; /* nudge icon left or right when close icon is active */
/* ======================================
ADAPTIVE HEIGHT/ STRIPE BG COLOR/BORDER
========================================= */
--adaptive-height-bg: var(--dropdown-content-bg); /*also controls stripe background*/
--adaptive-height-border: 1px solid #fff;
--adaptive-height-shadow: 0 0 30px rgb(39 50 59 / 10%);
/* ========================
STRIPE - when [data-optimize-stripe="true"]
======================== */
--stripe-border-radius: 10px;
/* ========================
MOBILE/OFFCANVAS MENU
======================== */
--mobile-menu-ttf: cubic-bezier(0.8, 0.07, 0.2, 0.95);
/* Transition timing function */
/* =================
OVERLAY HEADER
================== */
--overlay-header-width: 1400px;
--overlay-header-inset: 1rem;
--overlay-header-bg: rgb(255 255 255 / 100%);
--overlay-header-bg-active: rgb(255 255 255 / 100%);
--overlay-header-blur: 10px;
--overlay-header-radius: 1rem;
--overlay-header-shadow: 0px 2px 20px rgb(0 0 0 / 20%);
--overlay-offset-padding: clamp(5rem, 1.875rem + 12.5vw, 11.25rem);
/* ========================
BACK TEXT
======================== */
--back-text-clr: var(--menu-item-clr);
--back-text-font-size: 12px;
--back-text-font-weight: 600;
--back-text-transform: uppercase;
--back-text-bg: var(--mobile-menu-topbar-bg);
/* ========================
SIDEBAR NAV - OVERLAY MODE
======================== */
--overlay-sidebar-radius: 1rem;
--overlay-sidebar-bg: rgb(255 255 255 / 80%);
--overlay-sidebar-shadow: 0 0 30px rgb(39 50 59 / 10%);
--overlay-sidebar-inset: 12px;
/* ======== DO NOT EDIT THIS VARIABLES! ======== */
--open-icon-line-height: calc(var(--open-icon-size) * 0.1);
--icon-line-gap: calc(var(--open-icon-size) * 0.25);
--open-icon-line-variance: calc(var(--open-icon-size) * 0.25);
--iw: calc(var(--open-icon-size) - var(--open-icon-line-variance));
--aw: calc(var(--iw) - var(--open-icon-line-variance));
--caret-size: calc(var(--dropdown-content-gap) + var(--dropdown-content-border-size));
--dropdown-content-border: solid var(--dropdown-content-border-color) var(--dropdown-content-border-size);
}
/* SIDEBAR BACK TEXT BAR HEIGHT WHEN BACK TEXT OVERLAYS LOGO */
#brx-header:has([data-sidebar-back-text-on-logo="true"]) {
--top-offset: var(--mobile-menu-top-height);
}
/* ========================
STICKY HEADER STYLES
add variables to modify for sticky header
======================== */
.brx-sticky.scrolling {
/* add your sticky styles variable here */
}
/* ========================
DROPDOWN ITEM IS BUTTON OR ICON
======================== */
[data-is-button]>.brx-submenu-toggle {
--menu-item-bg: black;
--menu-item-clr: white;
--menu-item-hover-clr: white;
--menu-item-hover-bg: black;
--menu-item-radius: 50vw;
--menu-item-hover-border-height: 0;
--chevron-size: 0;
--chevron-color: white;
--menu-item-inline-padding: 1.5rem;
--menu-item-block-padding: 1rem;
/* mobile only*/
--menu-item-width: 200px;
--menu-item-border: solid 1px transparent;
--menu-item-hover-border: solid 1px transparent;
}
[data-is-icon]>.brx-submenu-toggle {
--menu-item-bg: black;
--menu-item-clr: white;
--menu-item-hover-clr: white;
--menu-item-hover-bg: black;
--icon-clr: white;
--icon-hover-clr: white;
--icon-size: 14px;
--menu-item-inline-padding: 1.1rem;
--button-max-diameter: 45px;
--menu-item-radius: 50vw;
--menu-item-border: solid 1px transparent;
--menu-item-hover-border: solid 1px transparent;
}
/* ========== NAV STYLES END ============== */
/* ======= STICKY HEADER WITH OVERLAY SPECIAL STYLES ===== */
/*===== this styles only apply when the header div attribute [data-sticky-overlay-special-style]
attribute is set to true, and sticky header is enabled =====*/
/* SVG STYLES BEFORE SCROLLING - REVERTS TO INITIAL VALUES WHEN DROPDOWN IS OPEN */
html:not(.dwc-mobile):has([data-sticky-overlay-special-style="true"]) .bricks-is-frontend .brx-sticky:not(.scrolling) .dwc-nest-header:not(:has(.brxe-dropdown.open, .brx-nav-nested-items > li:hover)) :is(path, .cls-1):not(:is(.brx-submenu-toggle path)) {
fill: white;
}
/* BRICKS SEARCH ICON STYLES BEFORE SCROLLING - REVERTS TO INITIAL VALUES WHEN DROPDOWN IS OPEN */
html:not(.dwc-mobile):has([data-sticky-overlay-special-style="true"]) .bricks-is-frontend .brx-sticky:not(.scrolling)
.dwc-nest-header:not(:has(.brxe-dropdown.open, .brx-nav-nested-items > li:hover)) :is(.brxe-search path,.brxe-search circle) {
stroke: white;
}
/* STYLES BEFORE SCROLLING - REVERTS TO INITIAL VALUES WHEN DROPDOWN IS OPEN */
html:not(.dwc-mobile):has([data-sticky-overlay-special-style="true"]) .bricks-is-frontend .brx-sticky:not(.scrolling) .dwc-nest-header:not(:has(.brxe-dropdown.open, .brx-nav-nested-items > li:hover)) {
--menu-item-clr: white;
--chevron-clr: white;
--menu-item-hover-clr: white;
--menu-item-hover-border-bg: white;
--overlay-header-bg: transparent;
--header-bg: transparent;
--overlay-header-shadow: none;
}
/* STYLES BEFORE SCROLLING */
html:not(.dwc-mobile):has([data-sticky-overlay-special-style="true"]) .bricks-is-frontend .brx-sticky:not(.scrolling) {
--link-transition: 0s;
--transition: 0.2s;
}
/* STYLES WHEN SCROLLING */
html:not(.dwc-mobile):has([data-sticky-overlay-special-style="true"]) .bricks-is-frontend .brx-sticky.scrolling {
--overlay-header-bg: white;
--header-bg: white;
}
/* STYLES WHEN SCROLLING :HOVER*/
html:not(.dwc-mobile):has([data-sticky-overlay-special-style="true"]) .bricks-is-frontend .brx-sticky.scrolling .dwc-nest-header:has(.brxe-dropdown.open) {
/* add and update variable here */
}
/* DEFAULT STYLES FOR OVERLAY HEADER */
html:not(.dwc-mobile):has([data-sticky-overlay-special-style="true"]) .bricks-is-frontend .brx-sticky {
--menu-item-hover-bg: initial;
--menu-item-bg: initial;
--overlay-header-inset: 0;
--overlay-header-width: 100%;
--overlay-header-radius: 0;
}
/* RESET STICKY HEADER TRANSITION*/
html:not(.dwc-mobile):has([data-sticky-overlay-special-style="true"]) .bricks-is-frontend #brx-header.brx-sticky .dwc-nest-header {
transition: var(--transition);
}
/* ======= END STICKY HEADER WITH OVERLAY SPECIAL STYLES ===== */
/* ======== CHANGE postid-xxxx TO THIS TEMPLATE'S ID ========= */
/*hide sidebar in builder */
:is(.brx-header-left, .brx-header-right)[data-builder-window] #brx-header:not(.postid-23338 *, :has(.dwc-sidebar) *) {
display: none !important;
}
[data-builder-window] #brx-header:has([data-offcanvas="true"]):not(.postid-23338 *, :has(.dwc-sidebar) *) :is(.dwc-nav-wrapper, .dwc-nest-menu) {
display: none !important;
}
:is(.brx-header-left, .brx-header-right)[data-builder-window] :is(#brx-content, #brx-footer):not(.postid-23338 *, :has(.dwc-sidebar) *) {
margin: unset !important;
}
[data-builder-mode]:is(.brx-header-left, .brx-header-right).postid-23338::before {
display: none
}
const MegaMenuCONFIG = {
// Minimum width threshold for desktop behavior,
// should be 1px larger than mobile (max-width) breakpoint in the "MEDIA QUERY" CSS code block
//IMPORTANT: Also change min-width in the "MEGA MENU Codes" CSS code block to match this value
minWidth: 1201,
// automatically open the current menu panel/dropdown (mobile, offcanvas & sidebar)
menuAutoExpansion: true,
swipeToClose: true,
// show or hide swipe to close hint
toolTip: true,
// adaptive height animation
adaptiveHeight: 0,
// Stripe menu animation
stripeStyle: 0,
headerSelector: '#brx-header',
nestMenuSelector: '.dwc-nest-menu',
closeNavOnClick: 1,
closeOnHashClickOnly: 0,
closeOnMobileOnly: 0, // Set to false to enable close on both mobile and desktop
// Selectors (e.g. .class-name, #id_name, tag-name, .complex > selectors etc.) that should NOT close the navigation when clicked
// Separate multiple selectors with a comma e.g. '.class-one, #id_one, tag'
closeNavOnClickExclude: '.js-wpml-ls-item-toggle',
breakinToNavList: 1, /*mobile only - places the breakin container as an li isnide the nav list (see docs for more info) */
// New properties for dropdown positioning
shiftFactor: 1, // Factor to shift overflow
minOverflow: 10, // Minimum overflow threshold
reinitializeOnURLchange: true, //when using page transition API
//move backdrop overlay element Inside header
//placing it inside header will allow backdrop overlay/blur to affect header, but won't work when data-overlay-header is enabled.
overlayInsideHeader:0
};
// Centered Logo Configuration
const CenteredLogoCONFIG = {
enable: 0,
centerGuide: 1,
forceCenteredLogo: 1,
// move the navigation left
// or right using negative or positive value
centerNudge: 0,
// allow centered logo when no. of
// menu items are odd e.g. 5 or 7
allowOddItems: 1,
// place logo 'before' or 'after' the odd menu item
roundOffFactor: 'before'
};/* DO NOT ADD ANY CODE IN THIS CODE BLOCK */
/*MOBILE MENU/OFFCANVAS/SIDEBAR STYLES*/
@media only screen and (max-width: 1200px) {
.bricks-is-frontend .dwc-nav-wrapper:not(.show-nav .dwc-nav-wrapper){
display: none;
}
[data-breakinto].dwc-tabbed-nav-container:not(.brxe-dropdown .dwc-tabbed-nav-container){
display: none;
}
.desktop-centered header:has([data-fix-centered-logo-fouc="true"]) {
opacity: 0;
}
.dwc-nest-menu__logo[data-breakout-link] {
margin-inline-end: auto
}
/*mobile logo*/
.dwc-nest-menu__mobile-logo> :is(svg, img) {
block-size: 100%;
inline-size: auto;
}
.dwc-nest-menu__mobile-logo:not([data-show-mobile-logo="true"] .dwc-nest-menu__mobile-logo) {
display: none;
}
[data-sidebar-back-text-on-logo="true"] .dwc-nest-menu__mobile-logo {
--dwc-nest-header-height: var(--mobile-menu-top-height);
}
/*special mobile menu styles for overlay header UPDATED */
.dwc-mobile .bricks-is-frontend [data-overlay-header-mobile="true"] .dwc-nest-menu[data-slide-in-direction="top"][data-match-overlay-header-width="true"] .brx-nav-nested-items {
transform: translateY(-100%);
}
.dwc-mobile .bricks-is-frontend [data-overlay-header-mobile="true"] .dwc-nest-menu[data-slide-in-direction="top"][data-match-overlay-header-width="true"].brx-open .brx-nav-nested-items {
transform: translateY(0%);
}
/* .dwc-mobile .bricks-is-frontend [data-overlay-header-mobile="true"] .dwc-nest-menu[data-slide-in-direction="top"][data-match-overlay-header-width="true"] .brx-nav-nested-items {
transition: 0.45s;
transition-timing-function: var(--mobile-menu-ttf);
inset-block-start: calc(min(var(--overlay-header-radius), 2em) * -1);
} */
.dwc-mobile .bricks-is-frontend [data-overlay-header-mobile="true"] .dwc-nest-menu[data-slide-in-direction="top"][data-match-overlay-header-width="true"] .brx-nav-nested-items {
transition: 0.45s;
transition-timing-function: var(--mobile-menu-ttf);
inset-block-start: calc(var(--dwc-nest-header-height) * -1);
}
.dwc-mobile .bricks-is-frontend [data-overlay-header-mobile="true"] .dwc-nest-menu[data-slide-in-direction="top"][data-submenu-reveal="expand"][data-match-overlay-header-width="true"] .brx-nav-nested-items {
/* inset-block-start: calc(var(--dwc-nest-header-height) / -2); */
/* inset-block-start: -40px;*/
}
/* .dwc-mobile [data-overlay-header-mobile="true"] .dwc-nest-menu[data-slide-in-direction="top"][data-match-overlay-header-width="true"] .brx-nav-nested-items {
--mobile-menu-width: 100% !important;
inline-size: var(--mobile-menu-width);
border-bottom-left-radius: min(var(--mobile-menu-radius), 2em);
border-bottom-right-radius: min(var(--mobile-menu-radius), 2em);
padding-block-start: 40px;
overflow-x: hidden;
} */
.dwc-mobile [data-overlay-header-mobile="true"] .dwc-nest-menu[data-slide-in-direction="top"][data-match-overlay-header-width="true"] .brx-nav-nested-items {
--mobile-menu-width: 100% !important;
inline-size: var(--mobile-menu-width);
border-bottom-left-radius: min(var(--mobile-menu-radius), 2em);
border-bottom-right-radius: min(var(--mobile-menu-radius), 2em);
padding-block-start: calc(var(--dwc-nest-header-height) + 0px);
overflow-x: hidden;
}
.dwc-mobile [data-overlay-header-mobile="true"] .dwc-nest-menu[data-slide-in-direction="top"][data-match-overlay-header-width="true"]:not([data-submenu-reveal="expand"]) .brx-nav-nested-items {
overflow-y:hidden;
}
.dwc-mobile [data-overlay-header-mobile="true"] .dwc-nest-menu[data-slide-in-direction="top"][data-match-overlay-header-width="true"][data-submenu-reveal="expand"] .brx-nav-nested-items {
max-block-size: fit-content;
}
.dwc-mobile .bricks-is-frontend [data-overlay-header-mobile="true"] .dwc-nest-menu[data-slide-in-direction="top"][data-match-overlay-header-width="true"] .dwc-nav-wrapper {
transform: translateY(0%);
border-radius: min(var(--overlay-header-radius), 2em);
overflow: hidden !important;
inset-block-start: var(--overlay-header-inset);
}
.dwc-mobile .bricks-is-frontend [data-overlay-header-mobile="true"] .dwc-nest-menu[data-slide-in-direction="top"][data-match-overlay-header-width="true"].brx-open .dwc-nav-wrapper {
transform: translateY(0%);
}
.dwc-mobile .bricks-is-frontend [data-overlay-header-mobile="true"] .dwc-nest-menu[data-slide-in-direction="top"][data-match-overlay-header-width="true"] :is(.dwc-nav-wrapper) {
--mobile-menu-width: min(calc(100% - (var(--overlay-header-inset) * 2)), 100%) !important;
inline-size: var(--mobile-menu-width) !important;
inset-inline-end: var(--overlay-header-inset) !important;
block-size: calc(100dvb - (var(--overlay-header-inset) * 2));
}
.dwc-mobile [data-overlay-header-mobile="true"] .dwc-nest-menu.brxe-nav-nested[data-slide-in-direction="top"][data-match-overlay-header-width="true"] .brxe-dropdown:not(.open) .brx-dropdown-content:not([data-builder-mode] .brx-dropdown-content) {
min-block-size: 0;
}
.dwc-mobile [data-overlay-header-mobile="true"].dwc-nest-header:has(.dwc-nest-menu[data-slide-in-direction="top"][data-match-overlay-header-width="true"]) {
padding-inline: initial
}
.dwc-mobile [data-overlay-header-mobile="true"] .dwc-nest-menu[data-slide-in-direction="top"][data-match-overlay-header-width="true"] .dwc-nest-menu-top {
border-block-end: initial;
min-block-size: var(--dwc-header-div-height);
}
/* .dwc-mobile [data-overlay-header-mobile="true"] .dwc-nest-menu[data-slide-in-direction="top"][data-match-overlay-header-width="true"][data-submenu-reveal="slide"] .brx-has-megamenu.brxe-dropdown .brx-dropdown-content:not([data-hide-close-bar="true"] ul, [data-submenu-reveal="expand"].brx-has-megamenu ul, :has(.dwc-tabbed-nav-list__li.active)) {
inset-block-start: min(calc(var(--overlay-header-radius) + var(--wp-admin--admin-bar--height, 0px)), calc(2em + var(--wp-admin--admin-bar--height, 0px))) !important;
padding-block-start: 50px;
} */
.dwc-mobile [data-overlay-header-mobile="true"] .dwc-nest-menu[data-slide-in-direction="top"][data-match-overlay-header-width="true"][data-submenu-reveal="slide"] .brx-has-megamenu.brxe-dropdown .brx-dropdown-content:not([data-hide-close-bar="true"] ul, [data-submenu-reveal="expand"].brx-has-megamenu ul, :has(.dwc-tabbed-nav-list__li.active)) {
inset-block-start: calc(var(--dwc-nest-header-height) + var(--wp-admin--admin-bar--height, 0px)) !important;
padding-block-start: 50px;
}
.dwc-mobile [data-overlay-header-mobile="true"] .dwc-nest-menu[data-slide-in-direction="top"][data-match-overlay-header-width="true"][data-submenu-reveal="slide"] .brxe-dropdown:not(.brx-has-megamenu, [data-submenu-reveal="expand"]) .brx-dropdown-content:not([data-hide-close-bar="true"] ul, :has(.dwc-tabbed-nav-list__li.active)), .bricks-is-frontend [data-submenu-reveal="slide"].brxe-dropdown .brx-dropdown-content:not([data-hide-close-bar="true"] ul, :has(.dwc-tabbed-nav-list__li.active)) {
inset-block-start: calc(var(--dwc-nest-header-height) + var(--wp-admin--admin-bar--height, 0px)) !important;
padding-block-start: 50px;
}
/* .dwc-mobile [data-overlay-header-mobile="true"] .dwc-nest-menu[data-slide-in-direction="top"][data-match-overlay-header-width="true"][data-submenu-reveal="slide"] .brxe-dropdown:not(.brx-has-megamenu, [data-submenu-reveal="expand"]) .brx-dropdown-content:not([data-hide-close-bar="true"] ul, :has(.dwc-tabbed-nav-list__li.active)),
.bricks-is-frontend [data-submenu-reveal="slide"].brxe-dropdown .brx-dropdown-content:not([data-hide-close-bar="true"] ul, :has(.dwc-tabbed-nav-list__li.active)) {
inset-block-start: min(calc(var(--overlay-header-radius) + var(--wp-admin--admin-bar--height, 0px)), calc(2em + var(--wp-admin--admin-bar--height, 0px))) !important;
padding-block-start: 50px;
} */
.bricks-is-frontend [data-overlay-header-mobile="true"] .dwc-nest-menu[data-slide-in-direction="top"][data-match-overlay-header-width="true"][data-submenu-reveal="slide"] .open.active>.brx-submenu-toggle button:not([data-hide-close-bar="true"] button, [data-submenu-reveal="expand"] button), .bricks-is-frontend [data-submenu-reveal="slide"].open.active>.brx-submenu-toggle button:not([data-hide-close-bar="true"] button, [data-submenu-reveal="expand"] button) {
inset-block-start: calc(max(var(--dwc-nest-header-height) - var(--dwc-header-div-height), var(--dwc-header-div-height)));
}
/* .dwc-mobile [data-overlay-header-mobile="true"] .dwc-nest-menu[data-submenu-reveal="slide"][data-slide-in-direction="top"][data-match-overlay-header-width="true"] .open.active>.brx-submenu-toggle>button:not([data-hide-close-bar="true"] button, [data-submenu-reveal="expand"] button, .open.active:has(.open.active)>.brx-submenu-toggle > button) {
z-index: 9999;
min-inline-size: 100%;
min-block-size: 50px;
inset-block-start: min(calc(var(--overlay-header-radius) + var(--wp-admin--admin-bar--height, 0px)), calc(2em + var(--wp-admin--admin-bar--height, 0px)));
} */
.dwc-mobile [data-overlay-header-mobile="true"] .dwc-nest-menu[data-submenu-reveal="slide"][data-slide-in-direction="top"][data-match-overlay-header-width="true"] .open.active>.brx-submenu-toggle>button:not([data-hide-close-bar="true"] button, [data-submenu-reveal="expand"] button, .open.active:has(.open.active)>.brx-submenu-toggle > button) {
z-index: 9999;
min-inline-size: 100%;
min-block-size: 50px;
inset-block-start: calc(var(--dwc-nest-header-height) + var(--wp-admin--admin-bar--height, 0px)) !important;
}
.dwc-mobile [data-overlay-header-mobile="true"] .dwc-nest-menu[data-submenu-reveal="slide"][data-slide-in-direction="top"][data-match-overlay-header-width="true"] .open.active>.brx-submenu-toggle>button:not([data-submenu-reveal="expand"] button) {
inset-block-start: calc(var(--dwc-nest-header-height) + var(--wp-admin--admin-bar--height, 0px)) !important;
}
.dwc-mobile [data-overlay-header-mobile="true"] .dwc-nest-menu[data-slide-in-direction="top"][data-match-overlay-header-width="true"][data-submenu-reveal="slide"] .brxe-dropdown:not(:is([data-submenu-reveal="expand"], .brx-has-megamenu)) .brx-dropdown-content:not([data-submenu-reveal="expand"] *),
.bricks-is-frontend [data-submenu-reveal="slide"].brxe-dropdown:not(.brx-has-megamenu) .brx-dropdown-content {
min-block-size: 100%;
}
.dwc-mobile [data-overlay-header-mobile="true"] .dwc-nest-menu[data-slide-in-direction="top"][data-match-overlay-header-width="true"] .brxe-dropdown:not(.brx-has-megamenu) .brx-dropdown-content{
min-inline-size: 0px !important;
}
.dwc-mobile .bricks-is-frontend [data-overlay-header-mobile="true"] .dwc-nest-menu[data-slide-in-direction="top"][data-match-overlay-header-width="true"][data-submenu-reveal="slide"] .brxe-dropdown.brx-has-megamenu:not(:is([data-submenu-reveal="expand"])) .brx-dropdown-content:not([data-submenu-reveal="expand"] .brx-dropdown-content)>li {
padding-block-end: 40px;
}
.dwc-mobile .dwc-nest-header[data-overlay-header-mobile="true"]>div {
padding-inline: var(--menu-item-inline-padding);
border-radius: var(--overlay-header-radius);
}
/* special style UPDATED ends*/
/* .dwc-nest-menu .brx-nav-nested-items {
inline-size: var(--mobile-menu-width);
}
*/
/* unset default values */
[data-offcanvas="true"] .open:has(.open) .brx-dropdown-content::before {
display: none !important;
}
[data-offcanvas="true"] .brx-nav-nested-items {
flex-wrap: nowrap;
}
.dwc-nest-menu .brx-nav-nested-items {
gap: 0;
}
.dwc-nest-menu.brxe-nav-nested .brxe-dropdown:not(.open) .brx-dropdown-content:not([data-builder-mode] .brx-dropdown-content) {
display: flex;
visibility: hidden;
}
[data-overlay-header="true"] .dwc-nest-menu.brxe-nav-nested .brxe-dropdown:not(.open) .brx-dropdown-content:not([data-builder-mode] .brx-dropdown-content),
.dwc-nest-menu.brxe-nav-nested .brxe-dropdown:not(.open) .brx-dropdown-content:not([data-builder-mode] .brx-dropdown-content) {
min-inline-size: 0 !important;
}
.dwc-nest-menu.brxe-nav-nested.brx-open .brxe-dropdown>.brx-dropdown-content {
overflow-y: auto;
}
.dwc-nest-menu .brx-nav-nested-items {
flex-direction: column !important;
flex-wrap: nowrap;
}
.dwc-nest-toggle--open.brxe-toggle {
display: flex !important;
place-items: center;
}
.dwc-nest-menu .brx-nav-nested-items {
position: relative !Important;
background: var(--mobile-menu-bg) !important;
align-items: stretch;
}
.dwc-nest-header:not([data-overlay-header-mobile="true"]:has([data-slide-in-direction="top"])) .dwc-nest-menu .brx-nav-nested-items {
flex-grow: 1;
}
[data-overlay-header-mobile="true"] .dwc-nest-menu.dwc-nest-menu[data-submenu-reveal="slide"] .brx-nav-nested-items:has(li.open.active) {
flex-grow: 1;
}
.dwc-nest-menu .brx-nav-nested-items:not(.brx-open .brx-nav-nested-items) {
transform: unset
}
.dwc-nest-menu .brxe-dropdown:not(.brx-has-megamenu)>.brx-dropdown-content {
transform: translateZ(0);
transform: unset;
}
.dwc-nest-menu.brxe-nav-nested.brx-closing .brx-nav-nested-items {
opacity: unset !important;
visibility: unset !important;
}
.dwc-nest-menu.brxe-nav-nested .brx-nav-nested-items {
overflow-y: auto;
scrollbar-width: none;
justify-content: flex-start !important;
}
/* set new values */
.dwc-nav-wrapper {
position: fixed;
inset-block: 0;
inset-inline-end: 0;
transform: translateX(100%);
background-color: var(--mobile-menu-bg);
transition: 0.45s;
transition-timing-function: var(--mobile-menu-ttf);
z-index: 1;
flex-wrap: nowrap;
inline-size: var(--mobile-menu-width);
visibility: hidden;
}
.brx-open .dwc-nav-wrapper {
transform: translateX(0%);
visibility: visible;
}
.dwc-nest-menu-top {
background-color: var(--mobile-menu-topbar-bg);
border-block-end: var(--menu-item-border);
min-block-size: var(--dwc-nest-header-height);
display: flex;
flex-direction: row;
align-items: center;
}
.dwc-nest-menu .brxe-dropdown.brx-has-megamenu,
.dwc-nest-menu .menu-item>a {
border-block-end: var(--menu-item-border);
}
.dwc-nest-menu .brxe-dropdown:not(.brx-has-megamenu):not(.open, :has(.open)),
.dwc-nest-menu .brxe-dropdown:not(.brx-has-megamenu)>.brxe-dropdown:not(.open, :has(.open)) {
border-block-end: var(--menu-item-border);
}
/* MENU CTA (LAST BUTTON) */
:is([data-last-item-is-button="true"], [data-last-item-is-button="true-2"], [data-last-item-is-button="true-3"]).dwc-nest-menu .brx-nav-nested-items>.menu-item:last-of-type,
:is([data-last-item-is-button="true-2"], [data-last-item-is-button="true-3"]).dwc-nest-menu .brx-nav-nested-items>.menu-item:nth-last-of-type(-n+2),
[data-last-item-is-button="true-3"].dwc-nest-menu .brx-nav-nested-items>.menu-item:nth-last-of-type(-n+3) {
padding-inline: var(--menu-item-inline-padding) !important;
padding-block: var(--menu-item-block-padding) !important;
inline-size: 100%;
margin-inline: auto;
max-inline-size: var(--cta-width);
}
[data-last-item-is-button="true-2"].dwc-nest-menu .brx-nav-nested-items>.menu-item:nth-last-of-type(-n+2)+li {
padding-block-start: var(--cta-gap-offset) !important
}
[data-last-item-is-button="true-3"].dwc-nest-menu .brx-nav-nested-items>.menu-item:nth-last-of-type(-n+3)+li {
padding-block-start: var(--cta-gap-offset) !important
}
:is([data-last-item-is-button="true"], [data-last-item-is-button="true-2"], [data-last-item-is-button="true-3"]).dwc-nest-menu .brx-nav-nested-items>.menu-item:last-of-type a,
:is([data-last-item-is-button="true-2"], [data-last-item-is-button="true-3"]).dwc-nest-menu .brx-nav-nested-items>.menu-item:nth-last-of-type(-n+2) a,
[data-last-item-is-button="true-3"].dwc-nest-menu .brx-nav-nested-items>.menu-item:nth-last-of-type(-n+3) a {
justify-content: center;
}
/* MOBILE MENU SLIDE IN DIRECTION */
.bricks-is-frontend [data-slide-in-direction="left"] .dwc-nav-wrapper {
transform: translateX(-100%);
inset-inline-start: 0;
overflow: hidden;
}
/* RTL */
[dir="rtl"] .bricks-is-frontend [data-slide-in-direction="left"] .dwc-nav-wrapper {
inset-inline-start: initial;
inset-inline-end: 0;
}
[dir="rtl"] .bricks-is-frontend [data-slide-in-direction="left"] .dwc-nav-wrapper {
inset-inline-start: initial;
inset-inline-end: 0;
}
[dir="rtl"] .bricks-is-frontend [data-submenu-reveal="slide"][data-slide-in-direction="left"] .open.active>.brx-submenu-toggle button:not([data-hide-close-bar="true"] button, [data-submenu-reveal="expand"] button),
[dir="rtl"] .bricks-is-frontend .dwc-nest-menu[data-slide-in-direction="left"] [data-submenu-reveal="slide"].open.active>.brx-submenu-toggle button:not([data-hide-close-bar="true"] button, [data-submenu-reveal="expand"] button) {
inset-inline-start: initial;
inset-inline-end: 0;
justify-content: flex-end;
}
.bricks-is-frontend [data-slide-in-direction="left"].brx-open .dwc-nav-wrapper {
transform: translateX(0);
}
/* SLIDE IN TOP */
.bricks-is-frontend .dwc-nest-menu[data-slide-in-direction="top"].brx-open .dwc-nav-wrapper,
.bricks-is-frontend .dwc-nest-menu[data-slide-in-direction="left top"].brx-open .dwc-nav-wrapper {
transform: translateY(0%);
}
.bricks-is-frontend .dwc-nest-menu[data-slide-in-direction="top"] .dwc-nav-wrapper,
.bricks-is-frontend .dwc-nest-menu[data-slide-in-direction="left top"] .dwc-nav-wrapper {
transform: translateY(-100%);
}
/* SLIDE IN BOTTOM */
.bricks-is-frontend .dwc-nest-menu[data-slide-in-direction="bottom"].brx-open .dwc-nav-wrapper,
.bricks-is-frontend .dwc-nest-menu[data-slide-in-direction="left bottom"].brx-open .dwc-nav-wrapper {
transform: translateY(0%);
}
.bricks-is-frontend .dwc-nest-menu[data-slide-in-direction="bottom"] .dwc-nav-wrapper,
.bricks-is-frontend .dwc-nest-menu[data-slide-in-direction="left bottom"] .dwc-nav-wrapper {
transform: translateY(100%);
}
.bricks-is-frontend [data-slide-in-direction="left bottom"] .dwc-nav-wrapper,
.bricks-is-frontend [data-slide-in-direction="left top"] .dwc-nav-wrapper {
inset-inline-start: 0;
overflow: hidden;
}
.dwc-nest-menu.brxe-nav-nested .brxe-dropdown>.brx-dropdown-content::-webkit-scrollbar-track,
.dwc-nest-menu .brx-nav-nested-items::-webkit-scrollbar-track {
border-radius: 50vw;
background-color: transparent;
}
.dwc-nest-menu.brxe-nav-nested .brxe-dropdown>.brx-dropdown-content::-webkit-scrollbar,
.dwc-nest-menu .brx-nav-nested-items::-webkit-scrollbar {
inline-size: 0px;
background-color: transparent;
}
.dwc-nest-menu.brxe-nav-nested .brxe-dropdown>.brx-dropdown-content::-webkit-scrollbar-thumb,
.dwc-nest-menu .brx-nav-nested-items::-webkit-scrollbar-thumb {
border-radius: 50vw;
background-color: #55565d;
}
/* SCROLLBARS END */
/* SLIDE IN DIRECTION - DROPDOWN ITEMS*/
.bricks-is-frontend [data-submenu-reveal="slide"].dwc-nest-menu.brxe-nav-nested .brxe-dropdown:not(:is([data-submenu-reveal="expand"])) .brx-dropdown-content:not([data-submenu-reveal="expand"] *),
.bricks-is-frontend [data-submenu-reveal="slide"].brxe-dropdown .brx-dropdown-content {
max-block-size: unset;
position: absolute !important;
opacity: 1;
transition-duration: 0.45s !important;
transition-timing-function: var(--mobile-menu-ttf);
padding-block-end: 50px;
}
.bricks-is-frontend .dwc-nest-menu [data-submenu-reveal="expand"].brx-has-megamenu>ul {
position: static !important;
padding-block-end: 0 !important;
transition: 0.3s ease-in-out !important;
}
.bricks-is-frontend [data-submenu-reveal="slide"].dwc-nest-menu.brxe-nav-nested .brx-has-megamenu.brxe-dropdown .brx-dropdown-content:not([data-submenu-reveal="expand"].brx-has-megamenu ul) {
inset: 0 !important;
transform: translateX(100%);
transition-property: opacity, transform, visibility;
min-block-size: calc(100dvb - var(--dwc-nest-header-height));
position: fixed !important;
}
.bricks-is-frontend [data-submenu-reveal="slide"].dwc-nest-menu.brxe-nav-nested .brx-has-megamenu.brxe-dropdown .brx-dropdown-content:not([data-hide-close-bar="true"] ul, [data-submenu-reveal="expand"].brx-has-megamenu ul) {
inset-block-start: var(--dwc-nest-header-height) !important;
}
.bricks-is-frontend :is([data-slide-in-direction="left"], [data-slide-in-direction="left bottom"], [data-slide-in-direction="left top"])[data-submenu-reveal="slide"].dwc-nest-menu.brxe-nav-nested .brx-has-megamenu.brxe-dropdown .brx-dropdown-content:not([data-submenu-reveal="expand"].brx-has-megamenu ul),
.bricks-is-frontend.brx-header-left [data-submenu-reveal="slide"].dwc-nest-menu.brxe-nav-nested .brx-has-megamenu.brxe-dropdown .brx-dropdown-content:not([data-submenu-reveal="expand"].brx-has-megamenu ul) {
transform: translateX(-100%);
}
.bricks-is-frontend :is([data-slide-in-direction="left"], [data-slide-in-direction="left bottom"], [data-slide-in-direction="left top"], [data-submenu-reveal="slide"]).dwc-nest-menu.brx-open .brx-has-megamenu.brxe-dropdown.open>.brx-dropdown-content:not([data-submenu-reveal="expand"].brx-has-megamenu ul) {
transform: translateX(0) !important;
}
html:not(.dwc-mobile) .bricks-is-frontend:is(.brx-header-left, .brx-header-right) :is([data-slide-in-direction="left"], [data-slide-in-direction="left bottom"], [data-slide-in-direction="left top"], [data-submenu-reveal="slide"]).dwc-nest-menu .brx-has-megamenu.brxe-dropdown.open>.brx-dropdown-content:not([data-submenu-reveal="expand"].brx-has-megamenu ul) {
transform: translateX(0) !important;
visibility: visible;
}
/* SLIDE IN - mult-level DROPDOWN ITEMS*/
.bricks-is-frontend [data-submenu-reveal="slide"].dwc-nest-menu.brxe-nav-nested .brxe-dropdown:not(:is([data-submenu-reveal="expand"], .brx-has-megamenu)) .brx-dropdown-content:not([data-submenu-reveal="expand"] *),
.bricks-is-frontend [data-submenu-reveal="slide"].brxe-dropdown:not(.brx-has-megamenu) .brx-dropdown-content {
inset-block: 0 !important;
inline-size: 100%;
transition-property: inset-inline-start, visibility, opacity;
inset-inline-start: 100% !important;
min-block-size: 100dvb;
position: fixed !important;
}
.bricks-is-frontend :is([data-slide-in-direction="left"], [data-slide-in-direction="left bottom"], [data-slide-in-direction="left top"])[data-submenu-reveal="slide"].dwc-nest-menu.brxe-nav-nested .brxe-dropdown:not(.brx-has-megamenu, .open, [data-submenu-reveal="expand"]) .brx-dropdown-content:not([dir="rtl"] .brx-dropdown-content),
.bricks-is-frontend :is([data-slide-in-direction="left"], [data-slide-in-direction="left bottom"], [data-slide-in-direction="left top"]) [data-submenu-reveal="slide"].brxe-dropdown:not(.brx-has-megamenu, .open) .brx-dropdown-content:not([dir="rtl"] .brx-dropdown-content),
.bricks-is-frontend.brx-header-left [data-submenu-reveal="slide"].dwc-nest-menu.brxe-nav-nested .brxe-dropdown:not(.brx-has-megamenu, [data-submenu-reveal="expand"], .open) .brx-dropdown-content:not([dir="rtl"] .brx-dropdown-content) {
inset-inline-start: -100% !important;
}
/* RTL */
[dir="rtl"] .brx-header-right.bricks-is-frontend [data-submenu-reveal="slide"].dwc-nest-menu.brxe-nav-nested:not([data-slide-in-direction="left"], [data-slide-in-direction="left bottom"], [data-slide-in-direction="left top"]) .brxe-dropdown:not(.brx-has-megamenu, [data-submenu-reveal="expand"]) .brx-dropdown-content,
[dir="rtl"] .brx-header-right.bricks-is-frontend .dwc-nest-menu:not([data-slide-in-direction="left"], [data-slide-in-direction="left bottom"], [data-slide-in-direction="left top"]) [data-submenu-reveal="slide"].brxe-dropdown:not(.brx-has-megamenu) .brx-dropdown-content,
[dir="rtl"] .bricks-is-frontend [data-submenu-reveal="slide"].dwc-nest-menu.brxe-nav-nested:not([data-slide-in-direction="left"], [data-slide-in-direction="left bottom"], [data-slide-in-direction="left top"]) .brxe-dropdown:not(.brx-has-megamenu, [data-submenu-reveal="expand"], .open) .brx-dropdown-content,
[dir="rtl"] .bricks-is-frontend .dwc-nest-menu:not([data-slide-in-direction="left"], [data-slide-in-direction="left bottom"], [data-slide-in-direction="left top"]) [data-submenu-reveal="slide"].brxe-dropdown:not(.brx-has-megamenu, .open) .brx-dropdown-content {
inset-inline-start: -100% !important;
}
[dir="rtl"] .brx-header-left.bricks-is-frontend :is([data-slide-in-direction="left"], [data-slide-in-direction="left bottom"], [data-slide-in-direction="left top"])[data-submenu-reveal="slide"].dwc-nest-menu.brxe-nav-nested .brxe-dropdown:not(.brx-has-megamenu, .open) .brx-dropdown-content,
[dir="rtl"] .brx-header-left.bricks-is-frontend :is([data-slide-in-direction="left"], [data-slide-in-direction="left bottom"], [data-slide-in-direction="left top"]) [data-submenu-reveal="slide"].brxe-dropdown:not(.brx-has-megamenu, .open) .brx-dropdown-content,
[dir="rtl"] .brx-header-left.bricks-is-frontend [data-submenu-reveal="slide"].dwc-nest-menu.brxe-nav-nested .brxe-dropdown:not(.brx-has-megamenu, [data-submenu-reveal="expand"], .open) .brx-dropdown-content {
inset-inline-start: 100% !important;
}
.bricks-is-frontend [data-submenu-reveal="slide"].dwc-nest-menu.brxe-nav-nested .brxe-dropdown:not(.brx-has-megamenu, [data-submenu-reveal="expand"]) .brx-dropdown-content:not([data-hide-close-bar="true"] ul),
.bricks-is-frontend [data-submenu-reveal="slide"].brxe-dropdown .brx-dropdown-content:not([data-hide-close-bar="true"] ul) {
inset-block-start: var(--dwc-nest-header-height) !important;
}
.bricks-is-frontend [data-submenu-reveal="slide"].brxe-nav-nested.brx-open .brxe-dropdown.open:not(.brx-has-megamenu, [data-submenu-reveal="expand"])>.brx-dropdown-content,
.bricks-is-frontend .brx-open [data-submenu-reveal="slide"].brxe-dropdown.open>.brx-dropdown-content,
.bricks-is-frontend .brx-open [data-submenu-reveal="slide"].brxe-dropdown.open>.brx-dropdown-content .open>.brx-dropdown-content {
inset-inline-start: 0 !important;
}
html:not(.dwc-mobile) .bricks-is-frontend:is(.brx-header-left, .brx-header-right) [data-submenu-reveal="slide"].brxe-nav-nested .brxe-dropdown.open:not(.brx-has-megamenu, [data-submenu-reveal="expand"])>.brx-dropdown-content,
html:not(.dwc-mobile) .bricks-is-frontend:is(.brx-header-left, .brx-header-right) [data-submenu-reveal="slide"].brxe-dropdown.open>.brx-dropdown-content,
html:not(.dwc-mobile) .bricks-is-frontend:is(.brx-header-left, .brx-header-right) [data-submenu-reveal="slide"].brxe-dropdown.open>.brx-dropdown-content .open>.brx-dropdown-content {
inset-inline-start: 0 !important;
visibility: visible;
}
.bricks-is-frontend .dwc-nest-menu .brxe-dropdown {
position: static;
}
.bricks-is-frontend [data-submenu-reveal="slide"] .brx-submenu-toggle button svg:not([data-submenu-reveal="expand"] svg) {
transform: rotate(270deg)
}
/* EXPAND - mult-level DROPDOWN ITEMS*/
.bricks-is-frontend .dwc-nest-menu .brxe-dropdown[data-submenu-reveal="expand"]:not(.brx-has-megamenu)>.brx-dropdown-content>li,
.bricks-is-frontend .dwc-nest-menu .brxe-dropdown[data-submenu-reveal="expand"]:not(.brx-has-megamenu)>.brx-dropdown-content>.brxe-dropdown .brx-dropdown-content>li,
.bricks-is-frontend .dwc-nest-menu[data-submenu-reveal="expand"] .brxe-dropdown:not(.brx-has-megamenu, .open) .brx-dropdown-content>.menu-item:not([data-submenu-reveal="slide"] li) {
transform: translateY(-100px);
opacity: 0;
transition: transform 0s, opacity 0s
}
.bricks-is-frontend .dwc-nest-menu .brxe-dropdown.open[data-submenu-reveal="expand"]:not(.brx-has-megamenu)>.brx-dropdown-content>li,
.bricks-is-frontend .dwc-nest-menu .brxe-dropdown.open[data-submenu-reveal="expand"]:not(.brx-has-megamenu)>.brx-dropdown-content>.brxe-dropdown.open .brx-dropdown-content>li,
.bricks-is-frontend .dwc-nest-menu[data-submenu-reveal="expand"] .brxe-dropdown:not(.brx-has-megamenu).open>.brx-dropdown-content>.menu-item {
transform: translateY(0);
opacity: 1 !important;
transition: transform 0.4s, opacity 0.4s
}
/* MOBILE LOGO */
.dwc-nest-menu:not([data-submenu-reveal="expand"]):has(.brxe-dropdown.open) .dwc-nest-menu__mobile-logo {
opacity: 0;
transition: 0s;
}
.dwc-nest-menu__mobile-logo {
opacity: 1;
transition: opacity 0.45s 0.15s var(--mobile-menu-ttf);
}
.dwc-nest-menu__mobile-logo:not(.brx-header-left *, .brx-header-right *) {
block-size: var(--dwc-nest-header-height);
max-block-size: var(--dwc-header-div-height);
}
.brx-header-left .dwc-nest-menu__mobile-logo,
.brx-header-right .dwc-nest-menu__mobile-logo {
min-block-size: var(--top-offset);
}
:where(.brx-header-left, .brx-header-right) #brx-header:has([data-sidebar-back-text-on-logo="true"]) .dwc-nest-menu__logo {
display: none;
}
:where(.brx-header-left, .brx-header-right) #brx-header:has([data-sidebar-back-text-on-logo="true"]) .dwc-nest-menu__mobile-logo {
display: flex;
}
/* DROPDOWN INDENT */
.dwc-nest-menu[data-submenu-reveal="expand"] .brxe-dropdown:not(.brx-has-megamenu)>.brx-dropdown-content:not(.brxe-dropdown[data-submenu-reveal="slide"] .brx-dropdown-content),
.dwc-nest-menu .brxe-dropdown[data-submenu-reveal="expand"]:not(.brx-has-megamenu) .brx-dropdown-content {
padding-inline-start: var(--dropdown-indent) !important;
padding-inline-end: calc(var(--dropdown-indent) * 0) !important;
border-left: var(--dropdown-indent-line);
background-color: var(--dropdown-indent-bg);
min-inline-size: 0px !important;
}
.dwc-nest-menu[data-submenu-reveal="expand"] .brxe-dropdown:not(.brx-has-megamenu)>.brx-dropdown-content:not(.brxe-dropdown[data-submenu-reveal="slide"] *)>*> :is(a, .brx-submenu-toggle),
.dwc-nest-menu .brxe-dropdown[data-submenu-reveal="expand"]:not(.brx-has-megamenu)>.brx-dropdown-content>*> :is(a, .brx-submenu-toggle) {
padding-inline-start: calc(var(--dropdown-item-inline-padding) * var(--dropdown-indent-item-pad-offset)) !important;
}
.dwc-nest-menu[data-submenu-reveal="expand"] .brxe-dropdown.open>.brx-submenu-toggle,
.dwc-nest-menu [data-submenu-reveal="expand"].brxe-dropdown.open>.brx-submenu-toggle {
background-color: var(--dropdown-expanded-bg);
color: var(--dropdown-expanded-clr);
}
.dwc-nest-menu[data-submenu-reveal="expand"] .brxe-dropdown.open>.brx-submenu-toggle svg,
.dwc-nest-menu [data-submenu-reveal="expand"].brxe-dropdown.open>.brx-submenu-toggle svg {
color: var(--dropdown-expanded-clr) !important;
}
/* BACK BUTTON POSITIONING */
.bricks-is-frontend [data-submenu-reveal="slide"] .open.active>.brx-submenu-toggle button:not([data-hide-close-bar="true"] button, [data-submenu-reveal="expand"] button),
.bricks-is-frontend [data-submenu-reveal="slide"].open.active>.brx-submenu-toggle button:not([data-hide-close-bar="true"] button, [data-submenu-reveal="expand"] button) {
min-inline-size: 100%;
position: fixed;
inset-block-start: calc(var(--dwc-nest-header-height) - var(--dwc-header-div-height));
transform: translateY(0%) !important;
inset-inline-start: 0;
padding-inline-start: var(--menu-item-inline-padding);
color: var(--back-text-clr);
text-transform: var(--back-text-transform);
letter-spacing: 1px;
z-index: 1000;
font-size: var(--back-text-font-size);
font-weight: var(--back-text-font-weight);
background-color: var(--back-text-bg);
min-block-size: calc(var(--dwc-header-div-height) - 2px);
-webkit-animation: dwc-nest-fade-in 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.3s both;
animation: dwc-nest-fade-in 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.3s both;
}
/* BACK BUTTON TEXT, (ATTR SET BY JS) */
.bricks-is-frontend [data-submenu-reveal="slide"] .open.active>.brx-submenu-toggle button[data-back-text="auto"]:not([data-submenu-reveal="expand"] button, [data-hide-close-bar="true"] button):after,
.bricks-is-frontend [data-submenu-reveal="slide"].brxe-dropdown.open>.brx-submenu-toggle button[data-back-text="auto"]:not([data-hide-close-bar="true"] button):after {
content: attr(data-text);
line-height: 1;
}
/* FORCE TO USE 'BACK' AS BACK BUTTON TEXT */
.bricks-is-frontend .dwc-nest-menu:not([data-submenu-reveal="expand"]) .brxe-dropdown.open:not([data-submenu-reveal="expand"])>.brx-submenu-toggle button:not([data-back-text="auto"])::after {
content: attr(data-back-text) !important;
}
.dwc-nest-menu:not([data-submenu-reveal="expand"]) .brxe-dropdown:not([data-submenu-reveal="expand"]) .brx-submenu-toggle button[aria-expanded] {
transition: unset !important;
}
/* BACK BUTTON CHEVRON ARROW direction */
.bricks-is-frontend [data-submenu-reveal="slide"] .brxe-dropdown.open>.brx-submenu-toggle button svg:not([data-submenu-reveal="expand"] svg),
.bricks-is-frontend [data-submenu-reveal="slide"].brxe-dropdown.open>.brx-submenu-toggle button svg {
transform: rotate(90deg);
margin-inline-end: 0.5em;
inline-size: 10px;
}
/* RTL */
[dir="rtl"] .bricks-is-frontend [data-submenu-reveal="slide"] .brxe-dropdown.open:not([data-submenu-reveal="expand"])>.brx-submenu-toggle button svg,
[dir="rtl"] .bricks-is-frontend [data-submenu-reveal="slide"].brxe-dropdown.open>.brx-submenu-toggle button svg {
order: 2;
margin-inline-end: initial;
margin-inline-start: 0.5em;
}
/* overlay back button on logo*/
body:has(.brx-open .open.active:not([data-submenu-reveal="expand"], [data-submenu-reveal="expand"] .open)) [data-mobile-top-transparent="true"]:not([data-submenu-reveal="expand"], [data-below-header="true"]) .dwc-nest-menu-top {
background-color: var(--mobile-menu-topbar-bg) !important;
-webkit-animation: dwc-nest-fade-in 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.2s both;
animation: dwc-nest-fade-in 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.2s both;
}
body:has([data-submenu-reveal="slide"].brxe-dropdown.open, [data-submenu-reveal="slide"] .brxe-dropdown.open:not([data-submenu-reveal="expand"], [data-submenu-reveal="expand"] .open)) [data-mobile-top-transparent="true"] .dwc-nest-menu-top:not([data-below-header="true"] *) {
background-color: var(--mobile-menu-topbar-bg) !important;
}
.dwc-mobile [data-mobile-top-transparent="true"] .dwc-nav-wrapper:not([data-below-header="true"] .dwc-nav-wrapper, [data-show-mobile-logo="true"] .dwc-nav-wrapper, [data-fullscreen-mobile-menu="true"] .dwc-nav-wrapper) {
background-color: transparent !important;
}
.dwc-mobile [data-mobile-top-transparent="true"] .dwc-nest-menu-top:not([data-below-header="true"] *, [data-show-mobile-logo="true"] *, [data-allow-overlay-mobile-opacity="true"][data-overlay-header-mobile="true"] [data-submenu-reveal="expand"][data-slide-in-direction="top"] *) {
background-color: transparent !important;
}
.dwc-mobile [data-allow-overlay-mobile-opacity="true"][data-overlay-header-mobile="true"] [data-submenu-reveal="expand"][data-slide-in-direction="top"] .dwc-nest-menu-top {
z-index: 9999;
border-radius: var(--overlay-header-radius);
--mobile-menu-topbar-bg: var(--overlay-header-bg);
backdrop-filter: blur(var(--overlay-header-blur));
}
/* MENU BELOW HEADER */
.bricks-is-frontend [data-below-header="true"].dwc-nest-menu .dwc-nav-wrapper {
inset-block-start: calc(var(--dwc-nest-header-height) + var(--wp-admin--admin-bar--height, 0px));
}
[data-below-header="true"] .dwc-nest-menu-top {
min-block-size: var(--top-offset);
}
.bricks-is-frontend [data-below-header="true"] .brxe-dropdown.open>.brx-submenu-toggle button:not([data-hide-close-bar="true"] button, [data-submenu-reveal="expand"] button) {
min-block-size: calc(var(--top-offset) - 1px);
padding-block: 0 !important;
inset-block-start: 0;
}
.bricks-is-frontend [data-below-header="true"].dwc-nest-menu.brxe-nav-nested .brxe-dropdown:not(.brx-has-megamenu) .brx-dropdown-content:not([data-hide-close-bar="true"] ul),
.bricks-is-frontend [data-submenu-reveal="slide"].brxe-dropdown .brx-dropdown-content:not([data-hide-close-bar="true"] ul) {
inset-block-start: calc(var(--top-offset) + 1px) !important;
}
.bricks-is-frontend [data-below-header="true"].dwc-nest-menu.brxe-nav-nested .brx-has-megamenu.brxe-dropdown .brx-dropdown-content:not([data-hide-close-bar="true"] ul, [data-submenu-reveal="expand"].brx-has-megamenu ul) {
inset-block-start: calc(var(--top-offset) + 1px) !important;
}
.dwc-nest-menu[data-below-header="true"] .dwc-nest-menu__mobile-logo {
display: none;
}
/* tooltip */
.dwc-nest-tooltip:not(.dwc-nav-wrapper:has(.open.active) .dwc-nest-tooltip, .dwc-tabbed-nav-list__li.active ~ .dwc-nest-tooltip) {
opacity: 0 !important;
}
@keyframes slideIn {
0% {
transform: translateX(-100%);
opacity: 0;
}
100% {
transform: translateX(0);
opacity: 1;
}
}
@keyframes fadeOut {
0% {
transform: translateX(0);
opacity: 1;
}
100% {
transform: translateX(50%);
opacity: 0;
}
}
.dwc-nest-tooltip {
animation: slideIn 0.4s ease-in-out both, fadeOut 0.4s ease-in-out 2s both;
text-transform: initial;
}
/* EXPAND DROP DOWN */
/* EXPAND MEGA MENU DROP DOWN */
[data-submenu-reveal="expand"] .brx-has-megamenu .brx-dropdown-content {
display: grid !important;
grid-template-rows: 0fr;
grid-template-columns: 1fr;
transition: 0.3s ease-in-out;
overflow: hidden;
position: static;
visibility: visible;
opacity: 1;
}
[data-submenu-reveal="expand"] .brx-has-megamenu.brxe-dropdown.open.active .brx-dropdown-content {
grid-template-rows: 1fr;
grid-template-columns: 1fr;
}
[data-submenu-reveal="expand"] .brx-has-megamenu .brx-dropdown-content> :is(div, li) {
padding-block: 0 !important;
opacity: 0;
transition: opacity 0.3s ease;
}
[data-submenu-reveal="expand"] .brx-has-megamenu .brx-dropdown-content :is(div, li):not([data-submenu-reveal="slide"] *) {
flex-wrap: nowrap !important;
min-block-size: 0 !important;
}
[data-submenu-reveal="expand"] .brx-has-megamenu.brxe-dropdown.open.active .brx-dropdown-content> :is(div, li) {
opacity: 1;
transition: opacity 0.25s 0.25s ease;
}
/* EXPAND MEGA MENU DROP DOWN -- MODULAR*/
[data-submenu-reveal="expand"].brx-has-megamenu .brx-dropdown-content {
display: grid !important;
grid-template-rows: 0fr;
grid-template-columns: 1fr;
transition: 0.3s ease-in-out;
overflow: hidden;
position: static;
visibility: visible;
opacity: 1;
}
[data-submenu-reveal="expand"].brx-has-megamenu.brxe-dropdown.open.active .brx-dropdown-content {
grid-template-rows: 1fr;
grid-template-columns: 1fr;
}
[data-submenu-reveal="expand"].brx-has-megamenu .brx-dropdown-content> :is(div, li) {
padding-block: 0 !important;
opacity: 0;
transition: opacity 0.3s ease;
}
[data-submenu-reveal="expand"].brx-has-megamenu .brx-dropdown-content :is(div, li) {
flex-wrap: nowrap !important;
min-block-size: 0 !important;
}
[data-submenu-reveal="expand"].brx-has-megamenu.brxe-dropdown.open.active .brx-dropdown-content> :is(div, li) {
opacity: 1;
transition: opacity 0.8s 0.25s ease;
}
/* HIDE TOP CLOSE BAR */
[data-hide-close-bar='true'] .dwc-nest-menu-top {
display: none;
}
/* hide close button, bring main hamburger to front */
.dwc-nest-menu .brxe-toggle {
position: relative;
}
[data-mobile-top-transparent="true"]:not(:has(.brxe-dropdown.open)) .brxe-toggle[aria-label="Open Menu"] {
z-index: 9999;
}
[data-show-toggle-always="true"] .brxe-toggle[aria-label="Open Menu"] {
z-index: 9999;
}
/* .dwc-nest-menu:not([data-mobile-top-transparent="true"], [data-below-header="true"]) .brxe-toggle[aria-label="Close Menu"] {
display: grid;
place-items: center;
block-size: 100%;
} */
.dwc-nest-menu .brx-nav-nested-items>.brxe-dropdown>.brx-dropdown-content {
transform: unset;
}
.dwc-nest-menu .brx-nav-nested-items>.brxe-dropdown.open>.brx-dropdown-content {
transform: unset;
}
.dwc-stripe-style .dwc-nest-header::after,
.dwc-stripe-style .dwc-nest-header::before {
display: none !important;
}
/* builder */
[data-builder-mode] .dwc-nest-menu-top {
min-block-size: 80px !important;
}
[data-builder-mode] .dwc-nest-nav-items {
overflow-y: scroll;
}
/* in builder ends*/
/*==========RTL=============*/
[dir=rtl] .bricks-is-frontend [data-submenu-reveal="slide"].dwc-nest-menu.brxe-nav-nested:not([data-slide-in-direction="right"]) .brx-has-megamenu.brxe-dropdown .brx-dropdown-content:not([data-submenu-reveal="expand"].brx-has-megamenu ul) {
transform: translateX(-100%);
}
[dir=rtl] nav:not(.brx-open, [data-slide-in-direction="right"]) .dwc-nav-wrapper {
transform: translateX(-100%);
}
[dir=rtl] .bricks-is-frontend [data-submenu-reveal="slide"] .brx-submenu-toggle button svg:not([data-submenu-reveal="expand"] svg) {
transform: rotate(-270deg);
}
/* ================== BRICKS RESET LAYER ========================== */
@layer bricks.reset {
/* multilevel dropdown slide in */
.bricks-is-frontend [data-submenu-reveal="slide"].dwc-nest-menu.brxe-nav-nested .brxe-dropdown:not(:is([data-submenu-reveal="expand"], .brx-has-megamenu)) .brx-dropdown-content:not([data-submenu-reveal="expand"] *, .brx-header-left *, .brx-header-right *),
.bricks-is-frontend [data-submenu-reveal="slide"].brxe-dropdown:not(.brx-has-megamenu) .brx-dropdown-content:not(.brx-header-left *, .brx-header-right *) {
inset-inline-start: 100% !important;
}
[dir=rtl] .bricks-is-frontend [data-slide-in-direction="right"][data-submenu-reveal="slide"].dwc-nest-menu.brxe-nav-nested .brxe-dropdown:not(:is([data-submenu-reveal="expand"], .brx-has-megamenu), .open) .brx-dropdown-content:not([data-submenu-reveal="expand"] *),
[dir=rtl] .bricks-is-frontend [data-slide-in-direction="right"][data-submenu-reveal="slide"].brxe-dropdown:not(.brx-has-megamenu, .open) .brx-dropdown-content {
inset-inline-start: -100% !important;
}
.bricks-is-frontend [data-submenu-reveal="slide"][data-slide-in-direction^="left"].dwc-nest-menu.brxe-nav-nested .brxe-dropdown:not(:is([data-submenu-reveal="expand"], .brx-has-megamenu)) .brx-dropdown-content:not([data-submenu-reveal="expand"] *, .brx-header-left *, .brx-header-right *),
.bricks-is-frontend [data-submenu-reveal="slide"].brxe-dropdown:not(.brx-has-megamenu) .brx-dropdown-content:not(.brx-header-left *, .brx-header-right *) {
inset-inline-start: -100% !important;
}
/*sidebar*/
.bricks-is-frontend:is(.brx-header-right, brx-header-left) [data-submenu-reveal="slide"].dwc-nest-menu.brxe-nav-nested .brxe-dropdown:not(:is([data-submenu-reveal="expand"], .brx-has-megamenu, .open)) .brx-dropdown-content:not([data-submenu-reveal="expand"] *, .-brx-header-left *, .-brx-header-right *),
.bricks-is-frontend:is(.brx-header-right, brx-header-left) [data-submenu-reveal="slide"].brxe-dropdown:not(.brx-has-megamenu, .open) .brx-dropdown-content:not(.brx-header-left *, .brx-header-right *) {
inset-inline-start: 100% !important;
}
.bricks-is-frontend [data-submenu-reveal="slide"].brxe-nav-nested.brx-open .brxe-dropdown.open:not(.brx-has-megamenu, [data-submenu-reveal="expand"])>.brx-dropdown-content,
.bricks-is-frontend .brx-open [data-submenu-reveal="slide"].brxe-dropdown.open>.brx-dropdown-content,
.bricks-is-frontend .brx-open [data-submenu-reveal="slide"].brxe-dropdown.open>.brx-dropdown-content .open>.brx-dropdown-content {
inset-inline-start: 0 !important;
}
.bricks-is-frontend [data-submenu-reveal="slide"][data-slide-in-direction^="left"].brxe-nav-nested.brx-open .brxe-dropdown.open:not(.brx-has-megamenu, [data-submenu-reveal="expand"])>.brx-dropdown-content,
.bricks-is-frontend [data-slide-in-direction^="left"] .brx-open [data-submenu-reveal="slide"].brxe-dropdown.open>.brx-dropdown-content,
.bricks-is-frontend [data-slide-in-direction^="left"] .brx-open [data-submenu-reveal="slide"].brxe-dropdown.open>.brx-dropdown-content .open>.brx-dropdown-content {
inset-inline-start: 0 !important;
}
/*sidebar*/
.bricks-is-frontend:is(.brx-header-right, brx-header-left) [data-submenu-reveal="slide"].brxe-nav-nested .brxe-dropdown.open:not(.brx-has-megamenu, [data-submenu-reveal="expand"])>.brx-dropdown-content,
.bricks-is-frontend:is(.brx-header-right, brx-header-left) [data-submenu-reveal="slide"].brxe-dropdown.open>.brx-dropdown-content,
.bricks-is-frontend:is(.brx-header-right, brx-header-left) [data-submenu-reveal="slide"].brxe-dropdown.open>.brx-dropdown-content .open>.brx-dropdown-content {
inset-inline-start: 0 !important;
}
.brx-closing.brxe-nav-nested .brx-nav-nested-items {
opacity: 1 !important;
}
.dwc-nest-menu.brxe-nav-nested.brx-closing .brx-nav-nested-items {
opacity: unset !important;
visibility: unset !important;
}
}
/* ================== END BRICKS RESET LAYER ========================== */
}
/* END MEDIA QUERY*/
@media (min-width: 640px) and (max-width: 1200px) {
/* ================== BRICKS RESET LAYER ========================== */
@layer bricks.reset {
/*special mobile style on tablet */
.dwc-mobile .bricks-is-frontend [data-mobile-special-style="slide-split"] [data-submenu-reveal="slide"].dwc-nest-menu.brxe-nav-nested .brxe-dropdown:not(:is([data-submenu-reveal="expand"], .brx-has-megamenu)) .brx-dropdown-content:not([data-submenu-reveal="expand"] *),
.bricks-is-frontend [data-mobile-special-style="slide-split"] [data-submenu-reveal="slide"].brxe-dropdown:not(.brx-has-megamenu) .brx-dropdown-content {
inset-inline-start: auto !important;
inset-inline-end: -100% !important;
}
.dwc-mobile .bricks-is-frontend [data-mobile-special-style="slide-split"] [data-submenu-reveal="slide"].brxe-nav-nested.brx-open .brxe-dropdown.open:not(.brx-has-megamenu, [data-submenu-reveal="expand"])>.brx-dropdown-content,
.bricks-is-frontend [data-mobile-special-style="slide-split"] .brx-open [data-submenu-reveal="slide"].brxe-dropdown.open>.brx-dropdown-content,
.bricks-is-frontend [data-mobile-special-style="slide-split"] .brx-open [data-submenu-reveal="slide"].brxe-dropdown.open>.brx-dropdown-content .open>.brx-dropdown-content {
inset-inline-end: 0% !important;
inset-inline-start: auto !important;
}
}
/* ================== END BRICKS RESET LAYER ========================== */
}
/* END MEDIA QUERY*/@media (min-width: 1201px){
.dwc-mobile header{
display: none;
}
@layer bricks.reset{
.brx-dropdown-content:not(.brx-submenu-positioned) {
display: flex!important;
}
}
/* CENTERED LOGO*/
/*force center align for centered logo menu */
.dwc-nest-header__container.dwc-logo-is-centered {
justify-content: center;
}
.dwc-logo-is-centered .dwc-nest-menu .brx-nav-nested-items{
justify-content: center;
}
/*remvoe bricks default margin left*/
#brx-header .dwc-logo-is-centered .dwc-nest-menu li:not(.brx-dropdown-content *){
margin-inline: 0 !important;
display: flex;
flex-direction: column;
justify-content: center;
}
/* prevent logo from shrinking on sceen resize*/
#brx-header .dwc-logo-is-centered .dwc-header-logo-item{
flex-shrink: 0;
}
.dwc-center-guide {
background-color: rgba(132, 255, 0, 0.32);
position: fixed;
top: 0;
bottom: 0;
align-self: center;
height: 100dvb;
z-index: 9999;
pointer-events: none;
}
body:not(:has([data-fix-centered-logo-fouc="true"])) .dwc-center-guide::before {
content: 'To fix FOUC on the header, Go to Header Pro div > Attribute > data-fix-centered-logo-fouc, set the value to "true"';
position: absolute;
top: 30vh;
padding: 1rem;
background-color: white;
}
.dwc-logo-is-centered .dwc-menu-wrap{
inline-size:100%
}
.dwc-nest-header .brx-nav-nested-items {
transition-property: opacity,transform;
}
body.adaptive-height-active:has([data-fix-centered-logo-fouc="true"]):not(:has(.dwc-logo-is-centered))::before {
content: 'Go to the Header Pro section > Attribute > data-fix-centered-logo-fouc, remove the value "true" OR enable Centered Logo';
}
}
/*======================================= MIN WIDTH MEDIA QUERY ENDS ==============================================================*/
body:has([data-overlay-header="true"]) .dwc-nest-menu-overlay {
inset-block-start: 0 ;
}
/*fix centered logo fouc*/
html:not(.dwc-mobile) .bricks-is-frontend header:has([data-fix-centered-logo-fouc="true"]):not(.desktop-centered header) {
opacity: 0;
}
/*end fix fouc*/
.dwc-adaptive-height:not(.dwc-stripe-style){
--dropdown-content-gap: 0
}
html:not(.dwc-mobile) .bricks-is-frontend:not(.brx-header-right, .brx-header-left) .dwc-nest-menu:not([data-offcanvas="true"]) .brxe-dropdown:not(.brx-has-megamenu) .brx-dropdown-content:not(.brx-dropdown-content .brx-dropdown-content){
inset-inline-start: 0 !important;
}
html:not(.dwc-mobile) .bricks-is-frontend .dwc-nest-menu .brx-dropdown-content .brx-dropdown-content:not(.brx-sub-submenu-overflow-right, .brx-submenu-overflow-right){
inset-inline-start: 100% !important;
}
html:not(.dwc-mobile) .bricks-is-frontend .dwc-nest-menu .brxe-dropdown:not(.brx-has-megamenu) .brx-dropdown-content{
min-inline-size: var(--multilevel-dropdown-width) !important;
}
html:not(.dwc-mobile) .bricks-is-frontend .dwc-nest-menu .brx-dropdown-content{
box-shadow: var(--dropdown-content-shadow);
}
html:not(.dwc-mobile) .bricks-is-frontend:not(.brx-header-left, .brx-header-right) .dwc-nest-menu:not([data-offcanvas="true"]) .brx-has-megamenu .brx-dropdown-content > *{
max-block-size: calc(95dvb - calc(var(--dwc-nest-header-height) + var(--wp-admin--admin-bar--height, 0px)));
overflow-y: auto;
overscroll-behavior: contain;
scrollbar-width: thin !important;
}
.dwc-nest-menu[data-submenu-reveal="expand"] .brx-nav-nested-items > .brxe-dropdown:not([data-submenu-reveal="slide"], .brx-has-megamenu) > .brx-submenu-toggle {
transform: translateY(0);
z-index: 9999;
}
:is([data-submenu-reveal="expand"][data-offcanvas="true"]) .brxe-dropdown:not(.brx-has-megamenu) .brx-dropdown-content,
:is(.brx-header-right, .brx-header-left) [data-submenu-reveal="expand"] .brxe-dropdown:not(.brx-has-megamenu) .brx-dropdown-content{
inset-block-start: 0;
transition: 0s;
min-inline-size: var(--mobile-menu-width);
}
.dwc-nest-toggle--open.brxe-toggle .brxa-inner:before {
block-size: var(--open-icon-line-height);
inset-inline-end: var(--open-icon-align);
}
.dwc-nest-toggle--open.brxa--vortex .brxa-inner:before {
inline-size: var(--open-icon-size);
}
.dwc-nest-toggle--open.brxa--vortex .brxa-inner:not(.is-active .brxa-inner):before {
inset-block-start: calc(var(--icon-line-gap) * -1);
}
.dwc-nest-toggle--open.brxa--vortex .brxa-inner:not(.is-active .brxa-inner):after {
inset-block-end: calc(var(--icon-line-gap) * -1);
}
.dwc-nest-toggle--open.brxe-toggle .brxa-inner{
block-size: var(--open-icon-line-height);
inset-inline-end: var(--open-icon-horizontal-offset);
}
.dwc-nest-toggle--open.brxa--vortex .brxa-inner{
inline-size:var(--iw);
}
.dwc-nest-toggle--open.brxe-toggle .brxa-inner:after {
block-size: var(--open-icon-line-height);
inset-inline-end: var(--open-icon-align);
}
.dwc-nest-toggle--open.brxa--vortex .brxa-inner:after {
inline-size: var(--aw);
}
.dwc-nest-toggle--open.brxa--vortex.is-active .brxa-inner:after,
.dwc-nest-toggle--open.brxa--vortex.is-active .brxa-inner {
inline-size: calc(var(--iw) * var(--open-icon-close-offset));
}
.dwc-nest-toggle--open.brxa--vortex .brxa-wrap{
inline-size: var(--open-icon-size)
}
.dwc-nest-toggle--open .brxa-inner,
.dwc-nest-toggle--open .brxa-inner:after,
.dwc-nest-toggle--open .brxa-inner:before{
background-color: var(--menu-toggle-clr)
}
.dwc-nest-menu.brxe-nav-nested .brxe-toggle[aria-label="Close Menu"] i{
color: var(--menu-close-toggle-clr)
}
.dwc-nest-toggle--open .brxa-wrap:hover .brxa-inner,
.dwc-nest-toggle--open .brxa-wrap:hover .brxa-inner:after,
.dwc-nest-toggle--open .brxa-wrap:hover .brxa-inner:before {
background-color: var(--menu-toggle-hover-clr) !important
}
/* icon animation */
.dwc-nest-toggle--open.brxa--vortex .brxa-inner {
transition-duration: .3s;
transition-timing-function: ease-in-out;
}
.dwc-nest-toggle--open.brxa--vortex.is-active .brxa-inner {
transform: rotate(225deg);
transition-timing-function: ease-in-out;
}
.dwc-nest-toggle--open.brxa--vortex.is-active .brxa-inner:before {
opacity: 0;
inset-block-start: calc(var(--icon-line-gap) * -1);
inline-size: 0px !important;
}
.dwc-nest-toggle--open .brxa-inner:before {
transition-duration: 0.25s;
transition-property: inline-size, tansform !important;
}
/* MENU ITEMS SPACING AND COLOR*/
/* Shared styles for both menu types */
.dwc-nest-menu .brx-nav-nested-items > li > a:not(.dwc-nest-menu__logo),
.dwc-nest-menu .brx-nav-nested-items > li .brx-submenu-toggle,
.dwc-nest-menu .brx-dropdown-content > .menu-item > a {
font-weight: var(--menu-item-font-weight);
font-size: var(--menu-item-font-size);
color: var(--menu-item-clr);
background-color: var(--menu-item-bg);
inline-size: 100%;
}
.dwc-nest-menu .brx-dropdown-content > .brxe-dropdown > .brx-submenu-toggle,
.dwc-nest-menu .brx-dropdown-content > .menu-item > a {
--menu-item-font-size: var(--dropdown-item-font-size)
}
/* Specific padding for nested menu items */
.dwc-nest-menu .brx-nav-nested-items > li > a,
.dwc-nest-menu .brx-nav-nested-items > li.brx-has-megamenu .brx-submenu-toggle {
padding-block: var(--menu-item-block-padding);
padding-inline: var(--menu-item-inline-padding) !important;
}
/* Specific padding for dropdown items */
.dwc-nest-menu .brx-dropdown-content > .menu-item > a {
padding-block: var(--dropdown-item-block-padding);
padding-inline: var(--dropdown-item-inline-padding) !important;
}
.dwc-nest-menu .brx-nav-nested-items > .brxe-dropdown:not(.brx-has-megamenu) li .brx-submenu-toggle{
padding-block: var(--dropdown-item-block-padding);
padding-inline: var(--dropdown-item-inline-padding) !important;
}
.dwc-nest-menu .brx-nav-nested-items > li:not(.brx-has-megamenu) .brx-submenu-toggle:not(.brxe-dropdown li .brx-submenu-toggle){
padding-block: var(--menu-item-block-padding);
padding-inline: var(--menu-item-inline-padding) !important;
}
.dwc-nest-menu .brx-dropdown-content > .menu-item > a:not([aria-current="page"], li:hover > *),
li:not(.brx-has-megamenu) .brx-submenu-toggle:not( .brx-nav-nested-items > li > *, li:hover > *, .open.active *) {
color: var(--dropdown-item-clr) !important;
}
/* DROPDOWN MENU ITEMS BG COLOR */
.dwc-nest-menu .brx-dropdown-content > .menu-item > a:not(.brx-has-megamenu a),
li:not(.brx-has-megamenu) .brx-submenu-toggle:not( .brx-nav-nested-items > li > *) {
background-color: var(--dropdown-item-bg)
}
/* DROPDOWN BG COLOR */
.dwc-nest-menu .brxe-dropdown:not(.brx-has-megamenu) .brx-dropdown-content {
background-color: var(--dropdown-content-bg);
}
/* DROPDOWN BORDER RADIUS */
.dwc-nest-menu .brx-nav-nested-items .brxe-dropdown:not(.brx-has-megamenu) li :is(.brx-submenu-toggle, .brxe-text-link){
border-radius: var(--dropdown-item-radius)
}
/* HOVER STYLES */
.dwc-nest-menu .brx-nav-nested-items > li:hover > a,
.dwc-nest-menu .brx-nav-nested-items > li:hover > .brx-submenu-toggle,
.dwc-nest-menu .brx-dropdown-content > li:hover > .brx-submenu-toggle,
.dwc-nest-menu .brx-dropdown-content > .menu-item:hover > a {
color: var(--menu-item-hover-clr);
background-color: var(--menu-item-hover-bg)
}
.dwc-nest-nav-dropdown-link:hover {
color: var(--menu-item-hover-clr);
}
.dwc-nest-menu .brx-nav-nested-items > li > a:not([data-last-item-is-button="true"] .brx-nav-nested-items > .menu-item:last-of-type a, [data-last-item-is-button="true-2"] .brx-nav-nested-items > .menu-item:nth-last-of-type(-n+2) a, [data-last-item-is-button="true-3"] .brx-nav-nested-items > .menu-item:nth-last-of-type(-n+3) a, .dwc-nest-menu__logo):hover::before,
body:not(.brx-header-left, .brx-header-right) .dwc-nest-menu .brx-nav-nested-items > li > a:not([data-last-item-is-button="true"] .brx-nav-nested-items > .menu-item:last-of-type a, [data-last-item-is-button="true-2"] .brx-nav-nested-items > .menu-item:nth-last-of-type(-n+2) a, [data-last-item-is-button="true-3"] .brx-nav-nested-items > .menu-item:nth-last-of-type(-n+3) a, .dwc-nest-menu__logo):focus-visible::before,
.dwc-nest-menu .brx-nav-nested-items > li:hover > .brx-submenu-toggle::before,
body:not(.brx-header-left, .brx-header-right) .dwc-nest-menu .brx-nav-nested-items > li:focus-within > .brx-submenu-toggle::before{
content: '';
background-color: var(--menu-item-hover-border-bg);
inline-size: 100%;
block-size: var(--menu-item-hover-border-height);
position: absolute;
inset-block-start: calc(100% - var(--menu-item-hover-border-height));
inset-inline-start: 0;
}
.dwc-nest-menu .brx-nav-nested-items > li.menu-item:has(> a),
.dwc-nest-menu .brx-nav-nested-items > li.menu-item:has(> .brx-submenu-toggle) {
position: relative;
}
/* ACTIVE STYLES */
/* links and dropdwon active styles */
.dwc-nest-menu .brx-nav-nested-items a[aria-current="page"]:not(.brxe-button, .dwc-exclude, .dwc-exclude a, li:hover > a, a:hover, .dwc-nest-menu__logo,
[data-last-item-is-button="true"] .brx-nav-nested-items > .menu-item:last-of-type a,
[data-last-item-is-button="true-2"] .brx-nav-nested-items > .menu-item:nth-last-of-type(-n+2) a,
[data-last-item-is-button="true-3"] .brx-nav-nested-items > .menu-item:nth-last-of-type(-n+3) a),
.dwc-nest-menu .brx-nav-nested-items > li:has([aria-current="page"]:not(.dwc-exclude)):not(li:hover) > .brx-submenu-toggle {
color: var(--menu-item-active-clr);
background-color: var(--menu-item-active-bg);
}
.dwc-nest-menu .brx-nav-nested-items .brx-submenu-toggle > a[aria-current="page"]{
background-color: initial !important;
}
.dwc-nest-menu .brx-nav-nested-items a[aria-current="page"]:not(.brxe-button, .dwc-exclude, .dwc-exclude a, .dwc-nest-menu__logo),
.dwc-nest-menu .brx-nav-nested-items > li .brx-submenu-toggle{
position: relative;
}
.dwc-nest-menu .brx-nav-nested-items a[aria-current="page"]:not(.brxe-button, .dwc-exclude, .dwc-exclude a, [data-last-item-is-button="true"] .brx-nav-nested-items > .menu-item:last-of-type a,
[data-last-item-is-button="true-2"] .brx-nav-nested-items > .menu-item:nth-last-of-type(-n+2) a,
[data-last-item-is-button="true-3"] .brx-nav-nested-items > .menu-item:nth-last-of-type(-n+3) a, .dwc-nest-menu__logo, .brx-submenu-toggle > a)::before,
.dwc-nest-menu .brx-nav-nested-items > li:has([aria-current="page"]:not(.dwc-exclude)) > .brx-submenu-toggle::before{
content: '';
background-color: var(--menu-item-active-border-bg);
inline-size: 100%;
block-size: var(--menu-item-active-border-height);
position: absolute;
inset-block-start: calc(100% - var(--menu-item-active-border-height));
inset-inline-start: 0;
}
.dwc-nest-menu .brx-nav-nested-items > li:has([aria-current="page"]:not(.dwc-exclude)) > .brx-submenu-toggle > :is(a:not(.dwc-nest-menu__logo), svg, button, span){
color: var(--menu-item-active-clr);
}
/* DROPDOWN HOVER BG */
.dwc-nest-menu .brx-dropdown-content > li:hover > .brx-submenu-toggle:not(.brx-has-megamenu *, .dwc-mobile .open.active > *),
.dwc-nest-menu .brx-dropdown-content > li:hover > a:not(.brx-has-megamenu a){
background-color: var(--dropdown-item-hover-bg) ;
color: var(--dropdown-item-hover-clr);
}
.dwc-nest-menu.brxe-nav-nested .brx-submenu-toggle {
justify-content: space-between;
}
/* DROPDOWN INDENT */
:is(.dwc-mobile, .brx-header-left, .brx-header-right, body:has([data-offcanvas="true"]))
:is([data-submenu-reveal="expand"])
.brxe-dropdown:not(.brx-has-megamenu) >
.brx-dropdown-content:not(.brxe-dropdown[data-submenu-reveal="slide"] *) {
padding-inline-start: var(--dropdown-indent) !important;
padding-inline-end: calc(var(--dropdown-indent) * 0) !important;
border-left: var(--dropdown-indent-line);
background-color: var(--dropdown-indent-bg)
}
:is(.dwc-mobile, .brx-header-left, .brx-header-right, body:has([data-offcanvas="true"]))
:is([data-submenu-reveal="expand"])
.brxe-dropdown:not(.brx-has-megamenu) >
.brx-dropdown-content:not(.brxe-dropdown[data-submenu-reveal="slide"] *) > * > :is(a, .brx-submenu-toggle){
padding-inline-start: calc(var(--dropdown-item-inline-padding) * var(--dropdown-indent-item-pad-offset)) !important;
}
:is(.dwc-mobile, .brx-header-left, .brx-header-right, body:has([data-offcanvas="true"]))
:is([data-submenu-reveal="expand"])
.open.active.brxe-dropdown > .brx-submenu-toggle svg:not(.open.active.brxe-dropdown:hover > .brx-submenu-toggle svg){
color: var(--dropdown-expanded-clr);
}
/* MENU ITEMS COLOR */
.dwc-nest-menu .brx-nav-nested-items > li .brx-submenu-toggle :where(span, a, svg) {
color: inherit;
font-weight: inherit;
}
/* CHEVRON */
.dwc-nest-menu .brx-nav-nested-items > li:not(li:has([aria-current="page"]:not(.dwc-exclude)), li:hover) .brx-submenu-toggle svg{
color: var(--chevron-clr);
}
.dwc-nest-menu .brx-nav-nested-items > li .brx-submenu-toggle svg{
font-size: var(--chevron-size);
color: var(--chevron-clr);
}
.dwc-nest-menu .brx-nav-nested-items > li:has([aria-current="page"]:not(.dwc-exclude)) > .brx-submenu-toggle svg,
.dwc-nest-menu .brx-nav-nested-items li:hover > .brx-submenu-toggle svg{
color: var(--chevron-hover-clr);
}
[data-align-dropdown-top="true"] .brx-dropdown-content .brxe-dropdown {
position: static;
}
.brx-dropdown-content:not(.brx-has-megamenu .brx-dropdown-content) {
padding-inline-end: 0 !important;
}
/*OVERLAY*/
html:not(.dwc-mobile) :is(.brx-header-left, .brx-header-right):not([data-builder-window]) :is(.brxe-code, .dwc-nest-menu-overlay),
body:has([data-hide-overlay="true"]) .dwc-nest-menu-overlay,
[data-builder-mode] .dwc-nest-menu-overlay {
display: none;
}
.bricks-is-frontend #brx-header .dwc-nest-menu[data-offcanvas="true"]:not([data-submenu-reveal = 'slide']) .brxe-dropdown:not(.open.active) > .brx-dropdown-content > .brxe-dropdown:not([data-submenu-reveal = 'slide'] *){
visibility: hidden;
}
/* builder */
[data-builder-mode] [data-offcanvas="true"] .dwc-nest-menu-top {
min-block-size: 80px !important;
}
/* ===========DESKTOP ONLY ============== */
:is( html:not(.dwc-mobile) .dwc-nest-header:not([data-overlay-header="true"]) [data-mobile-top-transparent="true"]) :is(.dwc-nest-menu-top:not([data-below-header="true"] *, :has(.open.active)),
.dwc-nav-wrapper:not([data-below-header="true"] *, :has(.open.active))) {
background-color: transparent !important;
}
html:not(.dwc-mobile):has(:is([data-last-item-is-button-alignment="center"], [data-last-item-is-button-alignment="left"])[data-last-item-is-button="true"]) :is(.dwc-menu-wrap, .dwc-nest-menu){
inline-size: 100%;
}
html:not(.dwc-mobile) [data-last-item-is-button-alignment="center"][data-last-item-is-button="true"].dwc-nest-menu:not(.brx-open) .dwc-nest-nav-items > li:is(:last-of-type, :first-of-type){
margin-inline-start: auto;
}
html:not(.dwc-mobile) [data-last-item-is-button-alignment="left"][data-last-item-is-button="true"].dwc-nest-menu:not(.brx-open) .dwc-nest-nav-items > li:is(:last-of-type) {
margin-inline-start: auto;
}
html:not(.dwc-mobile) .dwc-nest-tooltip {
display: none !important;
clip: rect(1px,1px,1px,1px);
word-wrap: normal!important;
border: 0;
clip-path: inset(50%);
height: 1px !important;
margin: -1px;
overflow: hidden;
overflow-wrap: normal!important;
padding: 0 !important;
width: 1px;
}
html:not(.dwc-mobile) .open:has(.open) .open:has(.brxe-dropdown:hover) .brx-dropdown-content:not(.brx-header-left *, .brx-header-right *, [data-offcanvas="true"] *) {
box-shadow: 0px 10px 30px -10px rgba(0, 0, 0, 30%);
}
html:not(.dwc-mobile) :is(.brx-header-left, .brx-header-right) .brxe-nav-nested .brxe-dropdown.open>.brx-dropdown-content {
display: flex;
min-width: auto;
opacity: 1;
overflow-y: auto;
position: static;
visibility: visible;
}
/* EXTEND DROPDWON BUTTON TO AVOID LOSING FOCUS/CLOSING ON DROPDOWN CONTENT */
html:not(.dwc-mobile) body:not(.brx-header-right, .brx-header-left) .dwc-nest-menu:not([data-offcanvas="true"]) .open .brx-dropdown-content .brxe-dropdown:has( > .brx-sub-submenu-overflow-right):hover::after {
inset-inline-end: 100%;
inset-inline-start: auto;
}
html:not(.dwc-mobile) body:not(.brx-header-right, .brx-header-left) .dwc-nest-menu:not([data-offcanvas="true"]) .open .brx-dropdown-content .brxe-dropdown:not(.brxe-dropdown:has( > .brx-sub-submenu-overflow-right)):hover::after {
inset-inline-start: 100%;
}
html:not(.dwc-mobile) body:not(.brx-header-right, .brx-header-left) .dwc-nest-menu:not([data-offcanvas="true"]) .open .brx-dropdown-content .brxe-dropdown:hover::after {
content: "";
position: absolute;
inset-block-end: 0;
block-size: 100%;
inline-size: 100%;
z-index: -1;
inset-inline-end: auto;
}
/*DIM DROPDOWN PARENT WHOSE CHILD DROPDOWN CONTENT IS SHOWING */
html:not(.dwc-mobile) .open:has(.open) > .brx-dropdown-content:not(.brx-header-left *, .brx-header-right *)::before {
content: "";
position: absolute;
inset: 0;
background-color: var(--dropdown-inactive-overlay);
pointer-events: none;
border-radius: var(--dropdown-content-border-radius);
z-index: 1;
}
html:not(.dwc-mobile) .open:has(.open) > .brxe-dropdown:not(.open, .brx-header-left *, .brx-header-right *){
position: static;
}
html:not(.dwc-mobile) .open:has(.open) > .brxe-dropdown:not(.open, .brx-header-left *, .brx-header-right *) > ul{
opacity: 0;
transition: 0s
}
html:not(.dwc-mobile) .brxe-dropdown.open:not(.brx-has-megamenu, .brx-header-left *, .brx-header-right *){
z-index: 1;
}
/* LAST BUTTON LEFT PADDDING ON DESKTOP */
html:not(.dwc-mobile) [data-last-item-is-button="true"].dwc-nest-menu .brx-nav-nested-items > .menu-item:last-of-type {
padding-inline-start: var(--menu-item-inline-padding);
}
/* hide toggle with back button appears */
html:not(.dwc-mobile) body:has(.brxe-dropdown.open) [data-offcanvas="true"] .brxe-toggle[aria-label="Open Menu"] {
z-index: 1;
}
/* fades in close button when the main toggle is covered by the back button */
html:not(.dwc-mobile) body:has(.brxe-dropdown.open) [data-offcanvas="true"] .brxe-toggle[aria-label="Close Menu"]:not([data-submenu-reveal="expand"] *){
opacity: 1;
}
html:not(.dwc-mobile) [data-mobile-top-transparent="true"][data-offcanvas="true"]:not([data-show-mobile-logo="true"]) .brxe-toggle[aria-label="Close Menu"] {
opacity: 0;
}
html:not(.dwc-mobile) [data-show-mobile-logo="true"] .dwc-nav-wrapper{
z-index: 9999
}
html:not(.dwc-mobile) [data-offcanvas="true"].dwc-nest-menu .brxe-toggle {
display: flex;
}
/* STRIPE STYLE */
html:not(.dwc-mobile) .dwc-stripe-style .brxe-dropdown.brx-has-megamenu .brx-dropdown-content:not([data-offcanvas="true"] .brx-has-megamenu .brx-dropdown-content, .brx-header-left .brx-has-megamenu .brx-dropdown-content, .brx-header-right .brx-has-megamenu .brx-dropdown-content) {
background: transparent !important;
}
html:not(.dwc-mobile) .dwc-stripe-style .brx-has-megamenu > .brx-submenu-toggle:not([data-offcanvas="true"] .brx-submenu-toggle, .brx-header-left .brx-submenu-toggle, .brx-header-right .brx-submenu-toggle),
html:not(.dwc-mobile) .dwc-stripe-style .brx-has-megamenu > .brx-submenu-toggle:not([data-offcanvas="true"] .brx-submenu-toggle, .brx-header-left .brx-submenu-toggle, .brx-header-right .brx-submenu-toggle) > a,
html:not(.dwc-mobile) .dwc-stripe-style .brx-has-megamenu > .brx-submenu-toggle:not([data-offcanvas="true"] .brx-submenu-toggle, .brx-header-left .brx-submenu-toggle, .brx-header-right .brx-submenu-toggle) > button {
cursor: default;
}
/* handles translate and opacity animation for stripe style on desktop - NEW */
html:not(.dwc-mobile) .dwc-stripe-style .brx-has-megamenu.open .brx-dropdown-content:not([data-offcanvas="true"] .brx-has-megamenu .brx-dropdown-content, .brx-header-left .brx-has-megamenu .brx-dropdown-content, .brx-header-right .brx-has-megamenu .brx-dropdown-content) > * > *{
transform: translateX(0);
}
html:not(.dwc-mobile) .dwc-stripe-style .brx-has-megamenu .brx-dropdown-content:not([data-offcanvas="true"] .brx-has-megamenu .brx-dropdown-content, .brx-header-left .brx-has-megamenu .brx-dropdown-content, .brx-header-right .brx-has-megamenu .brx-dropdown-content) > * > *{
transition: transform 0.4s;
}
html:not(.dwc-mobile) .dwc-stripe-style .brx-has-megamenu.open + .brx-has-megamenu .brx-dropdown-content:not([data-offcanvas="true"] .brx-has-megamenu .brx-dropdown-content, .brx-header-left .brx-has-megamenu .brx-dropdown-content, .brx-header-right .brx-has-megamenu .brx-dropdown-content) > * > *{
transform: translateX(50px);
}
html:not(.dwc-mobile) .dwc-stripe-style .brx-has-megamenu:has(+ .brx-has-megamenu.open) .brx-dropdown-content:not([data-offcanvas="true"] .brx-has-megamenu .brx-dropdown-content, .brx-header-left .brx-has-megamenu .brx-dropdown-content, .brx-header-right .brx-has-megamenu .brx-dropdown-content) > * > *{
transform: translateX(-50px);
}
html:not(.dwc-mobile) .dwc-stripe-style .brx-has-megamenu.open .brx-dropdown-content:not([data-offcanvas="true"] .brx-has-megamenu .brx-dropdown-content, .brx-header-left .brx-has-megamenu .brx-dropdown-content, .brx-header-right .brx-has-megamenu .brx-dropdown-content) > * {
overflow-x: hidden;
}
/* mobile logo */
html:not(.dwc-mobile) .dwc-nest-menu__mobile-logo:not([data-offcanvas="true"]:not(.brx-header-left *, .brx-header-right *) .dwc-nest-menu__mobile-logo) {
display: none;
}
/* prevent fouc when offcanvas is enabled and anime height */
body.bricks-is-frontend:has([data-offcanvas="true"])
.dwc-nav-wrapper:not(.sidebar-ready .dwc-nav-wrapper){
display: none;
}
.dwc-mobile [data-hide-close-bar = 'true'] .dwc-nav-wrapper{
inset-block-start: var(--dwc-nest-header-height)
}
:is(.brx-header-left, .brx-header-right) .dwc-nest-header::before{
display: none;
}
/* mobile menu from top behind header */
/* .dwc-mobile :is([data-slide-in-direction="top"], [data-slide-in-direction="top left"]) .dwc-nav-wrapper {
z-index: -1;
} */
.dwc-mobile :is([data-slide-in-direction="top"], [data-slide-in-direction="top left"]) .dwc-nav-wrapper:not(:has(.brxe-dropdown.open)),
.dwc-mobile [data-overlay-header-mobile="true"] :is([data-slide-in-direction="top"], [data-slide-in-direction="top left"]) .dwc-nav-wrapper{
z-index: -1;
}
.dwc-mobile .bricks-is-frontend #brx-header > .dwc-nest-header[data-overlay-header-mobile="true"]:not(:has([data-offcanvas="true"]))::before {
backdrop-filter: blur(var(--overlay-header-blur));
content: '';
position: absolute;
inset: 0;
z-index: -1;
border-radius: var(--overlay-header-radius);
}
.dwc-mobile :is([data-slide-in-direction="top"], [data-slide-in-direction="top left"]):not([data-match-overlay-header-width="true"], [data-submenu-reveal="expand"])
.dwc-nav-wrapper:has(.brxe-dropdown.open.active) {
z-index: unset !important;
}
.dwc-mobile .dwc-nest-header:not([data-allow-overlay-mobile-opacity="true"]) .dwc-nest-header__container:has(:is([data-slide-in-direction="top"], [data-slide-in-direction="top left"])) {
background-color: var(--header-bg)
}
/************************************
MENU HEIGHT/ STRIPE STYLE
************************************/
:is([data-builder-mode], .brx-header-right, .brx-header-left) .dwc-nest-header::after,
body:has([data-offcanvas="true"]) .dwc-nest-header::after {
display: none;
}
.dwc-nest-header:not(:is(.dwc-adaptive-height, .dwc-stripe-style) .dwc-nest-header)::after{
display: none;
}
html:not(.dwc-mobile) .dwc-nest-header::after {
display: none;
content: '';
min-block-size: 0;
inset-inline-start: 0;
inline-size: 100%;
transition-delay: 0.1s !important;
pointer-events: none;
transition: inline-size 0.2s,
block-size 0.2s,
opacity 0.2s,
inset-inline-start 0.2s,
transform 0.2s !important;
will-change: block-size, inline-size, inset-inline-start, transform, opacity;
contain: layout paint;
z-index: -1;
}
html:not(.dwc-mobile) .dwc-nest-header[data-overlay-header="true"][data-overlay-header-optimize-adaptive-height="true"]::after {
position: fixed;
}
html:not(.dwc-mobile) .dwc-adaptive-height:not(.dwc-stripe-style) .dwc-nest-header[data-overlay-header="true"][data-overlay-header-optimize-adaptive-height="true"]::after {
inset-block-start: 0;
}
html:not(.dwc-mobile) .dwc-nest-header:not([data-overlay-header="true"][data-overlay-header-optimize-adaptive-height="true"])::after {
position: absolute;
inset-block-end: calc(100% - var(--dwc-nest-header-height));
block-size: 1000px;
transform: translateY(calc(var(--dropdown-menu-height) * 1.01)) translateZ(0);
}
html:not(.dwc-mobile) .adaptive-height-active:is(.dwc-stripe-style, .dwc-adaptive-height) .dwc-nest-header::after {
display: block;
}
.dwc-nest-menu .brx-has-megamenu .brx-dropdown-content:not(.show-nav .brx-dropdown-content, [data-builder-mode] .brx-dropdown-content){
display:none
}
html:not(.dwc-mobile) body:has(.brx-has-megamenu.open) .dwc-nest-header::after {
transition-delay: 0s !important;
}
/* STRIPE STYLE */
html:not(.dwc-mobile) .dwc-stripe-style.bricks-is-frontend .brx-has-megamenu .brx-dropdown-content:not([data-offcanvas="true"] .brx-dropdown-content),
html:not(.dwc-mobile) .dwc-adaptive-height.bricks-is-frontend .brx-has-megamenu .brx-dropdown-content:not([data-offcanvas="true"] .brx-dropdown-content) {
transition-delay: 0s;
box-shadow: none !important;
transition-duration: 0s;
}
html:not(.dwc-mobile) .dwc-stripe-style.bricks-is-frontend .brx-has-megamenu .brx-dropdown-content:not([data-offcanvas="true"] .brx-dropdown-content) {
overflow-x: hidden;
}
html:not(.dwc-mobile) .dwc-stripe-style .open.brx-has-megamenu .brx-dropdown-content:not([data-offcanvas="true"] .brx-dropdown-content),
html:not(.dwc-mobile) .dwc-adaptive-height .open.brx-has-megamenu .brx-dropdown-content:not([data-offcanvas="true"] .brx-dropdown-content) {
transition-delay: 0.1s;
transition-duration: .2s;
}
html:not(.dwc-mobile) .dwc-stripe-style .open.brx-has-megamenu:not([data-offcanvas="true"] .brx-has-megamenu)::before {
content: '';
position: absolute;
inset-block-start: 100%;
block-size: calc(var(--dwc-nest-header-height)* 0.5);
inline-size: min(var(--dropdown-menu-width), 40vw);
transform: translateX(-50%);
inset-inline-start: 0;
}
html:not(.dwc-mobile) .dwc-stripe-style .brx-nav-nested-items>.brxe-dropdown.brx-has-megamenu>.brx-dropdown-content:not([data-offcanvas="true"] .brx-dropdown-content) {
overflow-x: hidden;
border-radius: var(--stripe-border-radius);
}
html:not(.dwc-mobile) .dwc-nest-header {
position: relative;
}
html:not(.dwc-mobile) .dwc-stripe-style .dwc-nest-header::before {
content: '';
inline-size: calc(max(var(--dropdown-content-gap) + 2.5px, 16px) * 1.1);
block-size: calc(max(var(--dropdown-content-gap) + 2.5px, 16px) * 1.1);
background-color: var(--adaptive-height-bg);
position: absolute;
inset-block-start: 100%;
transition: 0s;
transition-property: inset-inline-start, transform, opacity;
inset-inline-start: var(--navlink-midpoint);
transform: translateX(0%) rotate(45deg) translateY(calc(50% + 1px));
pointer-events: none;
border-top: var(--adaptive-height-border);
border-left: var(--adaptive-height-border);
z-index: 999;
}
html:not(.dwc-mobile) .dwc-stripe-style .dwc-nest-header:has(.brxe-dropdown.brx-has-megamenu.open:hover)::before {
transition:
opacity 0.2s 0.1s,
transform 0.2s 0s,
inset-inline-start 0.2s 0s;
}
html:not(.dwc-mobile) .dwc-nest-header::before{
opacity: 0 ;
}
html:not(.dwc-mobile) .dwc-nest-header.hide-menu-animation::after {
opacity: 0 !important;
}
html:not(.dwc-mobile) .dwc-stripe-style .dwc-nest-header.show-menu-animation:has(.brx-has-megamenu:hover)::before,
html:not(.dwc-mobile) .dwc-nest-header.show-menu-animation::after,
html:not(.dwc-mobile) #brx-header.show-menu-animation .dwc-nest-header::after {
opacity: 1;
}
html:not(.dwc-mobile) .dwc-nest-header.show-menu-animation::after,
html:not(.dwc-mobile) #brx-header.show-menu-animation .dwc-nest-header::after {
box-shadow: var(--adaptive-height-shadow)
}
html:not(.dwc-mobile) .dwc-stripe-style .dwc-nest-header::after {
border: var(--adaptive-height-border);
}
html:not(.dwc-mobile) .dwc-stripe-style .dwc-nest-header::after {
inset-inline-start: calc(var(--dropdown-menu-x) - 2.5rem);
inline-size: calc(var(--dropdown-menu-width) + 5rem);
transform: unset;
inset-block-start: calc(var(--dwc-header-div-height) + max(var(--dropdown-content-gap), 16px));
block-size: var(--dropdown-menu-height);
z-index: 1;
opacity: 0;
}
html:not(.dwc-mobile) .dwc-stripe-style:has(.brx-has-megamenu.open):not(:has([data-optimize-stripe=true])) .dwc-nest-header::after {
block-size: calc(var(--dropdown-menu-height) + 0rem) !important;
opacity: 1;
}
/* hide nav content until js is ready*/
html:not(.dwc-mobile) .dwc-stripe-style .brx-has-megamenu>.brx-dropdown-content:not(.show-nav .brx-dropdown-content, [data-offcanvas="true"] .brx-dropdown-content) {
opacity: 0;
}
body:has(.brx-has-megamenu.open) .sticky .dwc-nest-header::after {
background-color: var(--adaptive-height-bg) !important;
}
body:has(.brx-has-megamenu.open) .brx-sticky .dwc-nest-header::after {
background-color: var(--adaptive-height-bg) !important;
}
.dwc-nest-header::after {
background-color: var(--adaptive-height-bg) !important;
/* opacity: 0; */
}
html:not(.dwc-mobile) .dwc-stripe-style:has([data-optimize-stripe=true]) .dwc-nest-header::after {
inset-inline-start: calc(var(--dropdown-menu-x) - 1.5px);
inline-size: calc(var(--dropdown-menu-width) + 2.5px);
/*transform: unset;*/
block-size: calc(var(--dropdown-menu-height) + 3px) !important;
z-index: 1;
border-radius: var(--stripe-border-radius);
transform: translateZ(0);
opacity: 1
}
html:not(.dwc-mobile) .dwc-stripe-style:has([data-optimize-stripe=true]) .dwc-nest-header::after {
border: var(--adaptive-height-border);
}
html:not(.dwc-mobile) :not(.brx-header-left, .brx-header-right).dwc-stripe-style:has([data-optimize-stripe=true]) .brx-nav-nested-items>.brxe-dropdown.brx-has-megamenu>.brx-dropdown-content:not([data-offcanvas="true"] .brx-dropdown-content) {
transform: translateY(16px) !important;
inset-block-start: 100%;
}
.dwc-nest-header:not(.show-nav .dwc-nest-header)::after {
display: none;
}
/* STRIP FIX FOR DYNAMIC NAV */
html:not(.dwc-mobile)
:not(.brx-header-left, .brx-header-right).dwc-stripe-style:has([data-optimize-stripe=true])
.brx-nav-nested-items> li > .brxe-dropdown.brx-has-megamenu>.brx-dropdown-content:not([data-offcanvas="true"] .brx-dropdown-content) {
transform: translateY(max(calc(var(--dropdown-content-gap) + 2.5px), 17px)) !important;
inset-block-start: 100%;
}
html:not(.dwc-mobile) .dwc-stripe-style .show-menu-animation .dwc-nest-header:has(.brx-has-megamenu:hover)::before,
html:not(.dwc-mobile) .show-menu-animation::after,
html:not(.dwc-mobile) .show-menu-animation .dwc-nest-header::after {
opacity: 1;
}
html:not(.dwc-mobile) .hide-menu-animation .dwc-nest-header::after {
opacity: 0 !important;
}
html:not(.dwc-mobile) .dwc-stripe-style:has([data-optimize-stripe=true]) .dwc-nest-header::after {
block-size: calc(var(--dropdown-menu-height) + 6px) !important;
}
/****************
MENU OVERLAY
***************/
.dwc-nest-menu-overlay {
position: fixed;
inline-size: 100%;
block-size: 100%;
inset-inline-start: 0;
inset-block-end: 0;
background: var(--nav-overlay-backdrop-clr) !important;
z-index: 2;
opacity: 0;
transition: 0.4s;
backdrop-filter: blur(var(--nav-overlay-backdrop-blur));
}
html:not(.dwc-mobile) .dwc-nest-header:has(.dwc-nest-menu-overlay) .brxe-nav-nested{
z-index: 3
}
[data-overlay-header=true].dwc-nest-header .dwc-nest-menu-overlay{
display: none;
}
body:not(:has([data-overlay-header-optimize-adaptive-height="true"][data-overlay-header="true"])) .dwc-nest-menu-overlay {
inset-block-start: var(--dwc-nest-header-height);
}
.logged-in:not(:has([data-overlay-header-optimize-adaptive-height="true"][data-overlay-header="true"])) .dwc-nest-menu-overlay:not(:has(+ .x-header)) {
inset-block-start: calc(var(--dwc-nest-header-height) + var(--wp-admin--admin-bar--height, 0px));
}
body:has([data-overlay-header-optimize-adaptive-height="true"][data-overlay-header="true"], [data-overlay-on-header="true"]) .dwc-nest-menu-overlay {
inset-block-start: 0 !important;
}
.dwc-nest-menu-overlay {
pointer-events: none;
}
.no-scroll .dwc-nest-menu-overlay {
opacity: 1;
}
:is(.brx-header-right, .brx-header-left) .dwc-nest-header__container {
padding-inline: 0
}
/*fade in back button*/
@-webkit-keyframes dwc-nest-fade-in {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes slide-in-right {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
/* configurable menu and submenu slide out speed */
.dwc-mobile .bricks-is-frontend [data-submenu-reveal="slide"].dwc-nest-menu :is(.brx-dropdown-content, .dwc-nav-wrapper),
.bricks-is-frontend :is([data-submenu-reveal="slide"][data-offcanvas="true"]).dwc-nest-menu :is(.brx-dropdown-content, .dwc-nav-wrapper),
:is(.bricks-is-frontend.brx-header-right, .bricks-is-frontend.brx-header-left) :is([data-submenu-reveal="slide"]).dwc-nest-menu :is(.brx-dropdown-content, .dwc-nav-wrapper){
transition-duration: calc(0.5s / var(--slide-out-speed)) !important;
}
#brx-header{
--content-gap: 0;
--at-container-gap: 0;
}
/* overlay header */
html:not(.dwc-mobile) .bricks-is-frontend
#brx-header:has([data-overlay-header = "true"]) {
padding: var(--overlay-header-inset);
}
html:not(.dwc-mobile) .bricks-is-frontend
#brx-header:has([data-overlay-header = "true"]):not(.sticky, .brx-sticky) {
position: absolute;
inset-block-start: 0;
inset-inline: 0;
}
html:not(.dwc-mobile) .bricks-is-frontend #brx-header >
.dwc-nest-header[data-overlay-header = "true"]{
border-radius: var(--overlay-header-radius);
background-color: var(--overlay-header-bg);
box-shadow: var(--overlay-header-shadow);
max-inline-size: var(--overlay-header-width);
}
html:not(.dwc-mobile) .bricks-is-frontend #brx-header >
.dwc-nest-header[data-overlay-header = "true"]:not(:has([data-offcanvas="true"])){
backdrop-filter: blur(var(--overlay-header-blur));
}
html:not(.dwc-mobile) .bricks-is-frontend #brx-header:has(.open) >
.dwc-nest-header[data-overlay-header = "true"]{
background-color: var(--overlay-header-bg-active) !important;
}
/* overlay on mobile */
.dwc-mobile .bricks-is-frontend
#brx-header:has([data-overlay-header-mobile = "true"]) {
padding: var(--overlay-header-inset);
}
.dwc-mobile .bricks-is-frontend
#brx-header:has([data-overlay-header-mobile = "true"]):not(.sticky, .brx-sticky) {
position: absolute;
inset-block-start: 0;
inset-inline: 0;
}
.dwc-mobile .bricks-is-frontend #brx-header >
.dwc-nest-header[data-overlay-header-mobile = "true"]{
border-radius: var(--overlay-header-radius);
background-color: var(--overlay-header-bg);
box-shadow: var(--overlay-header-shadow);
max-inline-size: var(--overlay-header-width);
}
/*offset hero top padding when overlay header is active */
#brx-header:has([data-offset-section-padding="true"]) + main > :is(section:first-child, div:first-child) {
padding-block-start: var(--overlay-offset-padding);
}
/* menu height anime on overlay header */
html:not(.dwc-mobile) .bricks-is-frontend.dwc-adaptive-height:not(.dwc-stripe-style) #brx-header:has([data-overlay-header = "true"]) .dwc-nest-header::after {
border-radius: min(var(--overlay-header-radius), 2em);
inset-block-end: calc(100% + var(--overlay-header-inset));
opacity: 1;
}
html:not(.dwc-mobile) .bricks-is-frontend:is(.dwc-adaptive-height):not(.dwc-stripe-style)
#brx-header:has([data-overlay-header = "true"]:not([data-overlay-header-optimize-adaptive-height="true"]))
.dwc-nest-header.show-menu-animation::after,
html:not(.dwc-mobile) .bricks-is-frontend:is(.dwc-adaptive-height):not(.dwc-stripe-style)
#brx-header.show-menu-animation:has([data-overlay-header = "true"]:not([data-overlay-header-optimize-adaptive-height="true"]))
.dwc-nest-header::after {
transform: translateY( calc((var(--dropdown-menu-height) + (var(--dwc-nest-header-height) * 1.5)))) translateZ(0)
}
html:not(.dwc-mobile) .bricks-is-frontend:is(.dwc-adaptive-height):not(.dwc-stripe-style) #brx-header:has([data-overlay-header="true"][data-overlay-header-optimize-adaptive-height="true"]) .dwc-nest-header.show-menu-animation::after,
html:not(.dwc-mobile) .bricks-is-frontend:is(.dwc-adaptive-height):not(.dwc-stripe-style) #brx-header.show-menu-animation:has([data-overlay-header="true"][data-overlay-header-optimize-adaptive-height="true"]) .dwc-nest-header::after {
block-size: calc((var(--dropdown-menu-height) + (var(--dwc-nest-header-height) * 1.5)));
}
/* we need to reposition the overlay outside the header */
html:not(.dwc-mobile) .bricks-is-frontend:has( .dwc-nest-menu .open):not(:has([data-offcanvas="true"])) .dwc-nest-menu-overlay{
opacity: 1;
}
/*menu items border radius desktop only*/
html:not(.dwc-mobile) .dwc-nest-menu .brx-nav-nested-items > li >
:is(a:not([data-last-item-is-button="true"] .brx-nav-nested-items > .menu-item:last-of-type a, [data-last-item-is-button="true-2"] .brx-nav-nested-items > .menu-item:nth-last-of-type(-n+2) a, [data-last-item-is-button="true-3"] .brx-nav-nested-items > .menu-item:nth-last-of-type(-n+3) a, .dwc-nest-menu__logo ), .brx-submenu-toggle){
border-radius: var(--menu-item-radius);
}
html:not(.dwc-mobile) .dwc-nest-menu .brx-nav-nested-items {
gap: var(--menu-items-gap);
}
/* dynamic dropdown conten width and position */
html:not(.dwc-mobile) :is(:not(.brx-header-left, .brx-header-right)).bricks-is-frontend .dwc-nest-menu:not([data-offcanvas="true"]) .brx-has-megamenu .brx-dropdown-content:not([data-use-selector="true"]) {
min-inline-size: var(--dropdown-content-width, var(--dropdown-content-default-width)) !important;
inset-inline-start: var(--left-position)!important;
}
html:not(.dwc-mobile) :is(:not(.brx-header-left, .brx-header-right)).bricks-is-frontend .dwc-nest-menu:not([data-offcanvas="true"]) .brx-dropdown-content {
border-radius: var(--dropdown-content-border-radius);
}
.dwc-nest-header{
position: relative;
z-index: 999;
}
/* optimize multi row header*/
.dwc-mobile .dwc-nest-header[data-fullscreen-mobile-menu="true"]{
--dwc-nest-header-height:var(--dwc-header-div-height) !important
}
.dwc-mobile .dwc-nest-header[data-fullscreen-mobile-menu="true"] .dwc-nest-menu-top:not([data-below-header="true"] *) {
background-color: var(--mobile-menu-topbar-bg) !important;
align-items: center !important;
animation: none !important;
}
.dwc-mobile .dwc-nest-header[data-fullscreen-mobile-menu="true"] .dwc-nav-wrapper{
z-index: 99999
}
.dwc-mobile .dwc-nest-header[data-fullscreen-mobile-menu="true"] .dwc-nest-menu-top .brxe-toggle {
display: block;
}
.dwc-mobile .dwc-nest-header[data-fullscreen-mobile-menu="true"]:not([data-hide-mobile-logo="true"]) .dwc-nest-menu__mobile-logo {
display: flex;
}
/* overlay header on multirow*/
html:not(.dwc-mobile) .dwc-nest-header[data-fullscreen-mobile-menu="true"][data-overlay-header="true"] > div:first-child{
border-top-left-radius: var(--overlay-header-radius);
border-top-right-radius: var(--overlay-header-radius);
}
/* BricksExtras support*/
html:not(.dwc-mobile) #brx-header .brxe-xheaderrow:has(.dwc-nest-header){
position: relative;
z-index:1;
}
html:not(.dwc-mobile) #brx-header .brxe-xheaderrow:first-child{
position: relative;
z-index: 99991;
}
[data-x-overlay]:not([data-x-overlay="none"]) .dwc-nest-header{
background: var(--x-overlay-header-background)!important;
}
html:not(.dwc-mobile) .brxe-xheaderrow .dwc-nest-header::after {
block-size: 1000px;
}
/* in builder */
[data-builder-mode] .brx-open.dwc-nest-menu[data-offcanvas="true"] .brx-nav-nested-items {
inline-size: var(--mobile-menu-width);
}
[data-builder-mode] [data-offcanvas="true"] .dwc-nest-toggle--open{
display: none !important;
}
[data-builder-mode] [data-offcanvas="true"] .dwc-nest-menu-top{
display: none;
}
:is(.brx-header-left, .brx-header-right) [data-builder-mode] .brx-nav-nested-items,
[data-builder-mode] .brx-open.dwc-nest-menu[data-offcanvas="true"] .brx-nav-nested-items {
overflow-y: auto;
scrollbar-width: thin !important;
justify-content: flex-start !important;
box-shadow: var(--sidebar-shadow);
}
:is(.brx-header-left, .brx-header-right) [data-builder-mode] .dwc-nav-wrapper,
[data-builder-mode] [data-offcanvas="true"] .dwc-nav-wrapper {
inset-inline-end: auto ;
inset-inline-start: 0;
}
/* preview dropdown content width in builder*/
[data-builder-mode]:not(.brx-header-left, .brx-header-right) .dwc-nest-menu:not(.brx-open) .brx-has-megamenu .brx-dropdown-content:not([data-offcanvas="true"] .brx-dropdown-content, .brx-open .brx-dropdown-content){
min-inline-size:var(--dropdown-content-width, var(--dropdown-content-default-width)) !important;
transform: translatex(50px);
border: dotted #00b0f4 2px
}
[data-builder-mode]:not(.brx-header-left, .brx-header-right) .dwc-nest-menu .brx-has-megamenu .brx-dropdown-content:not([data-offcanvas="true"] .brx-dropdown-content, .brx-open .brx-dropdown-content):not([data-hide-instruction="true"])::after{
content: 'Set dropdown Content width value in dropdown Content ATTRIBUTES > data-content-width, do not add a unit e.g. px. Leave empty to use global content width, set in Nav Nestable ATTRIBUTES > data-global-content-width. | Set alignment in ATTRIBUTES > data-content-align, values: left, right, center. This aligns the dropdown content to the dropdown button, leave empty to align center to the header. aligments are applied on frontend only. | TIP: click here to select dropdown Content';
position: absolute;
inset-block-start: 102%;
color: #e1e1e1;
font-size: 12px;
letter-spacing: 0.5px;
line-height: 1.5;
background: #2b2b2b;
min-block-size: fit-content;
padding: 1em;
}
/*set alignment for sidebar edit on desktop*/
:is(.brx-header-left, .brx-header-right)[data-builder-mode] .dwc-nest-menu.brxe-nav-nested .brx-nav-nested-items,
[data-builder-mode] .dwc-nest-menu.brxe-nav-nested[data-offcanvas="true"] .brx-nav-nested-items {
justify-content: flex-start !important;
}
[data-builder-mode]:is(.brx-header-left, .brx-header-right)::before {
content: 'To view sidebar, go to the MENU Styles/Options code block CSS, scroll to the end, and replace all the postid-xxxx in the CSS rules with this template post id';
}
:is(.brx-header-left, .brx-header-right)[data-builder-window] #brx-header .dwc-nest-menu:not(.brx-open)::after {
content: 'To edit Sidebar, select the Nav (Nestable), go to the CONTENT tab > MOBILE MENU, enable "Keep open while styling" | TIP: click here to select Nav (Nestable)';
position: absolute;
padding-inline-start: 20px;
color: #e1e1e1;
font-size: 12px;
line-height: 1.5;
background: #2b2b2b;
min-block-size: fit-content;
padding: 1em;
inline-size: 250px;
}
.brx-header-left[data-builder-window] #brx-header .dwc-nest-menu:not(.brx-open)::after {
inset-inline-start: 100%;
}
.brx-header-right[data-builder-window] #brx-header .dwc-nest-menu:not(.brx-open)::after {
inset-inline-end: 100%;
}
[data-builder-window] #brx-header .dwc-nest-menu[data-offcanvas="true"]:not(.brx-open)::after{
content: 'To edit in Offcanvas mode, select the Nav (Nestable), go to the CONTENT tab > MOBILE MENU, enable "Keep open while styling" | TIP: click here to select Nav (Nestable)';
position: absolute;
inset-block-start: 100%;
padding-block-start: 20px;
color: #e1e1e1;
font-size: 12px;
line-height: 1.5;
background: #2b2b2b;
min-block-size: fit-content;
padding: 1em;
inline-size: 250px;
}
@media (max-width: 1200px){
[data-builder-window] #brx-header .dwc-nest-menu[data-offcanvas="true"]:not(.brx-open)::after{
content: 'To edit in Offcanvas mode, select the Nav (Nestable), go to the CONTENT tab > MOBILE MENU, enable "Keep open while styling" ';
position: absolute;
inset-inline-start: var(--mobile-menu-width);
padding-inline-start: 20px;
}
}
[data-builder-mode] [data-offcanvas="true"]:not(.brx-open) .dwc-nav-wrapper {
transform: translateX(0);
visibility: visible;
}
[data-builder-window] [data-last-item-is-button="true"][data-offcanvas="true"].dwc-nest-menu .brx-nav-nested-items > .menu-item:last-of-type {
padding-inline: var(--menu-item-inline-padding) !important;
padding-block: var(--menu-item-block-padding) !important;
}
/* === */
:is(.brx-header-left, .brx-header-right)[data-builder-window] .brxe-nav-nested .brxe-dropdown .brx-dropdown-content:not(.brx-open .brx-dropdown-content) {
display: none;
}
:is(.brx-header-left, .brx-header-right)[data-builder-window] #brx-header .dwc-nest-menu.brxe-nav-nested .brx-nav-nested-items {
scrollbar-width: none;
}
/* stripe style fix*/
html:not(.dwc-mobile) .dwc-stripe-style:not(.brx-header-left, .brx-header-right) .dwc-nest-header__container:not(:has([data-offcanvas="true"])) {
align-items: stretch !important;
}
html:not(.dwc-mobile) .dwc-stripe-style:not(.brx-header-left, .brx-header-right) .dwc-nest-menu:not([data-offcanvas="true"]) .dwc-nav-wrapper,
html:not(.dwc-mobile) .dwc-stripe-style:not(.brx-header-left, .brx-header-right) .dwc-nest-menu:not([data-offcanvas="true"]) .brx-nav-nested-items,
html:not(.dwc-mobile) .dwc-stripe-style:not(.brx-header-left, .brx-header-right) .dwc-nest-menu:not([data-offcanvas="true"]) .brx-nav-nested-items > .brxe-dropdown,
html:not(.dwc-mobile) .dwc-stripe-style:not(.brx-header-left, .brx-header-right) .dwc-nest-menu:not([data-offcanvas="true"]) .brx-nav-nested-items > .brxe-dropdown > .brx-submenu-toggle,
html:not(.dwc-mobile) .dwc-stripe-style:not(.brx-header-left, .brx-header-right) .dwc-nest-menu:not([data-offcanvas="true"]) .brx-nav-nested-items > li >
a:not([data-last-item-is-button="true"] .menu-item:last-of-type a, [data-last-item-is-button="true-2"] .menu-item:nth-last-of-type(-n+2) a, [data-last-item-is-button="true-3"] .menu-item:nth-last-of-type(-n+3) a, .dwc-nest-menu__logo)
/* a:not(:is([data-last-item-is-button="true"], [data-last-item-is-button="true-2"], [data-last-item-is-button="true-3"]).dwc-nest-menu .brx-nav-nested-items>:is(.menu-item:last-of-type, .menu-item:nth-last-of-type(-n+2), .menu-item:nth-last-of-type(-n+3)) a) */ {
height: 100%;
}
html:not(.dwc-mobile) .dwc-stripe-style:not(.brx-header-left, .brx-header-right) .dwc-nest-menu:not([data-offcanvas="true"]) .brx-nav-nested-items > li.menu-item {
height: 100%;
display: flex;
align-items: center;
}
/*fix overlay in boxed mode*/
.brx-boxed .dwc-nest-menu-overlay {
inline-size: var(--boxed-width, 100%);
inset-inline-start: 50%;
transform: translateX(-50%);
}
/*wait for stripe style to load before active */
body:is(.dwc-stripe-style, .dwc-adaptive-height):not(.adaptive-height-active, .brx-header-right, .brx-header-left) .dwc-nest-menu:not([data-offcanvas="true"]) .brx-has-megamenu{
pointer-events: none;
}
/* LAST CTA BUTTONS */
/* Button styling for FRIST BUTTON*/
:is([data-last-item-is-button="true"], [data-last-item-is-button="true-2"], [data-last-item-is-button="true-3"]).dwc-nest-menu .brx-nav-nested-items > .menu-item:last-of-type a {
color: var(--menu-cta-clr);
background-color: var(--menu-cta-bg);
border-radius: var(--menu-cta-radius) !important;
padding-inline: var(--menu-cta-inline-padding) !important;
padding-block: var(--menu-cta-block-padding) !important;
border: var(--menu-cta-border);
}
:is([data-last-item-is-button="true"], [data-last-item-is-button="true-2"], [data-last-item-is-button="true-3"]).dwc-nest-menu .brx-nav-nested-items > .menu-item:nth-last-of-type(1) a:hover {
color: var(--menu-cta-hover-clr);
background-color: var(--menu-cta-hover-bg);
}
/* Button styling for second button*/
:is([data-last-item-is-button="true-2"], [data-last-item-is-button="true-3"]).dwc-nest-menu .brx-nav-nested-items > .menu-item:nth-last-of-type(2) a {
color: var(--menu-cta-2-clr);
background-color: var(--menu-cta-2-bg);
border-radius: var(--menu-cta-2-radius) !important;
padding-inline: var(--menu-cta-2-inline-padding) !important;
padding-block: var(--menu-cta-2-block-padding) !important;
border: var(--menu-cta-2-border);
}
:is([data-last-item-is-button="true-2"], [data-last-item-is-button="true-3"]).dwc-nest-menu .brx-nav-nested-items > .menu-item:nth-last-of-type(2) a:hover {
color: var(--menu-cta-2-hover-clr);
background-color: var(--menu-cta-2-hover-bg);
}
/* Button styling for third button */
[data-last-item-is-button="true-3"].dwc-nest-menu .brx-nav-nested-items > .menu-item:nth-last-of-type(3) a {
color: var(--menu-cta-3-clr);
background-color: var(--menu-cta-3-bg);
border-radius: var(--menu-cta-3-radius) !important;
padding-inline: var(--menu-cta-3-inline-padding) !important;
padding-block: var(--menu-cta-3-block-padding) !important;
border: var(--menu-cta-3-border);
}
[data-last-item-is-button="true-3"].dwc-nest-menu .brx-nav-nested-items > .menu-item:nth-last-of-type(3) a:hover {
color: var(--menu-cta-3-hover-clr);
background-color: var(--menu-cta-3-hover-bg);
}
/* Adjust padding for all variants in desktop mode */
html:not(.dwc-mobile) [data-last-item-is-button="true"].dwc-nest-menu .brx-nav-nested-items > .menu-item:last-of-type,
html:not(.dwc-mobile) [data-last-item-is-button="true-2"].dwc-nest-menu .brx-nav-nested-items > .menu-item:nth-last-of-type(-n+2),
html:not(.dwc-mobile) [data-last-item-is-button="true-3"].dwc-nest-menu .brx-nav-nested-items > .menu-item:nth-last-of-type(-n+3) {
padding-inline-start: var(--menu-item-inline-padding);
}
/* Center alignment for single button case */
html:not(.dwc-mobile) [data-last-item-is-button-alignment="center"][data-last-item-is-button="true"].dwc-nest-menu:not(.brx-open) .dwc-nest-nav-items > li:is(:last-of-type, :first-of-type) {
margin-inline-start: auto;
}
/* Center alignment for two buttons case */
html:not(.dwc-mobile) [data-last-item-is-button-alignment="center"][data-last-item-is-button="true-2"].dwc-nest-menu:not(.brx-open) .dwc-nest-nav-items > li:is(:nth-last-of-type(2), :first-of-type) {
margin-inline-start: auto;
}
/* Center alignment for three buttons case */
html:not(.dwc-mobile) [data-last-item-is-button-alignment="center"][data-last-item-is-button="true-3"].dwc-nest-menu:not(.brx-open) .dwc-nest-nav-items > li:is(:nth-last-of-type(3), :first-of-type) {
margin-inline-start: auto;
}
/* Left alignment for single button case */
html:not(.dwc-mobile) [data-last-item-is-button-alignment="left"][data-last-item-is-button="true"].dwc-nest-menu:not(.brx-open) .dwc-nest-nav-items > li:last-of-type {
margin-inline-start: auto;
}
/* Left alignment for two buttons case */
html:not(.dwc-mobile) [data-last-item-is-button-alignment="left"][data-last-item-is-button="true-2"].dwc-nest-menu:not(.brx-open) .dwc-nest-nav-items > li:nth-last-of-type(2) {
margin-inline-start: auto;
}
/* Left alignment for three buttons case */
html:not(.dwc-mobile) [data-last-item-is-button-alignment="left"][data-last-item-is-button="true-3"].dwc-nest-menu:not(.brx-open) .dwc-nest-nav-items > li:nth-last-of-type(3) {
margin-inline-start: auto;
}
/* General width rule for all button cases and alignments */
html:not(.dwc-mobile):has(:is([data-last-item-is-button-alignment="center"], [data-last-item-is-button-alignment="left"]):is([data-last-item-is-button="true"], [data-last-item-is-button="true-2"], [data-last-item-is-button="true-3"])) :is(.dwc-menu-wrap, .dwc-nest-menu) {
inline-size: 100%;
}
/* align dropdown content to bottom */
html:not(.dwc-mobile) .bricks-is-frontend:not(.brx-header-left, .brx-header-right) .dwc-nest-header__container:has([data-align-content-bottom="true"]):not(:has([data-offcanvas="true"])) {
align-items: stretch !important;
}
html:not(.dwc-mobile) .bricks-is-frontend:not(.brx-header-left, .brx-header-right) .dwc-nest-menu[data-align-content-bottom="true"]:not([data-offcanvas="true"]) .dwc-nav-wrapper,
html:not(.dwc-mobile) .bricks-is-frontend:not(.brx-header-left, .brx-header-right) .dwc-nest-menu[data-align-content-bottom="true"]:not([data-offcanvas="true"]) .brx-nav-nested-items,
html:not(.dwc-mobile) .bricks-is-frontend:not(.brx-header-left, .brx-header-right) .dwc-nest-menu[data-align-content-bottom="true"]:not([data-offcanvas="true"]) .brx-nav-nested-items > .brxe-dropdown,
html:not(.dwc-mobile) .bricks-is-frontend:not(.brx-header-left, .brx-header-right) .dwc-nest-menu[data-align-content-bottom="true"]:not([data-offcanvas="true"]) .brx-nav-nested-items > .brxe-dropdown > .brx-submenu-toggle,
html:not(.dwc-mobile) .bricks-is-frontend:not(.brx-header-left, .brx-header-right) .dwc-nest-menu[data-align-content-bottom="true"]:not([data-offcanvas="true"]) .brx-nav-nested-items > li >
a:not([data-last-item-is-button="true"] .menu-item:last-of-type a, [data-last-item-is-button="true-2"] .menu-item:nth-last-of-type(-n+2) a, [data-last-item-is-button="true-3"] .menu-item:nth-last-of-type(-n+3) a, .dwc-nest-menu__logo)
/* a:not(:is([data-last-item-is-button="true"], [data-last-item-is-button="true-2"], [data-last-item-is-button="true-3"]).dwc-nest-menu .brx-nav-nested-items>:is(.menu-item:last-of-type, .menu-item:nth-last-of-type(-n+2), .menu-item:nth-last-of-type(-n+3)) a, .dwc-nest-menu__logo)*/ {
height: 100%;
}
html:not(.dwc-mobile) .bricks-is-frontend:not(.brx-header-left, .brx-header-right) .dwc-nest-menu[data-align-content-bottom="true"]:not([data-offcanvas="true"]) .brx-nav-nested-items > li.menu-item {
height: 100%;
display: flex;
align-items: center;
}
/* dropdown content gap */
html:not(.dwc-mobile) body:not(.brx-header-left, .brx-header-right) .dwc-nest-menu:not([data-offcanvas="true"]) .brxe-dropdown.open > .brx-dropdown-content:not(.brx-dropdown-content .brx-dropdown-content) {
transform: translateY(calc(var(--caret-size) - var(--dropdown-content-border-size))) scaleX(1) scaleY(1);
}
html:not(.dwc-mobile) body:not(.brx-header-left, .brx-header-right) .dwc-nest-menu:not([data-offcanvas="true"]) .brxe-dropdown.open > .brx-dropdown-content .brx-dropdown-content{
transform: translateY(0) scaleX(1) scaleY(1);
}
html:not(.dwc-mobile) .brx-dropdown-content:not(.open .brx-dropdown-content){
--dropdown-content-border: solid transparent var(--dropdown-content-border-size);
}
html:not(.dwc-mobile) body:not(.brx-header-right, .brx-header-left) .dwc-nest-menu[data-align-content-bottom="true"][data-caret="true"]:not([data-offcanvas="true"]) .brx-nav-nested-items > .brxe-dropdown.open:not(.dwc-stripe-style .brx-has-megamenu)::after {
inline-size: calc((var(--dropdown-content-gap) * 1.414) - var(--dropdown-content-border-size));
aspect-ratio: 1;
opacity: 1;
transition: opacity 0.2s 0.1s;
}
html:not(.dwc-mobile) body:not(.brx-header-right, .brx-header-left) .dwc-nest-menu[data-align-content-bottom="true"][data-caret="true"]:not([data-offcanvas="true"]) .brx-nav-nested-items > .brxe-dropdown:not(.dwc-stripe-style .brx-has-megamenu)::after {
content: '';
position: absolute;
background-color: var(--dropdown-content-bg);
transform: rotate(45deg);
inset-block-end: calc((-1 * var(--dropdown-content-gap) - (var(--dropdown-content-gap) * 1.414 / 2.0)) + var(--dropdown-content-border-size));
inset-inline-start: calc(50% - var(
--dropdown-content-gap));
opacity: 0;
}
html:not(.dwc-mobile) body:not(.brx-header-right, .brx-header-left) .dwc-nest-menu:not([data-offcanvas="true"]) .brx-nav-nested-items > .brxe-dropdown:not(.dwc-stripe-style .brx-has-megamenu)::after {
border-top: var(--dropdown-content-border);
border-left: var(--dropdown-content-border);
z-index: 9999;
inset-block-end: calc(var(--dropdown-content-gap) * -1.55);
}
html:not(.dwc-mobile) body:not(.brx-header-left, .brx-header-right) .dwc-nest-menu:not([data-offcanvas="true"]) .brx-nav-nested-items > .brxe-dropdown:not(.dwc-stripe-style .brx-has-megamenu) .brx-dropdown-content{
outline: var(--dropdown-content-border);
}
/* === ends == */
body:not(.adaptive-height-active) .brxe-dropdown::after{
display: none;
}
/* multi-level dropdwon arrow > */
html:not(.dwc-mobile) body:not(.brx-header-left, .brx-header-right)
.dwc-nest-menu:not([data-offcanvas="true"])
.brxe-dropdown:not(.brx-has-megamenu) .brxe-dropdown .brx-submenu-toggle button
svg {
transform: rotate(270deg);
}
/* align dropwdown in builder */
[data-builder-mode]:not(.brx-header-left, .brx-header-right) .brx-has-megamenu .brx-dropdown-content[data-content-align="left"][preview-alignment="true"]{
left: 0 !important;
right: auto !important;
}
[data-builder-mode]:not(.brx-header-left, .brx-header-right) .brx-has-megamenu .brx-dropdown-content[data-content-align="right"][preview-alignment="true"]{
left: auto !important;
right: 0 !important;
}
[data-builder-mode]:not(.brx-header-left, .brx-header-right) .dwc-nest-menu:not(.brx-open) .brx-has-megamenu .brx-dropdown-content[data-content-align="center"][preview-alignment="true"]{
left: 50% !important;
transform: translatex(-50%) !important;
}
/* BREAKOUT ITEM */
.dwc-nest-menu > [data-breakout-link]:not(.dwc-nest-menu__logo){
color: var(--menu-cta-clr);
background-color: var(--menu-cta-bg);
border-radius: var(--menu-cta-radius) !important;
padding-inline: var(--menu-cta-inline-padding) !important;
padding-block: var(--menu-cta-block-padding) !important;
border: var(--menu-cta-border);
}
.dwc-nest-menu > [data-breakout-link="before"],
.dwc-nest-menu > [data-breakout-link]:not([data-breakout-link="after"], .dwc-nest-menu__logo){
margin-inline-end: var(--cta-breakout-gap);
margin-inline-start: auto;
}
.dwc-nest-menu > [data-breakout-link="after"]{
margin-inline-start: var(--cta-breakout-gap);
order: 1;
}
.dwc-menu-wrap:has(.dwc-nest-menu__logo[data-breakout-link]),
.brxe-nav-nested:has(.dwc-nest-menu__logo[data-breakout-link]){
inline-size: 100% !important;
}
.dwc-stripe-style .dwc-menu-wrap:has(.dwc-nest-menu__logo[data-breakout-link]),
.dwc-stripe-style .brxe-nav-nested:has(.dwc-nest-menu__logo[data-breakout-link]) {
min-height: var(--header-min-height);
}
.dwc-nest-header__container:has(.brx-nav-nested-items .dwc-nest-menu__logo[data-breakout-link]) {
flex-direction: column !important;
justify-content: center !important;
}
.dwc-nest-menu > [data-breakout-link="after"] + .brxe-toggle[aria-label="Open Menu"]{
margin-inline-start: auto;
}
/* BREAKIN ITEM */
.dwc-mobile .dwc-nav-wrapper:has([data-breakin]) {
background: linear-gradient(to top, var(--mobile-menu-bg) 0%, var(--mobile-menu-bg) calc(100% - var(--dwc-nest-header-height)), transparent calc(100% - var(--dwc-nest-header-height)), transparent 100%);
}
.dwc-mobile .dwc-nav-wrapper:has([data-breakin]) .breakin-container{
inline-size: 100%;
}
.dwc-mobile .dwc-nav-wrapper:has([data-breakin="end"]) .breakin-container{
margin-block-start: auto;
}
html:not(.dwc-mobile) .breakin-container{
visibility: hidden !important;
order: 0 !important;
}
/* ==== DYNAMIC NAV CUSTOM CSS ==== */
[data-builder-mode] .dwc-nest-menu .brx-nav-nested-items > a:not(.dwc-nest-menu__logo){
font-weight: var(--menu-item-font-weight);
font-size: var(--menu-item-font-size);
color: var(--menu-item-clr);
background-color: var(--menu-item-bg);
padding-block: var(--menu-item-block-padding);
padding-inline: var(--menu-item-inline-padding) !important;
}
[data-builder-mode] .dwc-nest-menu .brx-dropdown-content > a:not(.brx-has-megamenu a) {
background-color: var(--dropdown-item-bg);
padding-block: var(--dropdown-item-block-padding);
padding-inline: var(--dropdown-item-inline-padding) !important;
font-weight: var(--menu-item-font-weight);
font-size: var(--menu-item-font-size);
color: var(--menu-item-clr);
inline-size: 100%;
}
[data-builder-mode] .dwc-nest-menu .brx-dropdown-content > a:hover:not(.brx-has-megamenu a) {
background-color: var(--dropdown-item-hover-bg);
color: var(--dropdown-item-hover-clr);
}
body:not([data-builder-mode]) .dwc-nest-menu .brx-nav-nested-items > li:empty{
visibility: hidden;
}
.dwc-nest-menu .brx-nav-nested-items > * > .brxe-dropdown:not(.brx-has-megamenu) li .brx-submenu-toggle {
padding-block: var(--dropdown-item-block-padding);
padding-inline: var(--dropdown-item-inline-padding) !important;
}
/* ==== END DYNAMIC NAV CUSTOM CSS ==== */
/* CARET FIX FOR DYNAMIC MENU STRUCTURE*/
.dwc-nest-menu .brx-nav-nested-items >
li> .brx-has-megamenu.open > .brx-dropdown-content {
opacity: 1;
visibility: visible;
}
html:not(.dwc-mobile)
body:not(.brx-header-right, .brx-header-left) .dwc-nest-menu[data-align-content-bottom="true"][data-caret="true"]:not([data-offcanvas="true"])
.brx-nav-nested-items > li:has(.brx-has-megamenu.open):not(.dwc-stripe-style .brx-nav-nested-items > li)::after {
inline-size: calc((var(--dropdown-content-gap) * 1.414) - var(--dropdown-content-border-size));
aspect-ratio: 1;
opacity: 1;
transition: opacity 0.2s 0.1s;
}
html:not(.dwc-mobile)
body:not(.brx-header-right, .brx-header-left) .dwc-nest-menu[data-align-content-bottom="true"][data-caret="true"]:not([data-offcanvas="true"])
.brx-nav-nested-items > li:has(.brx-has-megamenu):not(.dwc-stripe-style .brx-nav-nested-items > li)::after {
content: '';
position: absolute;
background-color: var(--dropdown-content-bg);
transform: rotate(45deg);
inset-block-end: calc((-1 * var(--dropdown-content-gap) - (var(--dropdown-content-gap) * 1.414 / 2.0)) + var(--dropdown-content-border-size));
inset-inline-start: calc(50% - var(
--dropdown-content-gap));
opacity: 0;
}
html:not(.dwc-mobile)
.bricks-is-frontend:not(.brx-header-left, .brx-header-right)
.dwc-nest-menu[data-align-content-bottom="true"]:not([data-offcanvas="true"])
.brx-nav-nested-items > li {
height: 100%;
display: flex;
align-items: center;
}
html:not(.dwc-mobile)
.bricks-is-frontend:not(.brx-header-left, .brx-header-right) .dwc-nest-menu[data-align-content-bottom="true"]:not([data-offcanvas="true"])
.brx-nav-nested-items > li > .brxe-dropdown > .brx-submenu-toggle,
html:not(.dwc-mobile)
.bricks-is-frontend:not(.brx-header-left, .brx-header-right) .dwc-nest-menu[data-align-content-bottom="true"]:not([data-offcanvas="true"])
.brx-nav-nested-items > li > .brxe-dropdown{
height: 100%
}
.brx-nav-nested-items > li:has(> a),
.brx-nav-nested-items > li:has(> .brx-submenu-toggle) {
position: relative;
}
/* END CARET FIX FOR DYNAMIC MENU STRUCTURE*/
/* SPECIAL MOBILE STYLES TABLET ONLY */
@media (min-width: 640px) and (max-width: 1200px) {
/* mega menu */
.dwc-mobile .bricks-is-frontend [data-mobile-special-style="slide-split"] .dwc-nav-wrapper {
--mobile-menu-width: min(720px, 100%);
align-items: flex-end;
}
.dwc-mobile .bricks-is-frontend [data-mobile-special-style="slide-split"] [data-submenu-reveal="slide"].dwc-nest-menu.brxe-nav-nested .brx-has-megamenu.brxe-dropdown .brx-dropdown-content:not([data-hide-close-bar="true"] ul, [data-submenu-reveal="expand"].brx-has-megamenu ul) {
inline-size: min(400px, 100%);
box-shadow: 0px 0px 15px -10px #000000b3
}
.dwc-mobile .bricks-is-frontend [data-mobile-special-style="slide-split"] [data-submenu-reveal="slide"].dwc-nest-menu.brxe-nav-nested .brx-has-megamenu.brxe-dropdown .brx-dropdown-content:not([data-submenu-reveal="expand"].brx-has-megamenu ul) {
inset-inline-end: 0 !important;
inset-inline-start: auto !important;
inset-block-start: 0 !important;
}
/*dropdown*/
.dwc-mobile .bricks-is-frontend [data-mobile-special-style="slide-split"] [data-submenu-reveal="slide"].dwc-nest-menu.brxe-nav-nested .brxe-dropdown:not(:is([data-submenu-reveal="expand"], .brx-has-megamenu)) .brx-dropdown-content:not([data-submenu-reveal="expand"] *),
.dwc-mobile .bricks-is-frontend [data-mobile-special-style="slide-split"] [data-submenu-reveal="slide"].brxe-dropdown:not(.brx-has-megamenu) .brx-dropdown-content {
transition-property: inset-inline-start, inset-inline-end, visibility, opacity !important;
inset-inline-start: auto !important;
width: 400px;
box-shadow: 0px 0px 15px -10px #000000b3;
inset-block-start: 0 !important;
inset-inline-end: -100% !important;
}
.dwc-mobile .bricks-is-frontend [data-mobile-special-style="slide-split"] [data-submenu-reveal="slide"].brxe-nav-nested.brx-open .brxe-dropdown.open:not(.brx-has-megamenu, [data-submenu-reveal="expand"])>.brx-dropdown-content,
.dwc-mobile .bricks-is-frontend [data-mobile-special-style="slide-split"] .brx-open [data-submenu-reveal="slide"].brxe-dropdown.open>.brx-dropdown-content,
.dwc-mobile .bricks-is-frontend [data-mobile-special-style="slide-split"] .brx-open [data-submenu-reveal="slide"].brxe-dropdown.open>.brx-dropdown-content .open>.brx-dropdown-content {
inset-inline-end: 0% !important;
inset-inline-start: auto !important;
}
/*active styles*/
.dwc-mobile body:not(.brx-header-right, .brx-header-left) [data-mobile-special-style="slide-split"] .brx-nav-nested-items > li > .brx-has-megamenu.open > .brx-submenu-toggle{
background-color: var(--menu-item-active-bg);
}
.dwc-mobile body:not(.brx-header-right, .brx-header-left) [data-mobile-special-style="slide-split"] .brx-nav-nested-items > li.open > .brx-submenu-toggle{
background-color: var(--menu-item-active-bg);
}
}
/* END SPECIAL MOBILE STYLES TABLET ONLY */
/* OVERLAY HEADER NO TOP GAP */
.bricks-is-frontend [data-overlay-header-no-top-gap="true"] .dwc-nest-menu[data-slide-in-direction="top"][data-match-overlay-header-width="true"] .dwc-nav-wrapper {
inset-block-start: 0 !important;
}
/* .bricks-is-frontend [data-overlay-header-no-top-gap="true"] .dwc-nest-menu[data-slide-in-direction="top"][data-match-overlay-header-width="true"] .brx-nav-nested-items {
inset-block-start: calc((var(--dwc-nest-header-height) * 1.2) * -1) !important;
} */
.bricks-is-frontend [data-overlay-header-no-top-gap="true"] .dwc-nest-menu[data-submenu-reveal="slide"][data-slide-in-direction="top"][data-match-overlay-header-width="true"] .open.active>.brx-submenu-toggle > button:not([data-hide-close-bar="true"] button, [data-submenu-reveal="expand"] button, .open.active:has(.open.active)>.brx-submenu-toggle > button) {
inset-block-start: calc(var(--dwc-nest-header-height) / 2);
}
.bricks-is-frontend #brx-header >
.dwc-nest-header[data-overlay-header-no-top-gap="true"] {
border-top-left-radius: 0 !important;
border-top-right-radius: 0 !important;
}
.bricks-is-frontend
#brx-header:has([data-overlay-header-no-top-gap="true"]) {
padding-block-start: 0 !important;
}
/* END OVERLAY HEADER NO TOP GAP */
/* DROPDOWN ITEM IS BUTTON OR ICON */
/* IS ICON */
.brxe-dropdown[data-is-icon]{
padding-inline: var(--menu-item-inline-padding);
}
/* remove the underline */
.brxe-dropdown[data-is-icon] > .brx-submenu-toggle::before{
display: none;
}
/* general styling */
.dwc-nest-menu .brx-nav-nested-items > .brxe-dropdown[data-is-icon] > .brx-submenu-toggle{
height: auto !important;
width: auto;
min-width: var(--button-max-diameter);
aspect-ratio: 1;
border-radius: var(--menu-item-radius) !important;
padding: 0 !important;
margin-inline-start: auto;
margin-block: auto;
transition: 0.4s;
border: var(--menu-item-border)
}
.dwc-nest-menu .brx-nav-nested-items > .brxe-dropdown[data-is-icon]:hover > .brx-submenu-toggle{
border: var(--menu-item-hover-border)
}
.dwc-mobile .dwc-nest-menu .brx-nav-nested-items > .brxe-dropdown[data-is-icon] > .brx-submenu-toggle{
max-width: var(--button-max-diameter);
}
/* centralize */
.brxe-dropdown[data-is-icon] > .brx-submenu-toggle > button{
margin: auto;
color: var(--icon-clr);
font-size: var(--icon-size);
}
.brxe-dropdown[data-is-icon]:hover > .brx-submenu-toggle > button{
color: var(--icon-hover-clr);
}
/* reset rotation on icon when hovered */
.brxe-dropdown[data-is-icon] > .brx-submenu-toggle button[aria-expanded="true"] > * {
transform: rotateZ(0deg);
}
/* reset margin left on mobile*/
.dwc-mobile .dwc-nest-menu .brx-nav-nested-items > .brxe-dropdown[data-is-icon] > .brx-submenu-toggle{
margin-inline-start: initial;
}
/* remove inner span from document flow and hide visually*/
.brxe-dropdown[data-is-icon] > .brx-submenu-toggle > span{
clip: rect(1px,1px,1px,1px);
word-wrap: normal!important;
border: 0;
clip-path: inset(50%);
height: 1px;
margin: -1px;
overflow: hidden;
overflow-wrap: normal!important;
padding: 0;
position: absolute!important;
width: 1px;
}
/* IS ICON ENDS */
/* IS BUTTON */
.brxe-dropdown[data-is-button] > .brx-submenu-toggle{
height: auto !important;
margin-block: auto;
border-radius: var(--menu-item-radius) !important;
max-width: var(--menu-item-width);
border: var(--menu-item-border);
}
.brxe-dropdown[data-is-button]:hover > .brx-submenu-toggle {
border: var(--menu-item-hover-border);
}
/* centralize text in span */
.brxe-dropdown[data-is-button] > .brx-submenu-toggle > span{
margin-inline: auto;
}
/* remove button from document flow to allow text to centralize, but keep accessible*/
.brxe-dropdown[data-is-button="no-chevron"] > .brx-submenu-toggle > button{
clip: rect(1px,1px,1px,1px);
word-wrap: normal!important;
border: 0;
clip-path: inset(50%);
height: 1px;
margin: -1px;
overflow: hidden;
overflow-wrap: normal!important;
padding: 0;
position: absolute!important;
width: 1px;
}
/* block padding on mobile */
.dwc-mobile .brxe-dropdown:is([data-is-icon], [data-is-button]){
padding-block: var(--menu-item-block-padding);
padding-inline: var(--menu-item-inline-padding);
}
/* IS BUTTON ENDS */
/* DROPDWON ITEM IS BUTTON OR ICON ENDS */
/* RTL */
html:not(.dwc-mobile) :is(:not(.brx-header-left, .brx-header-right)).bricks-is-frontend .dwc-nest-menu:not([data-offcanvas="true"]) .brx-has-megamenu .brx-dropdown-content:not([data-use-selector="true"]) {
inset-inline-end: var(--right-position)!important;
}
html:not(.dwc-mobile)[dir=rtl] .dwc-stripe-style .open.brx-has-megamenu:not([data-offcanvas="true"] .brx-has-megamenu)::before {
transform: translateX(50%);
}
html:not(.dwc-mobile)[dir=rtl] body:not(.brx-header-left, .brx-header-right)
.dwc-nest-menu:not([data-offcanvas="true"])
.brxe-dropdown:not(.brx-has-megamenu) .brxe-dropdown .brx-submenu-toggle button
svg {
transform: rotate(-270deg);
}
/*RTL ENDS */
/* FIXES */
.dwc-nest-nav-items > li {
width: auto;
}
li {
-webkit-tap-highlight-color: transparent;
}
html:not(.dwc-mobile) .dwc-adaptive-height #brx-header > *:not(.dwc-nest-header, .dwc-nest-header + *){
z-index: 9999;
position: relative;
}
/* dropdown within a dropdown color/chevron */
li:not(.brx-has-megamenu) .brx-submenu-toggle:not( .brx-nav-nested-items > li > *, li:hover > *) {
color: var(--dropdown-item-clr);
}
.dwc-nest-menu .brxe-dropdown:not(.brx-has-megamenu) li .brx-submenu-toggle svg{
--chevron-clr: var(--dropdown-item-clr);
--chevron-hover-clr: var(--dropdown-item-hover-clr);
}
/* account for admn bar on mobile menu */
.dwc-mobile .dwc-nav-wrapper {
inset-block-start: var(--wp-admin--admin-bar--height, 0px);
}
.dwc-mobile .brxe-nav-nested.brx-open .brx-nav-nested-items {
top:0;
}
/* fix safari issue on fixed element inside scrollable container */
.dwc-mobile .dwc-nest-menu.brxe-nav-nested:not([data-submenu-reveal="expand"]) .brx-nav-nested-items:has(.brxe-dropdown.open.active:not([data-submenu-reveal="expand"])){
overflow-y: hidden;
}
/* Only apply to browsers that support attr() with units */
@supports (width: attr(data-format px)) {
[data-builder-mode] .dwc-nest-menu {
--global-width: attr(builder-preview-content-width px);
}
}
/* Only apply to browsers that DON'T support attr() with units (Firefox) */
@supports not (width: attr(data-format px)) {
[data-builder-mode] .brx-dropdown-content {
--dropdown-content-width: var(--dropdown-content-default-width) !important;
}
}
body:has(.brx-sticky) [id] {
scroll-margin-top: var(--dwc-nest-header-height);
}
/* phone landscape */
@media (height < 480px){
.dwc-mobile .bricks-is-frontend .dwc-nest-menu[data-slide-in-direction="top"][data-match-overlay-header-width="true"] .dwc-nav-wrapper {
block-size: 100dvb !important;
}
.dwc-mobile .dwc-nest-menu[data-slide-in-direction="top"][data-match-overlay-header-width="true"] .brx-nav-nested-items {
min-block-size: 100dvb !important;
overflow-y: auto !important;
}
.dwc-mobile [data-overlay-header-mobile="true"] [data-slide-in-direction="top"][data-match-overlay-header-width="true"] .dwc-nest-menu-top {
z-index: 9999;
border-radius: var(--overlay-header-radius);
background-color: var(--overlay-header-bg) !important;
backdrop-filter: blur(var(--overlay-header-blur));
}
.dwc-mobile .bricks-is-frontend [data-submenu-reveal="slide"].dwc-nest-menu .brx-dropdown-content {
overscroll-behavior: contain;
}
}
/* match mega menu content width to tabbed nav width when tabbed hero is enabled*/
html:not(.dwc-mobile)
.dwc-nest-menu
.brx-has-megamenu > .brx-dropdown-content:has([data-tabbed-hero="true"]):not(:has(.active:hover)) {
clip-path: inset(0 calc(100% - var(--tab-list-width)) 0 0);
}
/* automatically remove padding from header div when a block is added to it*/
.dwc-nest-header:has(>.brxe-block){
padding-inline: 0px;
}
/* add inline padding to a block when it is a direct child of the header div*/
.dwc-nest-header > .brxe-block{
padding-inline: var(--header-inline-padding)
}
/* if a block wraps the header container, inherit the header background color*/
.brxe-block:has(.dwc-nest-header__container){
background-color:var(--header-bg)
}
/*fix for menu item text color with <font> tag */
.dwc-mobile .dwc-nest-menu[data-submenu-reveal="expand"] .brxe-dropdown.open>.brx-submenu-toggle font,
.dwc-mobile .dwc-nest-menu [data-submenu-reveal="expand"].brxe-dropdown.open>.brx-submenu-toggle font{
color: var(--dropdown-expanded-clr) !important;
}
/* when using special mobile style, allow menu to close when clicking outside the menu*/
.dwc-mobile .bricks-is-frontend [data-overlay-header-mobile="true"] .dwc-nest-menu[data-slide-in-direction="top"][data-match-overlay-header-width="true"] :is(.dwc-nav-wrapper):not(:has(.brxe-dropdown.open)) {
block-size: fit-content !important;
}//document.body.classList.add('adaptive-height-active');
document.body.classList.add('show-nav');
function updateMobileClass(minWidth = MegaMenuCONFIG.minWidth) {
const classList = document.documentElement.classList;
const viewportWidth = document.documentElement.clientWidth;
const isMobile = viewportWidth < minWidth;
if (isMobile) {
classList.add('dwc-mobile');
} else {
classList.remove('dwc-mobile');
}
}
updateMobileClass();
// Centered Logo functionality
class CenteredLogoController {
constructor(config = {}) {
this.config = {
enable: config.enable ?? CenteredLogoCONFIG.enable,
allowOddItems: config.allowOddItems ?? CenteredLogoCONFIG.allowOddItems,
forceCenteredLogo: config.forceCenteredLogo ?? CenteredLogoCONFIG.forceCenteredLogo,
centerNudge: config.centerNudge ?? CenteredLogoCONFIG.centerNudge,
roundOffFactor: config.roundOffFactor || CenteredLogoCONFIG.roundOffFactor,
headerSelector: config.headerSelector || MegaMenuCONFIG.headerSelector
};
this.logoListItem = null;
this.listItems = [];
this.resizedFinished = null;
this.isInitialized = false;
}
// Method to check if DOM elements are ready
checkDOMReady() {
const headerLogo = document.querySelector(`${this.config.headerSelector} .dwc-nest-menu__logo`);
const headerInner = document.querySelector(`${this.config.headerSelector} .dwc-nest-header__container`);
const menu = document.querySelector(`${this.config.headerSelector} .dwc-nest-menu`);
const listParent = document.querySelector(`${this.config.headerSelector} .brx-nav-nested-items`);
return headerLogo && headerInner && menu && listParent;
}
// Early initialization attempt
initializeEarly() {
if (!this.config.enable || this.isInitialized) return;
// Try immediate initialization if elements are ready
if (this.checkDOMReady()) {
document.body.classList.add('dom-ready')
this.setupElements();
this.initialize();
return;
}
// If not ready, use polling with shorter intervals for faster response
const pollForElements = () => {
if (this.checkDOMReady()) {
this.setupElements();
this.initialize();
return;
}
// Poll every 10ms for very fast response
setTimeout(pollForElements, 10);
};
pollForElements();
}
setupElements() {
this.elements = {
headerLogo: document.querySelector(`${this.config.headerSelector} .dwc-nest-menu__logo`),
headerInner: document.querySelector(`${this.config.headerSelector} .dwc-nest-header__container`),
menu: document.querySelector(`${this.config.headerSelector} .dwc-nest-menu`),
listParent: document.querySelector(`${this.config.headerSelector} .brx-nav-nested-items`)
};
}
initialize() {
if (!this.config.enable || this.isInitialized) {
return;
}
// Ensure elements are set up before proceeding
if (!this.elements) {
this.setupElements();
}
// Check if all required elements exist
if (!this.elements.headerLogo || !this.elements.headerInner ||
!this.elements.menu || !this.elements.listParent) {
return;
}
this.isInitialized = true;
// Create logo list item
this.logoListItem = document.createElement('li');
this.logoListItem.classList.add('dwc-header-logo-item');
// Get list items excluding those with toggle divs, and exclude empty li
this.listItems = Array.from(this.elements.listParent.children).filter(item => {
const hasToggleDiv = item.querySelector('.brx-toggle-div');
const isEmpty = item.matches('li:empty');
const hasExclude = item.querySelector('.dwc-exclude')
return !hasToggleDiv && !isEmpty && !hasExclude;
});
// Calculate position
const halfIndex = this.listItems.length / 2;
const logoOrder = this.roundHalfIndex(halfIndex, this.config.roundOffFactor);
this.logoListItem.style.order = logoOrder;
// Apply centering immediately
this.centerLogo(logoOrder);
// Add resize listener
window.addEventListener('resize', this.centerLogo.bind(this, logoOrder));
}
roundHalfIndex(halfIndex, roundOffFactor) {
if (roundOffFactor === 'before') {
return Math.floor(halfIndex + 1);
} else {
return Math.ceil(halfIndex + 1);
}
}
centerLogo(logoOrder) {
if (!this.config.allowOddItems && this.listItems.length % 2 !== 0) {
return;
}
clearTimeout(this.resizedFinished);
this.resizedFinished = setTimeout(() => {
const isDesktop = window.innerWidth >= MegaMenuCONFIG.minWidth;
if (isDesktop) {
document.body.classList.add('desktop-centered')
let listID = 1;
// Set order for list items
this.listItems.forEach(listItem => {
if (!listItem.dataset.id) {
listItem.dataset.id = listID++;
}
this.logoListItem.style.order = logoOrder;
listItem.style.order = listItem.getAttribute('data-id');
});
if (!this.elements.listParent.contains(this.logoListItem) ||
!this.elements.listParent.contains(this.elements.headerLogo)) {
this.elements.listParent.prepend(this.logoListItem);
this.logoListItem.append(this.elements.headerLogo);
this.elements.headerInner.classList.add('dwc-logo-is-centered');
const logoBounds = this.elements.headerLogo.getBoundingClientRect();
const viewportWidth = document.documentElement.clientWidth;
const logoWidth = this.elements.headerLogo.offsetWidth;
const distanceRight = logoBounds.x;
// Force center if needed
if (this.config.forceCenteredLogo) {
const rightOffset = ((distanceRight + (logoWidth / 2)) + this.config.centerNudge) - (viewportWidth / 2);
const offsetMargin = rightOffset * 2;
this.elements.menu.style.marginRight = offsetMargin + 'px';
}
if (CenteredLogoCONFIG.centerGuide) {
if (document.body.classList.contains('logged-in')) {
// Check if the indicator already exists
if (!document.querySelector('.dwc-center-guide')) {
const indicatorEl = document.createElement('div')
indicatorEl.classList.add('dwc-center-guide')
indicatorEl.style.width = this.elements.headerLogo.offsetWidth + 'px';
document.body.appendChild(indicatorEl)
}
}
}
}
} else {
document.body.classList.remove('desktop-centered');
this.elements.headerInner.classList.add('dwc-logo-is-centered');
this.elements.menu.style.marginRight = null;
this.elements.headerInner.prepend(this.elements.headerLogo);
this.logoListItem.style.order = null;
this.listItems.forEach(listItem => {
listItem.style.order = null;
});
}
}, 500);
}
}
class MenuAnimationController {
constructor(config = {}) {
this.config = {
minWidthThreshold: config.minWidthThreshold || MegaMenuCONFIG.minWidth,
stripeStyle: config.stripeStyle ?? MegaMenuCONFIG.stripeStyle,
adaptiveHeight: config.adaptiveHeight ?? MegaMenuCONFIG.adaptiveHeight,
toolTip: config.toolTip ?? MegaMenuCONFIG.toolTip,
menuAutoExpansion: config.menuAutoExpansion ?? MegaMenuCONFIG.menuAutoExpansion,
headerSelector: config.headerSelector || MegaMenuCONFIG.headerSelector,
megaMenuLinksSelector: `${config.headerSelector || MegaMenuCONFIG.headerSelector} .brx-has-megamenu`,
offCanvasSelector: `${config.headerSelector || MegaMenuCONFIG.headerSelector} .dwc-nest-menu[data-offcanvas="true"]`,
shiftFactor: config.shiftFactor ?? MegaMenuCONFIG.shiftFactor, // Added shiftFactor
minOverflow: config.minOverflow ?? MegaMenuCONFIG.minOverflow // Added minOverflow
};
this.megaMenuLinks = document.querySelectorAll(this.config.megaMenuLinksSelector);
this.header = document.querySelector(this.config.headerSelector);
this.headerDiv = document.querySelector('.dwc-nest-header');
this.maxMenuWidth = 0;
this.maxMenuHeight = 0;
this.headerTimeoutId = null;
this.mobileMenuTimeoutId = null;
this.applyConfigClasses();
}
applyConfigClasses() {
if (MegaMenuCONFIG.stripeStyle) {
document.body.classList.add('dwc-stripe-style');
}
if (MegaMenuCONFIG.adaptiveHeight) {
document.body.classList.add('dwc-adaptive-height');
}
if (this.header) {
this.header.style.setProperty('--stripe-style-enabled', this.config.stripeStyle ? '1' : '0');
this.header.style.setProperty('--height-animation-enabled', this.config.adaptiveHeight ? '1' : '0');
}
}
/*
isAboveMinWidth() {
return window.innerWidth >= this.config.minWidthThreshold;
}
*/
getViewportWidth() {
// Check if window exists (for SSR/Node environments)
if (typeof window === 'undefined') return 0;
return window.innerWidth ||
document.documentElement?.clientWidth ||
document.body?.clientWidth ||
0;
}
isAboveMinWidth() {
return this.getViewportWidth() >= this.config.minWidthThreshold;
}
isOffCanvas() {
return !!document.querySelector(this.config.offCanvasSelector);
}
hasHeaderClass() {
return document.body.classList.contains('brx-header-left') ||
document.body.classList.contains('brx-header-right');
}
updateMenuVariables() {
if (!this.isAboveMinWidth() || !this.header) return;
// Cache RTL detection for performance - only check once per method call
const isRTLLayout = this.isRTL ? this.isRTL() : false;
let menuOpened = false;
let menuWidth = 0;
let menuHeight = 0;
let menuOffset = 0; // Renamed for direction-agnostic naming
this.megaMenuLinks.forEach(link => {
if (link.classList.contains('open')) {
requestAnimationFrame(() => {
let dropdownMenu = link.querySelector('.brx-dropdown-content');
let nestHeader = link.closest(this.config.headerSelector);
if (dropdownMenu) {
// Get dimensions (direction-agnostic)
menuWidth = dropdownMenu.offsetWidth;
menuHeight = dropdownMenu.offsetHeight;
// RTL-aware offset calculation
if (isRTLLayout) {
// RTL: Calculate offset from right edges
// Formula: distance from header's right edge to menu's right edge
const headerRect = nestHeader.getBoundingClientRect();
const menuRect = dropdownMenu.getBoundingClientRect();
menuOffset = (headerRect.right - menuRect.right) + window.scrollX;
} else {
// LTR: Original left-based calculation (unchanged for backwards compatibility)
menuOffset = Number(dropdownMenu.getBoundingClientRect().left) - Number(nestHeader.getBoundingClientRect().left) + window.scrollX;
}
// Update maximum dimensions (direction-agnostic)
this.maxMenuWidth = Math.max(this.maxMenuWidth, menuWidth);
this.maxMenuHeight = Math.max(this.maxMenuHeight, menuHeight);
// Calculate scaling factors (direction-agnostic)
let scaleX = menuWidth / this.maxMenuWidth;
let scaleY = menuHeight / this.maxMenuHeight;
// Set adaptive height if enabled (direction-agnostic)
if (this.config.adaptiveHeight || this.config.stripeStyle) {
this.header.style.setProperty('--dropdown-menu-height', `${menuHeight}px`);
}
// Set stripe-style variables with RTL awareness
if (this.config.stripeStyle) {
// Position variable - RTL-aware naming and calculation
if (isRTLLayout) {
// Set RTL-specific position variable
this.header.style.setProperty('--dropdown-menu-x-rtl', `${menuOffset}px`);
// Also set the standard variable for CSS that expects it
this.header.style.setProperty('--dropdown-menu-x', `${menuOffset}px`);
} else {
// LTR: Use standard left-based positioning
this.header.style.setProperty('--dropdown-menu-x', `${menuOffset}px`);
// Clear any RTL variable that might exist
this.header.style.removeProperty('--dropdown-menu-x-rtl');
}
// Set dimension and scaling variables (direction-agnostic)
this.header.style.setProperty('--dropdown-menu-width', `${menuWidth}px`);
this.header.style.setProperty('--dropdown-menu-max-width', `${this.maxMenuWidth}px`);
this.header.style.setProperty('--dropdown-menu-max-height', `${this.maxMenuHeight}px`);
this.header.style.setProperty('--dropdown-menu-scale-x', scaleX.toString());
this.header.style.setProperty('--dropdown-menu-scale-y', scaleY.toString());
// Set direction indicator for CSS usage
this.header.style.setProperty('--dropdown-menu-direction', isRTLLayout ? 'rtl' : 'ltr');
}
}
});
menuOpened = true;
this.header.classList.add('show-menu-animation');
this.header.classList.remove('hide-menu-animation');
}
});
// Handle menu closing (unchanged logic, direction-agnostic)
if (!menuOpened) {
const hasAdaptiveHeight = document.body.classList.contains('dwc-adaptive-height');
const hasStripeStyle = document.body.classList.contains('dwc-stripe-style');
if (hasAdaptiveHeight && !hasStripeStyle) {
this.header.style.setProperty('--dropdown-menu-height', '0px');
}
this.header.style.setProperty('--dropdown-menu-scale-y', '0');
if (this.header) {
this.header.classList.add('hide-menu-animation');
this.header.classList.remove('show-menu-animation');
}
}
}
updateDropdownPositions() {
const viewportWidth = document.documentElement.clientWidth;
if (viewportWidth < this.config.minWidthThreshold) return; // Run only on desktop
const dropdowns = document.querySelectorAll(`${this.config.headerSelector} .dwc-nest-menu .brx-has-megamenu .brx-dropdown-content`);
const defaultElement = document.querySelector('#brx-header');
const defaultRect = defaultElement ? defaultElement.getBoundingClientRect() : null;
const isRTL = this.isRTL();
requestAnimationFrame(() => {
// Handle vertical positioning (global top or stripe style)
this.handleVerticalPositioning();
// Handle width and horizontal alignment positioning
dropdowns.forEach((dropdown) => {
this.setDropdownWidth(dropdown);
this.positionDropdownHorizontally(dropdown, defaultRect, viewportWidth, isRTL);
});
});
}
/**
* Detect if the document is using RTL (Right-to-Left) layout
*/
isRTL() {
const htmlDir = document.documentElement.dir?.toLowerCase();
if (htmlDir) return htmlDir === 'rtl';
const computedDirection = getComputedStyle(document.documentElement).direction;
return computedDirection === 'rtl';
}
/**
* Handle vertical positioning for dropdowns (global top positioning or stripe style)
*/
handleVerticalPositioning() {
const nestMenu = document.querySelector('.dwc-nest-menu');
const globalTopSelector = nestMenu ? nestMenu.getAttribute('data-global-content-vertical') : null;
if (globalTopSelector) {
this.positionDropdownsRelativeToElement(globalTopSelector, 'global top element');
} else if (this.config.stripeStyle) {
this.positionDropdownsRelativeToElement('#brx-header', '#brx-header bottom (stripe style)');
}
}
/**
* Position dropdowns relative to a specified element
*/
positionDropdownsRelativeToElement(selector, description) {
const targetElement = document.querySelector(selector);
if (!targetElement) return;
const positioningDropdowns = document.querySelectorAll(`${this.config.headerSelector} .dwc-nest-menu .brx-dropdown-content:not(.brx-dropdown-content .brx-dropdown-content)`);
const targetRect = targetElement.getBoundingClientRect();
positioningDropdowns.forEach(dropdown => {
const menuItem = dropdown.closest('.menu-item') || dropdown.parentElement;
const menuItemRect = menuItem.getBoundingClientRect();
const topPosition = menuItemRect.height + targetRect.bottom - menuItemRect.bottom;
dropdown.style.top = `${topPosition}px`;
});
// console.log(`Positioned dropdowns relative to ${description}`);
}
/**
* Set dropdown width based on data attributes or global settings
*/
setDropdownWidth(dropdown) {
// Check for individual data-content-width attribute first
const localSelector = dropdown.getAttribute('data-content-width');
if (localSelector) {
this.applyWidthFromSelector(dropdown, localSelector);
return;
}
// Fall back to global data-global-content-width setting
const nestMenu = document.querySelector('.dwc-nest-menu');
const globalSelector = nestMenu ? nestMenu.getAttribute('data-global-content-width') : null;
if (globalSelector) {
this.applyWidthFromSelector(dropdown, globalSelector);
}
}
/**
* Apply width to dropdown based on selector (number, CSS value, CSS variable, or element selector)
*/
applyWidthFromSelector(dropdown, selector) {
// Check if it's a number or value with CSS units
if (/^\d+(\.\d+)?(px|rem|em|%|vh|vw|ch|ex|cm|mm|in|pt|pc)?$/i.test(selector)) {
const hasUnit = /\d+(px|rem|em|%|vh|vw|ch|ex|cm|mm|in|pt|pc)$/i.test(selector);
const widthValue = hasUnit ? selector : `${selector}px`;
dropdown.style.setProperty('--dropdown-content-width', widthValue);
}
// Check if it's a CSS variable (starts with var( and ends with ))
else if (/^var\(--[\w-]+\)$/.test(selector)) {
this.applyWidthFromCSSVariable(dropdown, selector);
}
// Treat as element selector
else {
this.applyWidthFromElement(dropdown, selector);
}
}
/**
* Apply width from CSS variable
*/
applyWidthFromCSSVariable(dropdown, variableSelector) {
const variableName = variableSelector.match(/^var\((--[\w-]+)\)$/)[1];
const computedValue = getComputedStyle(document.documentElement).getPropertyValue(variableName).trim();
if (computedValue) {
const hasUnit = /\d+(px|rem|em|%|vh|vw|ch|ex|cm|mm|in|pt|pc)$/i.test(computedValue);
const widthValue = hasUnit ? computedValue : `${computedValue}px`;
dropdown.style.setProperty('--dropdown-content-width', widthValue);
}
}
/**
* Apply width from target element
*/
applyWidthFromElement(dropdown, selector) {
const targetElement = document.querySelector(selector);
if (targetElement) {
const targetWidth = targetElement.getBoundingClientRect().width;
dropdown.style.setProperty('--dropdown-content-width', `${targetWidth}px`);
}
}
/**
* Handle horizontal positioning of dropdown with RTL support and overflow management
* FIXED VERSION - Properly handles RTL overflow prevention
*/
positionDropdownHorizontally(dropdown, defaultRect, viewportWidth, isRTL) {
const parentLi = dropdown.closest('.brx-has-megamenu.brxe-dropdown');
if (!parentLi) return;
const contentAlign = dropdown.getAttribute('data-content-align');
let actualDropdownWidth = this.getActualDropdownWidth(dropdown);
const liRect = parentLi.getBoundingClientRect();
// Constrain width to viewport if dropdown is wider
if (actualDropdownWidth > viewportWidth) {
dropdown.style.setProperty('--dropdown-content-width', `${viewportWidth}px`);
actualDropdownWidth = viewportWidth;
}
// Calculate initial position based on alignment and RTL
let position = this.calculateInitialPosition(dropdown, parentLi, contentAlign, actualDropdownWidth, defaultRect, isRTL);
// Apply overflow corrections with proper RTL support
position = this.handleOverflowAdjustments(position, liRect, actualDropdownWidth, viewportWidth, isRTL);
// Set final position using appropriate CSS property
if (isRTL) {
// In RTL, we need to calculate right-based positioning
const rightPosition = liRect.width - position - actualDropdownWidth;
dropdown.style.setProperty('--right-position', `${rightPosition}px`);
dropdown.style.removeProperty('--left-position');
} else {
// LTR uses left-based positioning (existing behavior)
dropdown.style.setProperty('--left-position', `${position}px`);
dropdown.style.removeProperty('--right-position');
// Fallback for existing CSS that expects --left-position
if (!dropdown.style.getPropertyValue('--left-position')) {
dropdown.style.setProperty('--left-position', '0px');
}
}
}
/**
* Get actual dropdown width accounting for CSS transforms
*/
getActualDropdownWidth(dropdown) {
const computedStyle = getComputedStyle(dropdown);
const dropdownRect = dropdown.getBoundingClientRect();
// Extract scale factor from transform
const transform = computedStyle.transform || computedStyle.webkitTransform;
let scaleX = 1;
if (transform && transform !== 'none') {
const matrix = transform.match(/^matrix\((.+)\)$/);
if (matrix) {
const values = matrix[1].split(', ');
scaleX = parseFloat(values[0]);
}
}
return dropdownRect.width / scaleX;
}
/**
* Calculate initial dropdown position based on alignment and RTL settings
* ENHANCED VERSION with improved RTL positioning
*/
calculateInitialPosition(dropdown, parentLi, contentAlign, actualDropdownWidth, defaultRect, isRTL) {
const validAlignments = ['left', 'center', 'right'];
const hasValidAlignment = contentAlign && validAlignments.includes(contentAlign);
const liRect = parentLi.getBoundingClientRect();
if (!hasValidAlignment) {
// Default centering behavior
return this.calculateCenteredPosition(actualDropdownWidth, defaultRect, liRect, isRTL);
}
// Apply RTL-aware alignment mapping
const effectiveAlignment = this.getEffectiveAlignment(contentAlign, isRTL);
// Calculate position relative to parent element
switch (effectiveAlignment) {
case 'left':
return isRTL ? liRect.width : 0;
case 'right':
return isRTL ? 0 : (liRect.width - actualDropdownWidth);
case 'center':
return (liRect.width - actualDropdownWidth) / 2;
default:
return isRTL ? liRect.width : 0;
}
}
/**
* Map alignment values for RTL layouts
*/
getEffectiveAlignment(contentAlign, isRTL) {
if (!isRTL) return contentAlign;
// RTL alignment mapping
switch (contentAlign) {
case 'left': return 'right';
case 'right': return 'left';
case 'center': return 'center';
default: return contentAlign;
}
}
/**
* Calculate centered position for default alignment
* ENHANCED VERSION with better RTL support
*/
calculateCenteredPosition(actualDropdownWidth, defaultRect, liRect, isRTL) {
if (!defaultRect) return isRTL ? liRect.width / 2 : 0;
const defaultElement = document.querySelector('#brx-header');
const headerRect = defaultElement ? defaultElement.getBoundingClientRect() : null;
if (headerRect) {
const centerOffset = (defaultRect.width - actualDropdownWidth) / 2;
if (isRTL) {
// RTL: Calculate position relative to parent's right edge
const headerRightOffset = headerRect.right;
const liRightOffset = liRect.right;
return centerOffset - (headerRightOffset - liRightOffset);
} else {
// LTR: Calculate position relative to parent's left edge (existing logic)
const headerLeftOffset = headerRect.left + window.scrollX;
return centerOffset - (liRect.left - headerLeftOffset);
}
}
return isRTL ? liRect.width / 2 : 0;
}
/**
* Handle viewport overflow adjustments with proper RTL support
* COMPLETELY REWRITTEN for accurate RTL edge calculations
*/
handleOverflowAdjustments(position, liRect, actualDropdownWidth, viewportWidth, isRTL) {
// Calculate edges based on layout direction
let leftEdge, rightEdge;
if (isRTL) {
// RTL: position is relative to parent's right edge, calculate absolute edges
const parentRight = liRect.right;
rightEdge = parentRight - position;
leftEdge = rightEdge - actualDropdownWidth;
} else {
// LTR: position is relative to parent's left edge (existing logic)
leftEdge = liRect.left + position;
rightEdge = leftEdge + actualDropdownWidth;
}
let adjustedPosition = position;
const isViewportConstrained = actualDropdownWidth >= viewportWidth;
// Check for left viewport overflow
if (leftEdge < 0) {
const leftOverflow = Math.abs(leftEdge);
if (isViewportConstrained) {
// For viewport-constrained dropdowns, use exact positioning
if (isRTL) {
// RTL: adjust position to align left edge with viewport
adjustedPosition = position - leftOverflow;
} else {
// LTR: adjust position to align left edge with viewport
adjustedPosition += leftOverflow;
}
} else {
// For normal dropdowns, use configured shift behavior
const adjustedOverflow = leftOverflow < this.config.minOverflow ? this.config.minOverflow : leftOverflow;
if (isRTL) {
adjustedPosition -= adjustedOverflow * this.config.shiftFactor;
} else {
adjustedPosition += adjustedOverflow * this.config.shiftFactor;
}
}
}
// Recalculate right edge after left adjustments
let adjustedRightEdge;
if (isRTL) {
const parentRight = liRect.right;
adjustedRightEdge = parentRight - adjustedPosition;
} else {
adjustedRightEdge = liRect.left + adjustedPosition + actualDropdownWidth;
}
// Check for right viewport overflow
if (adjustedRightEdge > viewportWidth) {
const rightOverflow = adjustedRightEdge - viewportWidth;
if (isViewportConstrained) {
// For viewport-constrained dropdowns, position exactly at viewport edge
if (isRTL) {
// RTL: adjust position to align right edge with viewport
adjustedPosition += rightOverflow;
} else {
// LTR: adjust position to align right edge with viewport
adjustedPosition -= rightOverflow;
}
// Double-check: if this causes opposite overflow, prioritize based on RTL
let finalLeftEdge, finalRightEdge;
if (isRTL) {
const parentRight = liRect.right;
finalRightEdge = parentRight - adjustedPosition;
finalLeftEdge = finalRightEdge - actualDropdownWidth;
} else {
finalLeftEdge = liRect.left + adjustedPosition;
finalRightEdge = finalLeftEdge + actualDropdownWidth;
}
if (finalLeftEdge < 0) {
if (isRTL) {
// In RTL, prioritize right edge - align dropdown to right edge of viewport
adjustedPosition = liRect.right - viewportWidth;
} else {
// In LTR, prioritize left edge - align dropdown to left edge of viewport
adjustedPosition = -liRect.left;
}
}
} else {
// For normal dropdowns, use configured shift behavior
const adjustedOverflow = rightOverflow < this.config.minOverflow ? this.config.minOverflow : rightOverflow;
if (isRTL) {
adjustedPosition += adjustedOverflow * this.config.shiftFactor;
} else {
adjustedPosition -= adjustedOverflow * this.config.shiftFactor;
}
}
}
return adjustedPosition;
}
/**
* Handle dropdowns that are wider than the viewport
*/
handleWideDropdownOverflow(liRect, actualDropdownWidth, viewportWidth, isRTL) {
// For dropdowns wider than viewport, prioritize showing the start of content
// In RTL, this means showing the right side; in LTR, the left side
if (isRTL) {
// Align to right edge of viewport
return viewportWidth - liRect.left - actualDropdownWidth;
} else {
// Align to left edge of viewport
return -liRect.left;
}
}
setCurrentPageDropdownActive() {
if (!this.config.menuAutoExpansion) return;
const isDesktop = window.innerWidth >= this.config.minWidthThreshold;
const hasSpecialHeader = document.body.classList.contains('brx-header-left') ||
document.body.classList.contains('brx-header-right');
const isOffCanvas = !!document.querySelector(this.config.offCanvasSelector);
if (isDesktop && !hasSpecialHeader && !isOffCanvas) return;
const currentPageLink = document.querySelector('[aria-current="page"]');
if (currentPageLink) {
const parentDropdown = currentPageLink.closest('.brxe-dropdown');
let tabbedParentDropdown = currentPageLink.closest('.dwc-tabbed-nav-list__li');
// If tabbedParentDropdown has currentPageLink as a direct child, ignore it
if (tabbedParentDropdown) {
const directPageLink = tabbedParentDropdown.querySelector(':scope > a[aria-current="page"]');
if (directPageLink) {
tabbedParentDropdown = null; // Ignore tabbedParentDropdown
}
}
if (parentDropdown) {
setTimeout(() => {
// console.log(tabbedParentDropdown);
parentDropdown.classList.add('open', 'active');
// Only add 'active' class if tabbedParentDropdown exists
if (tabbedParentDropdown) {
tabbedParentDropdown.classList.add('active');
}
const submenuToggle = parentDropdown.querySelector('.brx-submenu-toggle');
let button = submenuToggle ? submenuToggle.querySelector('button') : null;
const menuToggle = document.querySelector('.dwc-nest-menu .brxe-toggle');
if (button) {
menuToggle.addEventListener('click', () => {
setTimeout(() => {
const submenuIsOpen = parentDropdown.classList.contains('open', 'active');
if (submenuIsOpen) {
button.setAttribute('aria-expanded', 'true');
currentPageLink.scrollIntoView({
behavior: 'smooth',
block: 'nearest'
});
}
}, 600);
});
}
}, 700);
}
}
}
updateChevronPosition(targetLink) {
if (!this.config.stripeStyle) return;
requestAnimationFrame(() => {
let headerElement = document.querySelector(this.config.headerSelector);
if (!headerElement) {
console.error('Chevron parent element not found.');
return;
}
// Cache RTL detection for performance within this animation frame
const isRTLLayout = this.isRTL ? this.isRTL() : false;
// Get element dimensions and positions
let linkRect = targetLink.getBoundingClientRect();
let headerRect = headerElement.getBoundingClientRect();
// Calculate link midpoint (geometric center - always the same regardless of direction)
let linkMidpoint = linkRect.left + linkRect.width / 2;
// RTL-aware reference point calculation
let headerReferenceOffset, navlinkMidpointOffset, navlinkEdgeOffset;
if (isRTLLayout) {
// RTL: Use right edge as reference point
let headerRightOffset = headerRect.right + window.scrollX;
// Calculate offsets relative to header's right edge
navlinkMidpointOffset = headerRightOffset - linkMidpoint;
navlinkEdgeOffset = headerRightOffset - linkRect.right;
headerReferenceOffset = headerRightOffset;
// Set RTL-specific CSS variables
headerElement.style.setProperty('--chevron-parent-right', `${headerReferenceOffset}px`);
headerElement.style.setProperty('--navlink-midpoint-rtl', `${navlinkMidpointOffset}px`);
headerElement.style.setProperty('--navlink-right', `${navlinkEdgeOffset}px`);
// Set unified variables for CSS that expects them (RTL context)
headerElement.style.setProperty('--navlink-midpoint', `${navlinkMidpointOffset}px`);
headerElement.style.setProperty('--navlink-edge', `${navlinkEdgeOffset}px`);
} else {
// LTR: Original left-based calculation (unchanged for perfect backwards compatibility)
let headerLeftOffset = headerRect.left + window.scrollX;
// Calculate offsets relative to header's left edge (original logic)
navlinkMidpointOffset = linkMidpoint - headerLeftOffset;
navlinkEdgeOffset = linkRect.left - headerLeftOffset;
headerReferenceOffset = headerLeftOffset;
// Set standard LTR CSS variables (original behavior)
headerElement.style.setProperty('--chevron-parent-left', `${headerReferenceOffset}px`);
headerElement.style.setProperty('--navlink-midpoint', `${navlinkMidpointOffset}px`);
headerElement.style.setProperty('--navlink-left', `${navlinkEdgeOffset}px`);
// Set unified edge variable for consistency
headerElement.style.setProperty('--navlink-edge', `${navlinkEdgeOffset}px`);
// Clean up any RTL variables that might exist from previous state
headerElement.style.removeProperty('--chevron-parent-right');
headerElement.style.removeProperty('--navlink-midpoint-rtl');
headerElement.style.removeProperty('--navlink-right');
}
// Set direction-agnostic variables (same for both LTR and RTL)
headerElement.style.setProperty('--chevron-parent-width', `${headerRect.width}px`);
headerElement.style.setProperty('--navlink-width', `${linkRect.width}px`);
// Set direction indicator for CSS conditional logic
headerElement.style.setProperty('--chevron-direction', isRTLLayout ? 'rtl' : 'ltr');
// Set boolean flags for easier CSS targeting
if (isRTLLayout) {
headerElement.style.setProperty('--is-rtl', '1');
headerElement.style.removeProperty('--is-ltr');
} else {
headerElement.style.setProperty('--is-ltr', '1');
headerElement.style.removeProperty('--is-rtl');
}
});
}
updateHeaderHeight() {
if (this.headerTimeoutId) {
clearTimeout(this.headerTimeoutId);
}
requestAnimationFrame(() => {
if (this.header) {
this.headerTimeoutId = setTimeout(() => {
let headerHeight = this.header.offsetHeight;
let headerDivHeight = this.headerDiv.offsetHeight;
document.body.style.setProperty('--dwc-nest-header-height', `${headerHeight}px`);
document.body.style.setProperty('--dwc-header-div-height', `${headerDivHeight}px`);
}, 300);
}
});
}
setMobileMenuTopHeight() {
if (this.mobileMenuTimeoutId) {
clearTimeout(this.mobileMenuTimeoutId);
}
let mobileMenuTop = document.querySelector('.dwc-nest-menu-top');
if (!mobileMenuTop) {
console.error('Mobile menu top element not found');
return;
}
this.mobileMenuTimeoutId = setTimeout(() => {
let menuTopHeight = mobileMenuTop.offsetHeight;
document.body.style.setProperty('--mobile-menu-top-height', `${menuTopHeight}px`);
}, 1000);
}
updateMobileLogo() {
let mobileLogo = document.querySelector('.dwc-nest-menu__mobile-logo');
let desktopLogo = document.querySelector('.dwc-nest-menu__logo');
if (!mobileLogo) {
console.error('Mobile logo container not found');
return;
}
if (!desktopLogo) {
console.error('Desktop logo container not found');
return;
}
// Updated to check for either img or svg in desktop logo
let desktopLogoElement = desktopLogo.querySelector('img, svg');
if (!desktopLogoElement) return;
// Check if mobile logo has an image or SVG
const currentMobileLogo = mobileLogo.querySelector('img, svg');
// Store original logo data if not already stored
if (!mobileLogo.hasAttribute('data-original-logo-type') && currentMobileLogo) {
// Get logo type (img or svg)
const logoType = currentMobileLogo.tagName.toLowerCase();
mobileLogo.setAttribute('data-original-logo-type', logoType);
if (logoType === 'img') {
mobileLogo.setAttribute('data-original-logo-src', currentMobileLogo.src);
mobileLogo.setAttribute('data-original-logo-alt', currentMobileLogo.alt || '');
mobileLogo.setAttribute('data-original-logo-class', currentMobileLogo.className || '');
} else if (logoType === 'svg') {
// Store SVG content as a string
mobileLogo.setAttribute('data-original-logo-content', currentMobileLogo.outerHTML);
mobileLogo.setAttribute('data-original-logo-class', currentMobileLogo.getAttribute('class') || '');
}
}
if (this.isAboveMinWidth()) {
if (currentMobileLogo) {
mobileLogo.removeChild(currentMobileLogo);
}
// Clone desktop logo (either img or svg)
let newLogo = desktopLogoElement.cloneNode(true);
newLogo.removeAttribute('id');
// mobileLogo.appendChild(newLogo);
} else {
// For mobile view
const originalLogoType = mobileLogo.getAttribute('data-original-logo-type');
if (!currentMobileLogo) {
// If no current logo, clone desktop logo
let mobileLogoElement = desktopLogoElement.cloneNode(true);
mobileLogoElement.removeAttribute('id');
mobileLogo.appendChild(mobileLogoElement);
} else if (originalLogoType) {
mobileLogo.removeChild(currentMobileLogo);
if (originalLogoType === 'img') {
// Restore original img
let mobileLogoImage = document.createElement('img');
mobileLogoImage.src = mobileLogo.getAttribute('data-original-logo-src');
mobileLogoImage.alt = mobileLogo.getAttribute('data-original-logo-alt') || '';
mobileLogoImage.className = mobileLogo.getAttribute('data-original-logo-class') || '';
mobileLogo.appendChild(mobileLogoImage);
} else if (originalLogoType === 'svg') {
// Restore original SVG
const svgContent = mobileLogo.getAttribute('data-original-logo-content');
if (svgContent) {
const tempContainer = document.createElement('div');
tempContainer.innerHTML = svgContent;
const svgElement = tempContainer.querySelector('svg');
if (svgElement) {
mobileLogo.appendChild(svgElement.cloneNode(true));
}
}
}
}
}
}
initDesktopNav() {
if (this.isOffCanvas() || !this.header || this.hasHeaderClass()) return;
let menuElement = this.header.querySelector('.dwc-nest-menu');
if (menuElement) {
menuElement.classList.remove('brx-open');
menuElement.querySelectorAll('.brxe-dropdown').forEach(dropdown => {
dropdown.classList.remove('active', 'open');
});
}
}
initializeMaxDimensions() {
if (!this.isAboveMinWidth()) return;
this.megaMenuLinks.forEach(link => {
let dropdown = link.querySelector('.brx-dropdown-content');
if (dropdown) {
this.maxMenuWidth = Math.max(this.maxMenuWidth, dropdown.offsetWidth);
this.maxMenuHeight = Math.max(this.maxMenuHeight, dropdown.offsetHeight + 10);
}
});
this.header.style.setProperty('--dropdown-menu-max-width', `${this.maxMenuWidth}px`);
this.header.style.setProperty('--dropdown-menu-max-height', `${this.maxMenuHeight}px`);
this.header.style.setProperty('--dropdown-menu-scale-x', '0');
this.header.style.setProperty('--dropdown-menu-scale-y', '0');
}
resetForMobile() {
this.header.style.setProperty('--dropdown-menu-scale-x', '0');
this.header.style.setProperty('--dropdown-menu-scale-y', '0');
this.header.style.setProperty('--dropdown-menu-width', '0');
if (this.header) {
this.header.classList.remove('show-menu-animation', 'hide-menu-animation');
}
}
setBoxedWidthVariable() {
// Check if body has the brx-boxed class
if (document.body.classList.contains('brx-boxed')) {
// Get computed style for the body
const computedStyle = window.getComputedStyle(document.body);
// Get the max-width value
const maxWidth = computedStyle.getPropertyValue('max-width');
// Set the max-width as a CSS variable on the body
document.body.style.setProperty('--boxed-width', maxWidth);
return maxWidth;
} else {
return null;
}
}
closeDesktopMenu(link) {
// Start from the link itself to find parent li.brxe-dropdown elements
let currentElement = link;
while (currentElement) {
// Find the closest parent li.brxe-dropdown from current position
const parentLi = currentElement.closest('li.brxe-dropdown');
if (!parentLi) break; // No more parent li.brxe-dropdown elements
// Check if this li has open or active class
if (parentLi.classList.contains('open') || parentLi.classList.contains('active')) {
// Remove open and active classes
parentLi.classList.remove('open', 'active');
// Find the toggle button to update aria-expanded
const toggleButton = parentLi.querySelector(':scope > .brx-submenu-toggle > button');
if (toggleButton) {
// Set aria-expanded to false
toggleButton.setAttribute('aria-expanded', 'false');
}
}
// Move up: go to parent li's parent element to continue traversing upward only
currentElement = parentLi.parentElement;
}
}
closeNavOnClick() {
if (MegaMenuCONFIG.closeNavOnClick) {
const allLinks = document.querySelectorAll('.dwc-nest-menu a');
const menuContainer = document.querySelector('.dwc-nest-menu');
const menuItemLinks = Array.from(allLinks).filter(link => {
return link.parentElement !== menuContainer;
});
const menuToggle = document.querySelector('.dwc-nest-menu .brxe-toggle');
// Always remove existing event listeners first
menuItemLinks.forEach(link => {
const storedHandler = link._clickHandler;
if (storedHandler) {
link.removeEventListener('click', storedHandler);
delete link._clickHandler;
}
});
// Check if we should skip desktop behavior
const isMobile = !this.isAboveMinWidth();
const shouldSkipDesktop = MegaMenuCONFIG.closeOnMobileOnly && !isMobile;
if (shouldSkipDesktop) return;
// Helper function to check if element has excluded selector
const hasExcludedSelector = (element) => {
if (!MegaMenuCONFIG.closeNavOnClickExclude) return false;
const excludedSelectors = MegaMenuCONFIG.closeNavOnClickExclude
.split(',')
.map(selector => selector.trim());
return excludedSelectors.some(selector => {
try {
return element.matches(selector);
} catch (error) {
// Fallback for invalid selectors - log warning and skip
console.warn(`Invalid selector: "${selector}"`, error);
return false;
}
});
};
// Helper function to check if link has a hash
const hasHashLink = (link) => {
const href = link.getAttribute('href');
return href && href.includes('#');
};
// Add event listeners based on mobile/desktop context
menuItemLinks.forEach(link => {
// Skip this link if it has any excluded classes
if (hasExcludedSelector(link)) return;
// If closeOnHashClickOnly is true, skip links without hash
if (MegaMenuCONFIG.closeOnHashClickOnly && !hasHashLink(link)) return;
const clickHandler = () => {
if (isMobile) {
// Mobile: close entire menu via toggle
if (menuToggle) {
menuToggle.click();
}
} else {
// Desktop: close parent dropdowns
this.closeDesktopMenu(link);
}
};
link._clickHandler = clickHandler;
link.addEventListener('click', clickHandler);
});
}
}
}
class TooltipManager {
constructor(config) {
this.config = {
toolTip: config.toolTip || false
};
this.targetButton = null;
this.tooltipProcessed = false;
}
setBackText() {
let menuElement = document.querySelector('.dwc-nest-menu');
let forcedBackText = menuElement.getAttribute('data-back-text')
document.querySelectorAll('.brx-submenu-toggle').forEach(submenu => {
const textContent = submenu.textContent.trim();
const button = submenu.querySelector('.brx-submenu-toggle > button');
if (button) {
button.setAttribute('data-text', textContent);
button.setAttribute('data-back-text', forcedBackText);
}
});
}
updateTooltipDataText(button) {
if (!this.config.toolTip) return;
let menuElement = document.querySelector('.dwc-nest-menu');
let toolTipBackText = menuElement.getAttribute('data-tooltip-back-text')
const closestUl = button.closest('.dwc-nav-wrapper, .dwc-tabbed-nav__list-wrapper');
if (closestUl) {
const tooltip = closestUl.querySelector('.dwc-nest-tooltip');
if (tooltip) {
const buttonText = button.getAttribute('data-text') ||
button.querySelector('i')?.getAttribute('data-text');
tooltip.setAttribute('data-text', buttonText);
tooltip.innerText = toolTipBackText + ' ' + buttonText;
}
// console.log('button: ', button)
// console.log('closet ul: ', closestUl)
}
}
addTooltip(button) {
if (!this.config.toolTip) return;
let menuElement = document.querySelector('.dwc-nest-menu');
let toolTipBackText = menuElement.getAttribute('data-tooltip-back-text')
const closestUl = button.closest('.dwc-nav-wrapper, .dwc-tabbed-nav__list-wrapper');
if (!closestUl) return;
this.removeTooltipFrom(closestUl);
const tooltip = document.createElement('div');
tooltip.className = 'dwc-nest-tooltip';
tooltip.innerText = toolTipBackText;
tooltip.style.position = 'fixed';
tooltip.style.bottom = '12px';
tooltip.style.left = '12px';
tooltip.style.background = 'rgb(0 0 0 / 30%)';
tooltip.style.color = 'white';
tooltip.style.padding = '5px 10px';
tooltip.style.borderRadius = '5px';
tooltip.style.fontSize = '12px';
tooltip.style.zIndex = '9999';
tooltip.style.opacity = '0';
tooltip.style.transition = 'opacity 1.5s';
tooltip.style.pointerEvents = 'none';
closestUl.appendChild(tooltip);
requestAnimationFrame(() => {
tooltip.style.opacity = '1';
});
}
removeAllTooltips() {
document.querySelectorAll('.dwc-nest-tooltip').forEach(tooltip => tooltip.remove());
}
removeTooltipFrom(ulElement) {
const existingTooltip = ulElement.querySelector('.dwc-nest-tooltip');
if (existingTooltip) existingTooltip.remove();
}
setupTooltipObserver() {
const tooltipObserver = new MutationObserver((mutationsList) => {
if (this.tooltipProcessed) return;
for (const mutation of mutationsList) {
if (mutation.type === 'childList') {
for (const node of mutation.addedNodes) {
if (node.nodeType === Node.ELEMENT_NODE &&
node.classList.contains('dwc-nest-tooltip') &&
!this.tooltipProcessed) {
const button = document.querySelector('.open.active > .brx-submenu-toggle > button:not(.open .open button)');
if (button) {
this.updateTooltipDataText(button);
this.tooltipProcessed = true;
return;
}
}
}
}
}
});
tooltipObserver.observe(document.body, { childList: true, subtree: true });
}
}
class SwipeGestureHandler {
constructor(config) {
this.config = {
swipeToClose: config.swipeToClose || false
};
this.targetButton = null;
this.startX = 0;
this.startY = 0;
this.endX = 0;
this.endY = 0;
// Cache RTL detection for performance during touch events
this.isRTLLayout = null;
this.cacheRTLStatus();
}
/**
* Cache RTL status and set up listener for direction changes
*/
cacheRTLStatus() {
this.isRTLLayout = this.isRTL();
// Listen for potential direction changes (rare but possible)
const observer = new MutationObserver(() => {
const newRTLStatus = this.isRTL();
if (newRTLStatus !== this.isRTLLayout) {
this.isRTLLayout = newRTLStatus;
}
});
observer.observe(document.documentElement, {
attributes: true,
attributeFilter: ['dir', 'class', 'style']
});
}
/**
* Detect if the document is using RTL (Right-to-Left) layout
* Follows the same pattern as MenuAnimationController
*/
isRTL() {
const htmlDir = document.documentElement.dir?.toLowerCase();
if (htmlDir) return htmlDir === 'rtl';
const computedDirection = getComputedStyle(document.documentElement).direction;
return computedDirection === 'rtl';
}
initialize() {
if (!this.config.swipeToClose) return;
document.addEventListener('touchstart', this.handleTouchStart.bind(this));
document.addEventListener('touchend', this.handleTouchEnd.bind(this));
}
handleTouchStart(event) {
if (!this.isMobileMenuOpen()) return;
this.startX = event.touches[0].clientX;
this.startY = event.touches[0].clientY;
}
handleTouchEnd(event) {
if (!this.isMobileMenuOpen()) return;
this.endX = event.changedTouches[0].clientX;
this.endY = event.changedTouches[0].clientY;
const diffX = this.endX - this.startX;
const diffY = Math.abs(this.endY - this.startY);
// RTL-aware swipe detection
const isValidSwipe = this.isValidSwipeGesture(diffX, diffY);
if (isValidSwipe && this.targetButton) {
this.targetButton.click();
this.targetButton = null;
}
}
/**
* Determine if the swipe gesture is valid based on layout direction
* @param {number} diffX - Horizontal distance (positive = right, negative = left)
* @param {number} diffY - Vertical distance (absolute value)
* @returns {boolean} True if the swipe should trigger menu close
*/
isValidSwipeGesture(diffX, diffY) {
const swipeThreshold = 50;
const verticalTolerance = 30;
// Vertical movement must be within tolerance
if (diffY >= verticalTolerance) return false;
if (this.isRTLLayout) {
// RTL: Accept right-to-left swipes (negative diffX)
return diffX < -swipeThreshold;
} else {
// LTR: Accept left-to-right swipes (positive diffX) - existing behavior
return diffX > swipeThreshold;
}
}
isMobileMenuOpen() {
return document.querySelector('.dwc-nest-menu')?.classList.contains('brx-open');
}
setTargetButton(button) {
this.targetButton = button;
}
/**
* Get current layout direction (for debugging)
* @returns {string} 'rtl' or 'ltr'
*/
getLayoutDirection() {
return this.isRTLLayout ? 'rtl' : 'ltr';
}
}
class OffcanvasMenuHandler {
constructor(config) {
this.config = config || {};
}
applyMobileStyles() {
let offcanvasMenu = document.querySelector(this.config.offCanvasSelector);
let hasHeaderPosition = ['brx-header-left', 'brx-header-right'].some(cls =>
document.body.classList.contains(cls)
);
if (!offcanvasMenu && !hasHeaderPosition) return;
let styleSheet = document.querySelector('[data-stylesheet]');
if (!styleSheet) return;
let styleElement = styleSheet.querySelector('style');
if (!styleElement) return;
let originalStyles = styleElement.textContent || styleElement.innerText;
let modifiedStyles = originalStyles.replace(/\(max-width:\s*\d+px\)/g, '(max-width: 5000px)');
let newStyleElement = document.createElement('style');
newStyleElement.id = 'dwc-offcanvas-styles';
newStyleElement.textContent = modifiedStyles;
document.head.appendChild(newStyleElement);
setTimeout(() => {
document.body.classList.add('show-nav');
document.body.classList.add('sidebar-ready');
}, 100);
styleSheet.remove();
}
}
class MobileMenuScrollReset {
constructor(config = {}) {
this.config = {
minWidthThreshold: config.minWidthThreshold || MegaMenuCONFIG.minWidth,
headerSelector: config.headerSelector || MegaMenuCONFIG.headerSelector,
scrollResetDelay: config.scrollResetDelay || 300
};
this.menuElement = null;
this.nestedItemsElement = null;
this.scrollResetTimeout = null;
this.isInitialized = false;
}
initialize() {
if (this.isInitialized) return;
this.menuElement = document.querySelector(`${this.config.headerSelector} .dwc-nest-menu`);
this.nestedItemsElement = document.querySelector(`${this.config.headerSelector} .brx-nav-nested-items`);
if (!this.menuElement || !this.nestedItemsElement) {
console.warn('Mobile menu scroll reset: Required elements not found');
return;
}
this.setupMutationObserver();
this.isInitialized = true;
}
setupMutationObserver() {
const observer = new MutationObserver((mutations) => {
mutations.forEach((mutation) => {
if (mutation.type === 'attributes' && mutation.attributeName === 'class') {
this.handleMenuClassChange();
}
});
});
observer.observe(this.menuElement, {
attributes: true,
attributeFilter: ['class']
});
}
handleMenuClassChange() {
// Only run on mobile
if (!this.isMobile()) return;
const isMenuOpen = this.menuElement.classList.contains('brx-open');
// If menu is now closed, set timeout to reset scroll
if (!isMenuOpen) {
this.scheduleScrollReset();
} else {
// If menu is opened, cancel any pending scroll reset
this.cancelScrollReset();
}
}
scheduleScrollReset() {
// Clear any existing timeout
this.cancelScrollReset();
// Set new timeout
this.scrollResetTimeout = setTimeout(() => {
this.resetScroll();
}, this.config.scrollResetDelay);
}
cancelScrollReset() {
if (this.scrollResetTimeout) {
clearTimeout(this.scrollResetTimeout);
this.scrollResetTimeout = null;
}
}
resetScroll() {
if (this.nestedItemsElement && this.isMobile()) {
this.nestedItemsElement.scrollTop = 0;
}
}
isMobile() {
return window.innerWidth < this.config.minWidthThreshold;
}
// Method to reinitialize (useful for your reinitialize functionality)
reinitialize() {
this.cancelScrollReset();
this.isInitialized = false;
this.initialize();
}
}
class MenuSystem {
constructor(config = {}) {
this.config = {
minWidthThreshold: config.minWidthThreshold || MegaMenuCONFIG.minWidth,
stripeStyle: config.stripeStyle ?? MegaMenuCONFIG.stripeStyle,
adaptiveHeight: config.adaptiveHeight ?? MegaMenuCONFIG.adaptiveHeight,
toolTip: config.toolTip ?? MegaMenuCONFIG.toolTip,
swipeToClose: config.swipeToClose ?? MegaMenuCONFIG.swipeToClose,
headerSelector: config.headerSelector || MegaMenuCONFIG.headerSelector,
megaMenuLinksSelector: `${config.headerSelector || MegaMenuCONFIG.headerSelector} .brx-has-megamenu`,
offCanvasSelector: `${config.headerSelector || MegaMenuCONFIG.headerSelector} .dwc-nest-menu[data-offcanvas="true"]`,
shiftFactor: config.shiftFactor ?? MegaMenuCONFIG.shiftFactor,
minOverflow: config.minOverflow ?? MegaMenuCONFIG.minOverflow
};
this.animationController = new MenuAnimationController(this.config);
this.tooltipManager = new TooltipManager(this.config);
this.swipeHandler = new SwipeGestureHandler(this.config);
this.offcanvasHandler = new OffcanvasMenuHandler(this.config);
this.centeredLogoController = new CenteredLogoController(this.config);
this.mobileScrollReset = new MobileMenuScrollReset(this.config);
// Flag to track if updateDropdownPositions has been called via user interaction
this.hasUpdatedDropdowns = false;
this.centeredLogoController.initializeEarly();
}
// New method to handle the DOMContentLoaded logic, replaces former menuSystem.initialize()
setupMenu() {
let overlay = document.querySelector('.dwc-nest-menu-overlay');
if (!overlay) {
overlay = document.createElement('nav-overlay');
overlay.className = 'dwc-nest-menu-overlay';
const overlayParent = document.querySelector('.dwc-nest-header__container');
const header = document.querySelector('#brx-header');
if (overlayParent && MegaMenuCONFIG.overlayInsideHeader) {
overlayParent.parentNode.prepend(overlay, overlayParent);
} else if (header) {
header.parentNode.insertBefore(overlay, header);
}
}
this.offcanvasHandler.applyMobileStyles();
this.animationController.updateHeaderHeight();
this.animationController.initializeMaxDimensions();
this.animationController.setMobileMenuTopHeight();
this.animationController.updateMobileLogo();
this.animationController.setCurrentPageDropdownActive();
this.tooltipManager.setBackText();
this.tooltipManager.setupTooltipObserver();
this.animationController.closeNavOnClick();
this.centeredLogoController.initialize();
this.mobileScrollReset.initialize();
if (this.animationController.isAboveMinWidth()) {
this.setupDesktopBehavior();
} else {
this.swipeHandler.initialize();
}
this.setupEventListeners();
if (!this.animationController.isAboveMinWidth()) {
this.animationController.resetForMobile();
}
setTimeout(() => {
document.body.classList.add('show-nav');
this.animationController.updateHeaderHeight();
}, 0);
setTimeout(() => {
document.body.classList.add('adaptive-height-active');
if (this.animationController.isAboveMinWidth()) {
this.animationController.updateDropdownPositions();
this.animationController.setBoxedWidthVariable();
}
}, 500);
}
// Original initialize method (unchanged) now calls the setupMenu()
initialize() {
updateMobileClass(this.config.minWidthThreshold);
document.addEventListener('DOMContentLoaded', () => {
this.setupMenu();
});
return this;
}
// Updated reinitialize method - to call: mainMenu.reinitialize();
reinitialize() {
// Reset critical states
this.centeredLogoController.isInitialized = false;
this.animationController.maxMenuWidth = 0;
this.animationController.maxMenuHeight = 0;
this.tooltipManager.tooltipProcessed = false;
// Clear breakinto states ← ADD THIS
const breakintoElements = document.querySelectorAll('[data-breakinto]');
breakintoElements.forEach(element => {
breakintoOriginalParents.delete(element);
breakintoOriginalIndexes.delete(element);
breakintoItemStates.delete(element);
element.removeAttribute('data-breakinto-moved');
});
// Clear existing timeouts
if (this.animationController.headerTimeoutId) {
clearTimeout(this.animationController.headerTimeoutId);
}
if (this.animationController.mobileMenuTimeoutId) {
clearTimeout(this.animationController.mobileMenuTimeoutId);
}
if (this.centeredLogoController.resizedFinished) {
clearTimeout(this.centeredLogoController.resizedFinished);
}
// Remove added DOM elements and classes
const overlay = document.querySelector('.dwc-nest-menu-overlay');
if (overlay) overlay.remove();
document.body.classList.remove('show-nav', 'adaptive-height-active', 'desktop-centered', 'dom-ready');
this.tooltipManager.removeAllTooltips();
const offcanvasStyles = document.querySelector('#dwc-offcanvas-styles');
if (offcanvasStyles) offcanvasStyles.remove();
// Reset mobile logo
const mobileLogo = document.querySelector('.dwc-nest-menu__mobile-logo');
if (mobileLogo) {
const currentMobileLogo = mobileLogo.querySelector('img, svg');
if (currentMobileLogo) currentMobileLogo.remove();
}
// Re-run setup
updateMobileClass(this.config.minWidthThreshold);
this.setupMenu();
this.mobileScrollReset.reinitialize();
// console.log('Mega Menu Pro reinitialized...')
}
setupDesktopBehavior() {
this.animationController.megaMenuLinks.forEach(link => {
link.removeEventListener('mouseenter', this.handleMouseEnter);
link.addEventListener('mouseenter', this.handleMouseEnter);
});
}
handleMouseEnter = (event) => {
this.animationController.updateChevronPosition(event.target);
// Call updateDropdownPositions on mouseenter if not already called via interaction
if (this.animationController.isAboveMinWidth() && !this.hasUpdatedDropdowns) {
this.animationController.updateDropdownPositions();
this.animationController.updateMenuVariables();
this.hasUpdatedDropdowns = true;
}
};
setupEventListeners() {
let observer = new MutationObserver(mutations => {
mutations.forEach(mutation => {
if (mutation.type === 'attributes' && mutation.attributeName === 'class') {
this.animationController.updateMenuVariables();
}
});
});
this.animationController.megaMenuLinks.forEach(link =>
observer.observe(link, { attributes: true })
);
document.addEventListener('click', event => {
let submenuToggle = event.target.closest('.brx-submenu-toggle, .dwc-tabbed-nav-list__li');
if (submenuToggle) {
setTimeout(() => {
let openButtons = document.querySelectorAll('.brxe-dropdown.open.active button, .dwc-tabbed-nav-list__li.active button');
let targetButton = Array.from(openButtons).find(button => {
let parentDropdown = button.closest('.brxe-dropdown.open.active, .dwc-tabbed-nav-list__li.active');
return parentDropdown &&
parentDropdown.tagName.toLowerCase() === 'li' &&
!parentDropdown.querySelector('.brxe-dropdown.open.active:not(:scope), .dwc-tabbed-nav-list__li.active:not(:scope)');
});
if (targetButton) {
this.swipeHandler.setTargetButton(targetButton);
if (this.config.toolTip) {
this.tooltipManager.removeAllTooltips();
this.tooltipManager.addTooltip(targetButton);
this.tooltipManager.updateTooltipDataText(targetButton);
}
}
}, 50);
}
});
window.addEventListener('resize', this.debounce(() => {
updateMobileClass(this.config.minWidthThreshold);
this.animationController.updateHeaderHeight();
this.animationController.initializeMaxDimensions();
this.animationController.setMobileMenuTopHeight();
this.animationController.updateMobileLogo();
this.animationController.closeNavOnClick();
if (this.animationController.isAboveMinWidth()) {
this.animationController.updateMenuVariables();
this.animationController.initDesktopNav();
this.setupDesktopBehavior();
// Reset flag on resize to desktop and call updateDropdownPositions
this.hasUpdatedDropdowns = false;
this.animationController.updateDropdownPositions();
} else {
this.animationController.resetForMobile();
this.swipeHandler.initialize();
// Reset flag on resize to mobile
this.hasUpdatedDropdowns = false;
}
}, 300));
}
debounce(func, delay) {
let timeoutId;
return function (...args) {
clearTimeout(timeoutId);
timeoutId = setTimeout(() => func.apply(this, args), delay);
};
}
}
const mainMenu = new MenuSystem().initialize();
// RECALCULATE DROPDOWN POSITION ON LAYOUT SHIFTS
const debouncedUpdate = mainMenu.debounce(() => {
// console.log('updated')
mainMenu.animationController.updateDropdownPositions();
mainMenu.animationController.updateMenuVariables();
if (!mainMenu.animationController.menuOpened) {
mainMenu.animationController.header.style.setProperty('--dropdown-menu-width', '100px');
// console.log('less')
}
}, 300);
if (window.visualViewport) {
window.visualViewport.addEventListener('resize', debouncedUpdate);
}
/* BREAKOUT LINK & BREAKIN FUNCTIONALITY */
// WeakMaps for breakinto feature state management
const breakintoOriginalParents = new WeakMap(); // Track original parents for breakinto items
const breakintoOriginalIndexes = new WeakMap(); // Track original child indexes for breakinto items
const breakintoItemStates = new WeakMap(); // Track individual breakinto item states
// Use WeakMap for better garbage collection
const originalParents = new WeakMap();
const itemStates = new WeakMap(); // Track individual item states
const breakinOriginalParents = new WeakMap(); // Track original parents for breakin items
const breakinOriginalIndexes = new WeakMap(); // Track original child indexes for breakin items
const breakinItemStates = new WeakMap(); // Track individual breakin item states
let isMobileView = null;
let resizeTimer;
let breakinContainer = null;
function ensureBreakInContainer() {
// Check if any breakin elements exist in the header first
const hasBreakInElements = document.querySelector('#brx-header [data-breakin]');
if (!hasBreakInElements) return null;
// Select nav wrapper based on config
const navWrapperSelector = MegaMenuCONFIG.breakinToNavList
? '.dwc-nest-menu .brx-nav-nested-items'
: '.dwc-nav-wrapper';
const navWrapper = document.querySelector(navWrapperSelector);
if (!navWrapper) return null;
if (!breakinContainer) {
breakinContainer = navWrapper.querySelector('.breakin-container');
if (!breakinContainer) {
// Create element based on config
breakinContainer = MegaMenuCONFIG.breakinToNavList
? document.createElement('li')
: document.createElement('div');
breakinContainer.className = 'breakin-container';
// Prepend to nav list, append elsewhere
if (MegaMenuCONFIG.breakinToNavList) {
navWrapper.prepend(breakinContainer);
breakinContainer.style.order = '100';
} else {
navWrapper.appendChild(breakinContainer);
}
}
}
return breakinContainer;
}
function handleBreakInItems() {
const currentWidth = window.innerWidth;
const container = ensureBreakInContainer();
if (!container) return;
// Get all breakin items from both original locations and breakin container
const breakinItemsInOriginal = document.querySelectorAll('#brx-header [data-breakin]:not(.breakin-container [data-breakin])');
const breakinItemsInContainer = container.querySelectorAll('[data-breakin]');
// Combine both nodelets into a single array
const breakinItems = [...breakinItemsInOriginal, ...breakinItemsInContainer];
breakinItems.forEach(item => {
const breakpointAttr = item.getAttribute('data-breakin');
// Set default breakpoint if not defined or invalid
let breakpoint;
if (!breakpointAttr || breakpointAttr.trim() === '') {
breakpoint = MegaMenuCONFIG.minWidth - 1;
} else {
breakpoint = parseInt(breakpointAttr, 10);
if (isNaN(breakpoint)) {
breakpoint = MegaMenuCONFIG.minWidth - 1;
}
}
// Continue with your logic using the breakpoint value...
// Determine if item should be in mobile state (moved into container)
const shouldBeInContainer = currentWidth <= breakpoint;
// Get current state of this breakin item
const currentItemState = breakinItemStates.get(item);
// Only process if this item's state changed
if (currentItemState !== shouldBeInContainer) {
breakinItemStates.set(item, shouldBeInContainer);
if (shouldBeInContainer) {
// Move to breakin container
// Store original parent and index if not already stored
if (!breakinOriginalParents.has(item)) {
const originalParent = item.parentElement;
const originalIndex = Array.from(originalParent.children).indexOf(item);
breakinOriginalParents.set(item, originalParent);
breakinOriginalIndexes.set(item, originalIndex);
}
// Move item to breakin container
container.appendChild(item);
} else {
// Move back to original parent at original position
const originalParent = breakinOriginalParents.get(item);
const originalIndex = breakinOriginalIndexes.get(item);
if (originalParent && originalIndex !== undefined) {
const children = originalParent.children;
if (originalIndex >= children.length) {
// Insert at the end if original index is beyond current children
originalParent.appendChild(item);
} else {
// Insert at the original position
originalParent.insertBefore(item, children[originalIndex]);
}
}
}
}
});
}
function handleBreakIntoItems() {
const currentWidth = window.innerWidth;
// Get all breakinto items from both original locations and target containers
const breakintoItemsInOriginal = document.querySelectorAll('[data-breakinto]:not([data-breakinto=""])');
const breakintoItemsInContainers = document.querySelectorAll('[data-breakinto-moved="true"]');
// Combine both nodelets into a single array
const breakintoItems = [...breakintoItemsInOriginal, ...breakintoItemsInContainers];
breakintoItems.forEach(item => {
const breakintoAttr = item.getAttribute('data-breakinto');
// Skip if no breakinto attribute or empty value
if (!breakintoAttr || breakintoAttr.trim() === '') {
return;
}
// Parse the attribute value for container selector and optional breakpoint
let containerSelector, customBreakpoint;
if (breakintoAttr.includes('|')) {
// Format: '.class | 767' or '#id | 1024'
const parts = breakintoAttr.split('|').map(part => part.trim());
containerSelector = parts[0];
customBreakpoint = parseInt(parts[1], 10);
// Validate custom breakpoint
if (isNaN(customBreakpoint)) {
console.warn(`Invalid breakpoint in data-breakinto="${breakintoAttr}". Using global breakpoint.`);
customBreakpoint = null;
}
} else {
// Format: '.class' or '#id'
containerSelector = breakintoAttr.trim();
customBreakpoint = null;
}
// Find the target container
let targetContainer;
try {
targetContainer = document.querySelector(containerSelector);
} catch (error) {
console.error(`Invalid selector in data-breakinto="${breakintoAttr}":`, error);
return;
}
if (!targetContainer) {
console.warn(`Target container "${containerSelector}" not found for data-breakinto element.`);
return;
}
// Determine breakpoint to use (custom or global)
const breakpoint = customBreakpoint !== null ? customBreakpoint : MegaMenuCONFIG.minWidth;
// Determine if item should be in target container (moved state)
const shouldBeInContainer = currentWidth <= breakpoint;
// Get current state of this breakinto item
const currentItemState = breakintoItemStates.get(item);
// Only process if this item's state changed
if (currentItemState !== shouldBeInContainer) {
breakintoItemStates.set(item, shouldBeInContainer);
if (shouldBeInContainer) {
// Move to target container
// Store original parent and index if not already stored
if (!breakintoOriginalParents.has(item)) {
const originalParent = item.parentElement;
const originalIndex = Array.from(originalParent.children).indexOf(item);
breakintoOriginalParents.set(item, originalParent);
breakintoOriginalIndexes.set(item, originalIndex);
}
// Mark item as moved and move to target container
item.setAttribute('data-breakinto-moved', 'true');
targetContainer.appendChild(item);
} else {
// Move back to original parent at original position
const originalParent = breakintoOriginalParents.get(item);
const originalIndex = breakintoOriginalIndexes.get(item);
if (originalParent && originalIndex !== undefined) {
const children = originalParent.children;
// Remove the moved marker
item.removeAttribute('data-breakinto-moved');
if (originalIndex >= children.length) {
// Insert at the end if original index is beyond current children
originalParent.appendChild(item);
} else {
// Insert at the original position
originalParent.insertBefore(item, children[originalIndex]);
}
}
}
}
});
}
function handleResponsiveMenu() {
const currentIsMobile = window.innerWidth < MegaMenuCONFIG.minWidth;
const currentWidth = window.innerWidth;
const nestMenu = document.querySelector('.dwc-nest-menu');
if (!nestMenu) return;
// Get all target items from both original locations and nest menu
const targetItemsInOriginal = document.querySelectorAll('.brx-nav-nested-items > .menu-item > [data-breakout-link]');
const targetItemsInNest = nestMenu.querySelectorAll('[data-breakout-link]');
// Combine both nodelets into a single array
const targetItems = [...targetItemsInOriginal, ...targetItemsInNest];
let hasStateChange = false;
targetItems.forEach(item => {
if (item.closest('.dwc-header-logo-item')) return; // don't interfere with centerd logo item
const parent = item.parentElement;
const breakpointAttr = item.getAttribute('data-breakout-link');
// Determine if item should be in mobile state
let shouldBeMobile;
if (!breakpointAttr || breakpointAttr.trim() === '') {
// No custom breakpoint - use global mobile view logic
shouldBeMobile = currentIsMobile;
} else {
// Custom breakpoint - check if within range
const customBreakpoint = parseInt(breakpointAttr, 10);
if (isNaN(customBreakpoint)) {
// Invalid breakpoint value - fallback to global logic
shouldBeMobile = currentIsMobile;
} else {
// Within custom range: between customBreakpoint and MegaMenuCONFIG.minWidth (exclusive)
shouldBeMobile = currentWidth >= customBreakpoint && currentWidth < MegaMenuCONFIG.minWidth;
}
}
// Get current state of this item
const currentItemState = itemStates.get(item);
// Only process if this item's state changed
if (currentItemState !== shouldBeMobile) {
hasStateChange = true;
itemStates.set(item, shouldBeMobile);
if (shouldBeMobile) {
// Move to mobile state
parent.classList.add('has-breakout-link');
// Store original parent if not already stored
if (!originalParents.has(item)) {
originalParents.set(item, parent);
}
// Move item to nest menu
nestMenu.insertBefore(item, nestMenu.firstChild);
// Hide the original parent
parent.style.display = 'none';
} else {
// Move to desktop state - restore to original parent
const originalParent = originalParents.get(item);
if (originalParent) {
originalParent.appendChild(item);
originalParent.style.display = '';
originalParent.classList.remove('has-breakout-link');
}
}
}
});
// Update global mobile view state only if there was a global state change
if (isMobileView !== currentIsMobile) {
isMobileView = currentIsMobile;
}
// Optional: You can add logic here if you need to do something when any state changes
if (hasStateChange) {
// Any additional logic when items change state
}
}
function handleAllResponsiveElements() {
handleResponsiveMenu(); // Handle breakout functionality
handleBreakInItems(); // Handle breakin functionality
handleBreakIntoItems(); // Handle breakinto functionality ← ADD THIS LINE
}
// Run on page load
handleAllResponsiveElements();
// Debounce resize events
window.addEventListener('resize', () => {
clearTimeout(resizeTimer);
resizeTimer = setTimeout(handleAllResponsiveElements, 150);
});
// Optional: Add for better initial load behavior
document.addEventListener('DOMContentLoaded', handleAllResponsiveElements);
// REINITIALIZE ON URL CHANGE
// REINITIALIZE ON URL CHANGE
if (MegaMenuCONFIG.reinitializeOnURLchange) {
// console.log('🚀 MegaMenu: URL change reinitialization active');
let lastPath = normalizePathForComparison(window.location.pathname);
let reinitTimer = null;
let lastReinit = 0;
const REINIT_COOLDOWN = 1000;
let isInitialized = false;
let detectionMethod = null;
let forceReinitFromSwup = false;
function normalizePathForComparison(path) {
return path.replace(/\/$/, '') || '/';
}
function setAriaCurrentPage() {
// console.log('📍 Setting aria-current="page" for current URL');
// First, clear any existing aria-current attributes in the menu
document.querySelectorAll('.dwc-nest-menu [aria-current="page"]').forEach(element => {
element.removeAttribute('aria-current');
});
const currentPath = window.location.pathname;
const navLinks = document.querySelectorAll('.dwc-nest-menu a[href]');
let foundMatch = false;
navLinks.forEach(link => {
const href = link.getAttribute('href');
if (!href) return;
try {
// Handle relative URLs
let linkPath = href;
if (!href.startsWith('http')) {
// Create absolute URL from relative path
const url = new URL(href, window.location.origin);
linkPath = url.pathname;
} else {
// For absolute URLs, extract just the path
const url = new URL(href);
linkPath = url.pathname;
}
// Normalize paths for comparison
const normalizedLinkPath = normalizePathForComparison(linkPath);
const normalizedCurrentPath = normalizePathForComparison(currentPath);
// Check for match
if (normalizedLinkPath === normalizedCurrentPath) {
link.setAttribute('aria-current', 'page');
// console.log(`✅ Set aria-current="page" on:`, link);
foundMatch = true;
}
} catch (e) {
// Fallback: simple string comparison
const normalizedHref = normalizePathForComparison(href);
const normalizedCurrent = normalizePathForComparison(currentPath);
if (normalizedHref === normalizedCurrent ||
(normalizedCurrent === '/' && normalizedHref === '') ||
normalizedHref.endsWith(normalizedCurrent)) {
link.setAttribute('aria-current', 'page');
// console.log(`✅ Set aria-current="page" on (fallback):`, link);
foundMatch = true;
}
}
});
if (!foundMatch) {
// console.log('⚠️ No matching link found for current page:', currentPath);
}
}
function performReinit() {
const menuElement = document.querySelector(MegaMenuCONFIG.nestMenuSelector);
if (!menuElement) {
console.warn('⚠️ MegaMenu: Menu element not found after navigation. Skipping reinit.');
return;
}
try {
// console.log('🔄 MegaMenu: Performing reinitialization...');
// First, set aria-current="page" on the current page link
setAriaCurrentPage();
// Then reinitialize the menu
mainMenu.reinitialize();
// console.log('✅ MegaMenu reinitialized via', detectionMethod);
lastReinit = Date.now();
forceReinitFromSwup = false;
} catch (error) {
console.error('❌ MegaMenu reinit failed:', error);
forceReinitFromSwup = false;
}
}
function shouldReinitialize(force = false) {
const now = Date.now();
// Cooldown check
if (now - lastReinit < REINIT_COOLDOWN) {
// console.log('⏱️ MegaMenu: Reinit cooldown active');
return false;
}
// If forced by Swup, skip path comparison
if (force || forceReinitFromSwup) {
// console.log('🎯 MegaMenu: Forced reinit requested (Swup event)');
forceReinitFromSwup = false;
return true;
}
const newPath = normalizePathForComparison(window.location.pathname);
// Path comparison
if (newPath === lastPath) {
// console.log('⏭️ MegaMenu: Path unchanged, skipping');
return false;
}
// console.log('🔄 MegaMenu: Path changed:', lastPath, '->', newPath);
lastPath = newPath;
return true;
}
// ============================================================================
// SWUP INTEGRATION - PRIMARY METHOD
// ============================================================================
function setupSwupIntegration() {
// console.log('🎯 MegaMenu: Setting up Swup integration');
// Method 1: Direct Swup instance hooks (if available)
if (window.swup) {
// console.log('✅ MegaMenu: Found Swup instance, using direct hooks');
// Hook into Swup's events
swup.hooks.on('content:replace', () => {
// console.log('📍 MegaMenu: Swup content replaced');
forceReinitFromSwup = true;
handleSwupNavigation();
});
swup.hooks.on('page:view', () => {
// console.log('📍 MegaMenu: Swup page viewed');
forceReinitFromSwup = true;
handleSwupNavigation();
});
detectionMethod = 'Swup instance hooks';
return true;
}
// Method 2: Swup custom events (works without instance access)
const swupEvents = [
'swup:content:replace',
'swup:page:view',
'swup:visit:end'
];
let hasSwupEvents = false;
swupEvents.forEach(eventName => {
document.addEventListener(eventName, (event) => {
// console.log(`📡 MegaMenu: Swup event fired: ${eventName}`);
forceReinitFromSwup = true;
handleSwupNavigation();
}, { once: false });
hasSwupEvents = true;
});
if (hasSwupEvents) {
detectionMethod = 'Swup events';
// console.log('✅ MegaMenu: Swup event listeners attached');
return true;
}
return false;
}
function handleSwupNavigation() {
// Clear any existing timer
clearTimeout(reinitTimer);
// Wait a bit to ensure DOM is fully updated
reinitTimer = setTimeout(() => {
// Pass true to force reinit for Swup events
if (shouldReinitialize(true)) {
performReinit();
}
}, 300);
}
// ============================================================================
// FALLBACK: HISTORY API (For non-Swup navigations)
// ============================================================================
function setupHistoryAPIFallback() {
// console.log('🔧 MegaMenu: Setting up History API fallback');
function handleHistoryNavigation() {
// Clear any existing timer
clearTimeout(reinitTimer);
// Wait longer for History API (might be a full page load)
reinitTimer = setTimeout(() => {
// Don't force for History API, only check path changes
if (shouldReinitialize()) {
// console.log('📍 MegaMenu: History API navigation detected');
performReinit();
}
}, 1000);
}
// Override history methods
const originalPushState = history.pushState;
const originalReplaceState = history.replaceState;
history.pushState = function() {
const result = originalPushState.apply(history, arguments);
// console.log('📍 MegaMenu: pushState called');
handleHistoryNavigation();
return result;
};
history.replaceState = function() {
const result = originalReplaceState.apply(history, arguments);
// console.log('📍 MegaMenu: replaceState called');
handleHistoryNavigation();
return result;
};
// Listen for back/forward navigation
window.addEventListener('popstate', () => {
// console.log('📍 MegaMenu: popstate event');
handleHistoryNavigation();
});
return true;
}
// ============================================================================
// WATCH FOR SWUP LOAD (For late loading)
// ============================================================================
function watchForSwupLoad(timeout = 5000) {
// console.log('👀 MegaMenu: Watching for Swup to load...');
// If Swup is already loaded, set it up immediately
if (window.swup || typeof window.Swup === 'function') {
// console.log('✅ MegaMenu: Swup already loaded');
setupSwupIntegration();
return;
}
const startTime = Date.now();
let checkCount = 0;
const checkInterval = setInterval(() => {
checkCount++;
// Check for Swup
if (window.swup || typeof window.Swup === 'function') {
clearInterval(checkInterval);
// console.log(`✅ MegaMenu: Swup detected after ${checkCount} checks (${Date.now() - startTime}ms)`);
setupSwupIntegration();
return;
}
// Timeout check
if (Date.now() - startTime > timeout) {
clearInterval(checkInterval);
// console.log(`⏰ MegaMenu: Swup watch timeout after ${timeout}ms`);
if (!detectionMethod) {
detectionMethod = 'History API fallback';
// console.log('⚠️ MegaMenu: Swup not found, using History API only');
}
}
}, 100);
}
// ============================================================================
// INITIALIZATION
// ============================================================================
function initialize() {
if (isInitialized) {
// console.log('⚠️ MegaMenu: Already initialized');
return;
}
// console.log('🚀 MegaMenu: Initializing reinit detection...');
// Try to set up Swup integration first
if (setupSwupIntegration()) {
// console.log(`✅ MegaMenu: Using ${detectionMethod} for reinit detection`);
isInitialized = true;
return;
}
// Swup not loaded yet, set up fallback and watch for Swup
setupHistoryAPIFallback();
watchForSwupLoad();
isInitialized = true;
// console.log('✅ MegaMenu: Reinit detection initialized');
}
// Run initialization
initialize();
// ============================================================================
// DIAGNOSTIC INFO
// ============================================================================
// console.log('%c📊 MegaMenu Reinit Diagnostic', 'color: #2196F3; font-weight: bold');
// console.log('Initial path:', lastPath);
// console.log('Detection method:', detectionMethod || 'Waiting for Swup...');
// console.log('Reinit cooldown:', REINIT_COOLDOWN + 'ms');
// console.log('Swup forced reinit:', 'Enabled');
// console.log('Aria-current setting:', 'Enabled in reinit only');
}
console.log('%c<Mega Menu Pro v1.4.4>', 'color: #b388eb');/*prevent FOUC on mobile when using sidebar */
.dwc-mobile :is(.bricks-is-frontend.brx-header-left, .bricks-is-frontend.brx-header-right) #brx-header {
position: relative;
inline-size: 100%;
flex-direction: column;
}
.dwc-mobile .bricks-is-frontend:is(.brx-header-left, .brx-header-right) :is(#brx-content, #brx-footer) {
margin-inline-start: 0;
}
/*prevent FOUC on desktop when using sidebar */
.bricks-is-frontend:is(.brx-header-left, .brx-header-right):not(.show-nav) .dwc-nav-wrapper {
display: none;
}
/*=== sidebar css ===*/
html:not(.dwc-mobile) :is(.brx-header-left, .brx-header-right):not([data-builder-window]) #brx-header {
flex-direction: column;
box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.7);
}
html:not(.dwc-mobile) :is(.brx-header-left, .brx-header-right):not([data-builder-window]).no-scroll {
overflow: visible;
}
html:not(.dwc-mobile) :is(.brx-header-left, .brx-header-right):not([data-builder-window]) #brx-header .dwc-nest-menu.brxe-nav-nested .brx-nav-nested-items {
max-block-size: 100dvb;
padding-block-end: 12rem;
overscroll-behavior: contain;
}
html:not(.dwc-mobile) :is(.brx-header-left, .brx-header-right):not([data-builder-window]) #brx-header .dwc-nav-wrapper {
position: relative;
overflow: hidden;
block-size: 100%;
transform: translateX(0%);
visibility: visible;
}
html:not(.dwc-mobile) :is(.brx-header-left, .brx-header-right):not([data-builder-window]) .dwc-nest-menu .brxe-toggle {
display: none !important;
}
html:not(.dwc-mobile) :is(.brx-header-left, .brx-header-right):not([data-builder-window]) #brx-header .dwc-nest-menu {
display: flex;
flex-direction: column;
}
html:not(.dwc-mobile) :is(.brx-header-left, .brx-header-right):not([data-builder-window]) #brx-header .dwc-nest-header > div {
display: flex;
grid-template-columns: 1fr;
block-size: 100%;
flex-direction: column;
justify-content: flex-start;
}
html:not(.dwc-mobile) :is(.brx-header-left, .brx-header-right):not([data-builder-window]) #brx-header .dwc-menu-wrap {
inline-size: 100%;
display: grid;
grid-template-columns: 1fr;
block-size: 100%;
}
html:not(.dwc-mobile) :is(.brx-header-left, .brx-header-right):not([data-builder-window]) #brx-header :is(.brxe-code, .dwc-nest-menu-overlay) {
display: none;
}
html:not(.dwc-mobile) :is(.brx-header-left, .brx-header-right):not([data-builder-window]) #brx-header .dwc-nest-header {
inline-size: 100%;
padding-inline: 0;
}
html:not(.dwc-mobile) :is(.brx-header-left, .brx-header-right):not([data-builder-window]) #brx-header .dwc-nest-menu-top {
min-block-size: var(--top-offset);
}
html:not(.dwc-mobile) :is(.brx-header-left, .brx-header-right):not([data-builder-window]) #brx-header .dwc-nest-menu:not( [data-hide-close-bar = 'true']) .brx-dropdown-content {
inset-block-start: calc(var(--top-offset) + 1px) !important;
}
html:not(.dwc-mobile) :is(.brx-header-left, .brx-header-right):not([data-builder-window]) #brx-header .dwc-nest-menu:not( [data-submenu-reveal = 'slide']) .brx-dropdown-content:not([data-submenu-reveal = 'slide'] *) {
inset-inline-start: 0;
inset-block-start: unset !important;
overflow: hidden;
}
html:not(.dwc-mobile) :is(.brx-header-left, .brx-header-right):not([data-builder-window]) #brx-header .dwc-nest-menu:not([data-submenu-reveal = 'slide']) .brxe-dropdown:not(.open.active) > .brx-dropdown-content > .brxe-dropdown:not([data-submenu-reveal = 'slide'] *){
visibility: hidden;
}
html:not(.dwc-mobile) :is(.brx-header-left, .brx-header-right):not([data-builder-window]) #brx-header .dwc-nest-menu.brxe-nav-nested.brx-open .brxe-dropdown > .brx-dropdown-content {
overscroll-behavior: contain;
min-inline-size: var(--mobile-menu-width);
}
html:not(.dwc-mobile) :is(.brx-header-left, .brx-header-right):not([data-builder-window]) #brx-header .dwc-nest-menu .brxe-dropdown.open > .brx-submenu-toggle button:not([data-submenu-reveal = 'expand'] button) {
min-block-size: calc(var(--top-offset) - 1px);
inset-block-start: 0;
}
html:not(.dwc-mobile) :is(.brx-header-left, .brx-header-right):not([data-builder-window]) #brx-header .dwc-nest-menu .brxe-dropdown.open[data-submenu-reveal = 'slide'] > .brx-submenu-toggle button {
min-block-size: calc(var(--top-offset) - 1px);
inset-block-start: 0;
}
html:not(.dwc-mobile) :is(.brx-header-left, .brx-header-right):not([data-builder-window]) #brx-header .dwc-nest-menu .brxe-dropdown .brx-submenu-toggle button {
min-block-size: 0;
}
/* sidebar css ends*/
/*sidebar in builder*/
/*=== sidebar css ===*/
:is(.brx-header-left, .brx-header-right)[data-builder-window] #brx-header {
flex-direction: column;
box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.7);
--top-offset: 40px;
}
:is(.brx-header-left, .brx-header-right)[data-builder-window] #brx-header .dwc-nest-menu.brxe-nav-nested .brx-nav-nested-items {
max-block-size: 100dvb;
padding-block-end: 12rem;
overscroll-behavior: contain;
}
:is(.brx-header-left, .brx-header-right)[data-builder-window] #brx-header .dwc-nav-wrapper {
position: relative;
overflow: hidden;
block-size: 100%;
transform: translateX(0%);
visibility: visible;
}
body:is(.brx-header-left, .brx-header-right)[data-builder-window] .dwc-nest-menu .brxe-toggle {
display: none !important;
}
:is(.brx-header-left, .brx-header-right)[data-builder-window] #brx-header .dwc-nest-menu {
display: flex;
flex-direction: column;
}
:is(.brx-header-left, .brx-header-right)[data-builder-window] #brx-header .dwc-nest-header > div {
display: flex;
grid-template-columns: 1fr;
block-size: 100%;
flex-direction: column;
justify-content: flex-start;
}
:is(.brx-header-left, .brx-header-right)[data-builder-window] #brx-header .dwc-menu-wrap {
inline-size: 100%;
display: grid;
grid-template-columns: 1fr;
block-size: 100%;
}
:is(.brx-header-left, .brx-header-right)[data-builder-window] #brx-header .dwc-nest-header {
inline-size: 100%;
padding-inline: 0;
}
:is(.brx-header-left, .brx-header-right)[data-builder-window] #brx-header .dwc-nest-menu-top {
min-block-size: var(--top-offset);
}
:is(.brx-header-left, .brx-header-right)[data-builder-window] #brx-header .dwc-nest-menu .brx-dropdown-content {
inset-block-start: calc(var(--top-offset) - 1px) !important;
}
:is(.brx-header-left, .brx-header-right)[data-builder-window] #brx-header .dwc-nest-menu.brxe-nav-nested.brx-open .brxe-dropdown > .brx-dropdown-content {
overscroll-behavior: contain;
}
:is(.brx-header-left, .brx-header-right)[data-builder-window] #brx-header .dwc-nest-menu .brxe-dropdown.open > .brx-submenu-toggle button {
min-block-size: calc(var(--top-offset) - 1px);
inset-block-start: 0;
}
:is(.brx-header-left, .brx-header-right)[data-builder-window] #brx-header .dwc-nest-menu .brxe-dropdown .brx-submenu-toggle button {
min-block-size: 0;
}
:is(.brx-header-left, .brx-header-right)[data-builder-window] .dwc-nest-menu {
margin: 0 !important;
}
:is(.brx-header-left, .brx-header-right)[data-builder-window] .brx-nav-nested-items {
flex-direction: column !important;
}
:is(.brx-header-left, .brx-header-right)[data-builder-window] .dwc-nest-toggle--open.brxe-toggle {
display: flex !important;
}
:is(.brx-header-left, .brx-header-right)[data-builder-window] .dwc-nest-menu .brx-nav-nested-items {
position: relative !Important;
background: var(--mobile-menu-bg) !important;
align-items: stretch;
flex: 1;
}
:where(.brx-header-left, .brx-header-right)[data-builder-mode]:not(:has(.dwc-sidebar)) .dwc-nest-menu-top::before {
content: 'this space is the back text bar';
padding: 1rem;
background-color: gray;
color: white;
width: 100%;
text-transform: uppercase;
font-size: 12px;
font-weight: bold;
letter-spacing: 1px;
}
/* MENU CTA (LAST BUTTON) */
:is(.brx-header-left, .brx-header-right)[data-builder-window] [data-last-item-is-button="true"].dwc-nest-menu .brx-nav-nested-items > .menu-item:last-of-type {
padding-inline: var(--menu-item-inline-padding) !important;
padding-block: var(--menu-item-block-padding) !important;
}
:is(.brx-header-left, .brx-header-right)[data-builder-window] .dwc-nest-menu-top {
min-block-size: 80px !important;
}
:is(.brx-header-left, .brx-header-right)[data-builder-window] .dwc-nest-nav-items {
overflow-y: scroll;
}
:is(.brx-header-left, .brx-header-right)[data-builder-mode] .brx-dropdown-content {
min-inline-size: var(--mobile-menu-width);
position: static;
}
:is(.brx-header-left, .brx-header-right)[data-builder-window] #brx-header .dwc-nest-menu.brxe-nav-nested .brx-nav-nested-items {
flex-wrap: nowrap;
}
:is(.brx-header-left, .brx-header-right)[data-builder-window] #brx-header .dwc-nest-menu .brx-dropdown-content {
visibility: visible !important;
opacity: 1;
}
/*OVERLAY SIDEBAR*/
html:not(.dwc-mobile):has([data-overlay-sidebar=true]) {
--mobile-menu-bg: rgb(255 255 255 / 0%);
--menu-item-border: solid 1px rgb(255 255 255 / 50%);
}
html:not(.dwc-mobile):has([data-overlay-sidebar=true]) :is(.brx-header-left, .brx-header-right):not([data-builder-modee]) :is(main, footer){
margin: 0 !important
}
html:not(.dwc-mobile):has([data-overlay-sidebar=true]) :is(.brx-header-left, .brx-header-right):not([data-builder-modee]) :is(main, footer) :where(section):not(section>section) {
padding-inline-start: calc(var(--mobile-menu-width) + clamp(1.5rem, calc(0.625vw + 1.375rem), 1.875rem));
max-inline-size: 100%
}
html:not(.dwc-mobile):has([data-overlay-sidebar=true]) :is(.brx-header-left, .brx-header-right):not([data-builder-modee]) #brx-header {
border-radius: var(--overlay-sidebar-radius);
overflow: hidden;
background: var(--overlay-sidebar-bg);
box-shadow: var(--overlay-sidebar-shadow) !important;
inset: var(--overlay-sidebar-inset);
}
html:not(.dwc-mobile):has([data-overlay-sidebar=true]) :is(.brx-header-left, .brx-header-right):not([data-builder-modee]) .dwc-nest-header{
backdrop-filter: blur(13px);
background: transparent !important;
}
html:not(.dwc-mobile):has([data-overlay-sidebar=true]):not([data-builder-modee]) .brx-dropdown-content {
background-color: rgb(255 255 255 / 100%);
}
/*NO BRX-OPEN STYLES*/
html:not(.dwc-mobile) :is(.brx-header-left, .brx-header-right):not([data-builder-window]) #brx-header .dwc-nest-menu.brxe-nav-nested .brx-nav-nested-items {
display: flex;
flex-wrap: nowrap;
flex-direction: column !important;
}
html:not(.dwc-mobile) :is(.brx-header-left, .brx-header-right):not([data-builder-window]) .dwc-nest-menu.brxe-nav-nested .brxe-dropdown .brx-dropdown-content {
visibility: visible;
min-inline-size: var(--mobile-menu-width) !important;
}
html:not(.dwc-mobile) :is(.brx-header-left, .brx-header-right):not([data-builder-window]) .dwc-nest-menu[data-submenu-reveal="expand"] .brxe-dropdown.open>.brx-dropdown-content {
position: static;
}
class SidebarNavigation {
constructor(options = {}) {
// Basic configuration properties
this.config = {
minWidth: options.minWidth || MegaMenuCONFIG.minWidth, // Using external minWidth variable
menuSelector: options.menuSelector || '.dwc-nest-menu',
openClass: options.openClass || 'brx-open',
activeClasses: options.activeClasses || ['open', 'active'],
leftHeaderClass: options.leftHeaderClass || 'brx-header-left',
rightHeaderClass: options.rightHeaderClass || 'brx-header-right',
debounceDelay: options.debounceDelay || 100,
menuItemClickDelay: options.menuItemClickDelay || 300
};
// Set dependent selectors
const menuSelector = this.config.menuSelector;
this.config.submenuToggleSelector = options.submenuToggleSelector || `${menuSelector} .brx-submenu-toggle`;
this.config.dropdownSelector = options.dropdownSelector || `${menuSelector} .brxe-dropdown`;
this.config.dropdownContentSelector = options.dropdownContentSelector || `${menuSelector} .brx-dropdown-content`;
// State
this.previousHeaderClass = null;
this.dropdownClickHandlers = new Map();
this.menuHoverHandlers = null;
this.menuItemClickTimeout = null;
this.keyboardNavHandler = null;
this.cachedFocusableElements = null;
this.cachedElements = {
menuElement: null,
navElement: null,
dropdowns: null,
dropdownToggles: null,
menuItems: null
};
// Bind methods to this instance
this.handleResize = this.debounce(this.handleMenu.bind(this), this.config.debounceDelay);
this.handleOutsideClick = this.handleOutsideClick.bind(this);
}
// Initialize everything - called once
init() {
// Wait for DOM to be fully loaded before attaching events
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', () => {
this.initAfterDOMLoaded();
}, { once: true });
} else {
this.initAfterDOMLoaded();
}
return this;
}
// Separate initialization method to run after DOM is loaded
initAfterDOMLoaded() {
// Cache DOM elements once
this.cacheElements();
// Setup resize event with passive flag
window.addEventListener('resize', this.handleResize, { passive: true });
// Setup mutation observer for critical class changes only
this.setupMutationObserver();
// Initial setup based on current screen size
this.handleMenu();
// Cache focusable elements once if header class is present
if (this.hasHeaderClass()) {
this.cacheFocusableElements();
this.setupMenuFocusNavigation();
}
}
// Cache all required DOM elements upfront
cacheElements() {
this.cachedElements.menuElement = document.querySelector(this.config.menuSelector);
if (this.cachedElements.menuElement) {
this.cachedElements.navElement = this.cachedElements.menuElement.querySelector('.dwc-nest-nav-items');
this.cachedElements.dropdowns = Array.from(document.querySelectorAll(this.config.dropdownSelector));
this.cachedElements.dropdownToggles = Array.from(document.querySelectorAll(this.config.submenuToggleSelector));
this.cachedElements.menuItems = Array.from(document.querySelectorAll(`${this.config.menuSelector} .menu-item`));
}
}
// Set up a focused mutation observer only for dropdown state changes
setupMutationObserver() {
if (!this.cachedElements.dropdowns || this.cachedElements.dropdowns.length === 0) return;
const callback = (mutations) => {
for (let mutation of mutations) {
if (mutation.type === 'attributes' && mutation.attributeName === 'class') {
const target = mutation.target;
const prevClassList = mutation.oldValue ? mutation.oldValue.split(' ') : [];
const hadBothBefore = prevClassList.includes('open') && prevClassList.includes('active');
const hasBothNow = target.classList.contains('open') && target.classList.contains('active');
if (hadBothBefore !== hasBothNow) {
this.updateDropdownAccessibility();
break; // Only need to update once per batch
}
}
}
};
// Create observer with optimized options
this.classObserver = new MutationObserver(callback);
// Observe only the dropdown elements
this.cachedElements.dropdowns.forEach(dropdown => {
this.classObserver.observe(dropdown, {
attributes: true,
attributeFilter: ['class'],
attributeOldValue: true
});
});
}
// Cache focusable elements for keyboard navigation
cacheFocusableElements() {
if (!this.cachedElements.navElement) return;
// Get direct children of nav
const directChildren = Array.from(this.cachedElements.navElement.children);
// Find the first focusable element within each direct child
this.cachedFocusableElements = directChildren.map(child => {
// Check if the child itself is focusable
if (child.matches('a, button, input, select, textarea, [tabindex]:not([tabindex="-1"])')) {
return child;
}
// Otherwise, find the first focusable element within this child
return child.querySelector('a, button, input, select, textarea, [tabindex]:not([tabindex="-1"])');
}).filter(Boolean); // Remove null/undefined values
}
// Clean up all event listeners and observers
destroy() {
// Clean up the mutation observer
if (this.classObserver) {
this.classObserver.disconnect();
this.classObserver = null;
}
// Clean up resize listener
window.removeEventListener('resize', this.handleResize);
// Clean up click handlers
if (this.dropdownClickHandlers.size > 0) {
this.dropdownClickHandlers.forEach((handler, toggle) => {
toggle.removeEventListener('click', handler);
});
this.dropdownClickHandlers.clear();
}
// Clean up hover handlers
this.cleanupMenuHover();
// Clean up menu item click handlers
this.cleanupMenuItemClicks();
// Clean up outside click handler
document.removeEventListener('click', this.handleOutsideClick);
// Clean up keyboard navigation
if (this.keyboardNavHandler) {
document.removeEventListener('keydown', this.keyboardNavHandler);
this.keyboardNavHandler = null;
}
// Clear any pending timeouts
if (this.menuItemClickTimeout) {
clearTimeout(this.menuItemClickTimeout);
this.menuItemClickTimeout = null;
}
}
// Utility methods
hasHeaderClass() {
return document.body.classList.contains(this.config.leftHeaderClass) ||
document.body.classList.contains(this.config.rightHeaderClass);
}
debounce(func, delay) {
let timer;
return (...args) => {
clearTimeout(timer);
timer = setTimeout(() => func(...args), delay);
};
}
// Check if an element has all the required active classes
hasAllActiveClasses(element) {
return this.config.activeClasses.every(className => element.classList.contains(className));
}
// Toggle all active classes on an element
toggleActiveClasses(element) {
this.config.activeClasses.forEach(className => {
element.classList.toggle(className);
});
}
// Core functionality methods
handleMenu() {
if (!this.cachedElements.menuElement) return;
if (!this.hasHeaderClass() && !this.previousHeaderClass) return;
const screenWidth = window.innerWidth;
const isLargeScreen = screenWidth >= this.config.minWidth;
const menuElement = this.cachedElements.menuElement;
if (!isLargeScreen) {
// Save which class was present before removal
if (this.hasHeaderClass()) {
this.previousHeaderClass = document.body.classList.contains(this.config.leftHeaderClass)
? this.config.leftHeaderClass
: this.config.rightHeaderClass;
// Remove header classes
document.body.classList.remove(this.config.leftHeaderClass, this.config.rightHeaderClass);
menuElement.classList.remove(this.config.openClass);
// Reset accessibility attributes
this.resetAccessibilityAttributes();
}
// Clean up event handlers for mobile view
this.cleanupMenuHover();
this.cleanupMenuItemClicks();
this.cleanupDropdownHandlers();
document.removeEventListener('click', this.handleOutsideClick);
return;
}
// Large screen behavior
if (!this.hasHeaderClass() && this.previousHeaderClass) {
document.body.classList.add(this.previousHeaderClass);
}
if (this.hasHeaderClass()) {
if (!menuElement.classList.contains(this.config.openClass)) {
menuElement.classList.add(this.config.openClass);
}
// Setup elements for large screen view
this.setupMenuHover();
this.setupMenuItemClicks();
this.setupDropdownHandlers();
this.setupMenuFocusNavigation();
this.updateDropdownAccessibility();
// Ensure outside click handler is set up
document.removeEventListener('click', this.handleOutsideClick);
document.addEventListener('click', this.handleOutsideClick, { passive: false });
}
}
// Reset accessibility attributes when switching to mobile
resetAccessibilityAttributes() {
if (!this.cachedElements.dropdowns) return;
// Remove all inert attributes from dropdown contents
this.cachedElements.dropdowns.forEach(dropdown => {
const content = dropdown.querySelector(this.config.dropdownContentSelector);
if (content) {
content.removeAttribute('inert');
}
const button = dropdown.querySelector('button');
if (button) {
button.setAttribute('aria-expanded', 'false');
}
});
}
setupMenuFocusNavigation() {
// Only run if hasHeaderClass() is true and we have focusable elements
if (!this.hasHeaderClass() || !this.cachedFocusableElements || this.cachedFocusableElements.length === 0) {
return;
}
// Clean up previous handler if it exists
if (this.keyboardNavHandler) {
document.removeEventListener('keydown', this.keyboardNavHandler, true);
this.keyboardNavHandler = null;
}
const navMenu = this.cachedElements.menuElement;
const focusableElements = this.cachedFocusableElements;
const firstFocusableElement = focusableElements[0];
const lastFocusableElement = focusableElements[focusableElements.length - 1];
// Find adjacent focusable elements outside the menu (only once during setup)
const headerElement = navMenu.closest('header') || document.querySelector('header');
// Prepare variables to hold adjacent elements
let prevFocusableElement = null;
let nextFocusableElement = null;
let firstElementAfterHeader = null;
if (headerElement) {
// Get all focusable elements within the header - do this once and cache the result
const headerFocusables = Array.from(
headerElement.querySelectorAll('a:not([tabindex="-1"]), button:not([tabindex="-1"]), input:not([tabindex="-1"]), select:not([tabindex="-1"]), textarea:not([tabindex="-1"]), [tabindex]:not([tabindex="-1"])')
).filter(el => window.getComputedStyle(el).display !== 'none');
// Find the index of our first and last menu elements in one pass
const menuStartIndex = headerFocusables.indexOf(firstFocusableElement);
const menuEndIndex = headerFocusables.indexOf(lastFocusableElement);
// Cache the adjacent elements
if (menuStartIndex > 0) {
prevFocusableElement = headerFocusables[menuStartIndex - 1];
}
if (menuEndIndex !== -1 && menuEndIndex < headerFocusables.length - 1) {
nextFocusableElement = headerFocusables[menuEndIndex + 1];
}
// Pre-calculate the first element after header - but only if needed
if (!nextFocusableElement) {
// Use a more efficient selector that targets immediate children of body that aren't the header
const selector = 'body > *:not(header)';
const nonHeaderElements = document.querySelectorAll(selector);
// Only process if we have elements
if (nonHeaderElements.length > 0) {
// Create a function to find the first focusable element (used later if needed)
this.findFirstFocusableAfterHeader = () => {
for (const element of nonHeaderElements) {
const focusable = element.querySelector('a:not([tabindex="-1"]), button:not([tabindex="-1"]), input:not([tabindex="-1"]), select:not([tabindex="-1"]), textarea:not([tabindex="-1"]), [tabindex]:not([tabindex="-1"])');
if (focusable && window.getComputedStyle(focusable).display !== 'none') {
return focusable;
}
}
return null;
};
}
}
}
// Create keyboard navigation handler with closure over the cached elements
this.keyboardNavHandler = (e) => {
// Quick check for Tab key first
if (e.key !== 'Tab') return;
// Then check if focus is inside the menu
if (!navMenu.contains(document.activeElement)) return;
let targetElement = null;
// Handle tab navigation at boundaries only
if (!e.shiftKey && document.activeElement === lastFocusableElement) {
// Forward tab from last element
e.preventDefault();
e.stopPropagation();
if (nextFocusableElement) {
targetElement = nextFocusableElement;
} else if (this.findFirstFocusableAfterHeader) {
// Only search for elements after header if needed and not already found
firstElementAfterHeader = this.findFirstFocusableAfterHeader();
targetElement = firstElementAfterHeader;
}
// Focus on the target or body as fallback
setTimeout(() => {
if (targetElement) {
targetElement.focus();
} else {
document.body.setAttribute('tabindex', '-1');
document.body.focus();
document.body.removeAttribute('tabindex');
}
}, 10);
}
else if (e.shiftKey && document.activeElement === firstFocusableElement) {
// Backward tab from first element
e.preventDefault();
e.stopPropagation();
setTimeout(() => {
if (prevFocusableElement) {
prevFocusableElement.focus();
} else {
document.body.setAttribute('tabindex', '-1');
document.body.focus();
document.body.removeAttribute('tabindex');
}
}, 10);
}
};
// Use capture phase for the event
document.addEventListener('keydown', this.keyboardNavHandler, true);
}
setupMenuHover() {
const menuElement = this.cachedElements.menuElement;
if (!menuElement) return;
// Clean up existing hover handlers first
this.cleanupMenuHover();
// Create event handlers
const mouseenterHandler = () => {
menuElement.classList.add(this.config.openClass);
};
const mouseleaveHandler = () => {
menuElement.classList.remove(this.config.openClass);
};
// Add event listeners with passive flag for better performance
menuElement.addEventListener('mouseenter', mouseenterHandler, { passive: true });
menuElement.addEventListener('mouseleave', mouseleaveHandler, { passive: true });
// Store the handlers for cleanup
this.menuHoverHandlers = {
element: menuElement,
mouseenter: mouseenterHandler,
mouseleave: mouseleaveHandler
};
}
cleanupMenuHover() {
if (this.menuHoverHandlers) {
const { element, mouseenter, mouseleave } = this.menuHoverHandlers;
element.removeEventListener('mouseenter', mouseenter);
element.removeEventListener('mouseleave', mouseleave);
this.menuHoverHandlers = null;
}
}
setupMenuItemClicks() {
if (!this.cachedElements.menuItems || this.cachedElements.menuItems.length === 0) return;
// Clean up existing handlers first
this.cleanupMenuItemClicks();
const menuElement = this.cachedElements.menuElement;
const menuItemHandlers = new Map();
this.cachedElements.menuItems.forEach(item => {
const clickHandler = () => {
if (this.hasHeaderClass()) {
// Clear any existing timeout
if (this.menuItemClickTimeout) {
clearTimeout(this.menuItemClickTimeout);
}
// Set timeout before adding the class
this.menuItemClickTimeout = setTimeout(() => {
if (!menuElement.classList.contains(this.config.openClass)) {
menuElement.classList.add(this.config.openClass);
}
}, this.config.menuItemClickDelay);
}
};
menuItemHandlers.set(item, clickHandler);
item.addEventListener('click', clickHandler);
});
this.menuItemClickHandlers = menuItemHandlers;
}
cleanupMenuItemClicks() {
if (this.menuItemClickHandlers && this.menuItemClickHandlers instanceof Map) {
this.menuItemClickHandlers.forEach((handler, item) => {
item.removeEventListener('click', handler);
});
this.menuItemClickHandlers.clear();
}
if (this.menuItemClickTimeout) {
clearTimeout(this.menuItemClickTimeout);
this.menuItemClickTimeout = null;
}
}
setupDropdownHandlers() {
if (!this.hasHeaderClass() || !this.cachedElements.dropdownToggles) return;
// Clean up existing handlers first
this.cleanupDropdownHandlers();
this.cachedElements.dropdownToggles.forEach(toggle => {
const clickHandler = (event) => {
event.stopPropagation();
event.preventDefault();
const dropdown = toggle.closest(this.config.dropdownSelector);
if (dropdown) {
this.toggleActiveClasses(dropdown);
this.updateDropdownAccessibility();
}
};
this.dropdownClickHandlers.set(toggle, clickHandler);
toggle.addEventListener('click', clickHandler);
});
}
cleanupDropdownHandlers() {
if (this.dropdownClickHandlers.size > 0) {
this.dropdownClickHandlers.forEach((handler, toggle) => {
toggle.removeEventListener('click', handler);
});
this.dropdownClickHandlers.clear();
}
}
handleOutsideClick(event) {
if (event.target.tagName === 'A') return;
if (!event.target.closest(this.config.dropdownSelector)) return;
if (!event.target.closest(this.config.submenuToggleSelector)) {
event.preventDefault();
event.stopPropagation();
}
}
updateDropdownAccessibility() {
// Only run if hasHeaderClass() is true
if (!this.hasHeaderClass() || !this.cachedElements.dropdowns) return;
this.cachedElements.dropdowns.forEach(dropdown => {
const content = dropdown.querySelector(this.config.dropdownContentSelector);
const button = dropdown.querySelector('button');
// Check if dropdown has all active classes
const isOpen = this.hasAllActiveClasses(dropdown);
if (content) {
if (isOpen) {
content.removeAttribute('inert');
} else {
content.setAttribute('inert', '');
}
}
if (button) {
button.setAttribute('aria-expanded', isOpen ? 'true' : 'false');
}
});
}
}
const sidebarNav = new SidebarNavigation().init();
No. of Results: 24
No. of Results: 24
