/*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 #mobile_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;
}
: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 #mobile_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;
}
/* 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();@media (min-width: 1201px){
.dwc-mobile header{
display: none;
}
/* 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';
}
}
/* end min-width */
/*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(--dropdown-width) !important;
}
html:not(.dwc-mobile) .bricks-is-frontend .dwc-nest-menu .brx-dropdown-content{
box-shadow: var(--dropdown-content-shadow);
}
.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) * 1.2);
}
.dwc-nest-toggle--open.brxa--vortex .brxa-wrap{
inline-size: var(--open-icon-size)
}
.dwc-nest-menu .brxa-inner,
.dwc-nest-menu .brxa-inner:after,
.dwc-nest-menu .brxa-inner:before{
background-color: var(--menu-toggle-clr)
}
.dwc-nest-menu.brxe-nav-nested .brxe-toggle i{
color: var(--menu-toggle-clr)
}
.dwc-nest-menu .brxa-wrap:hover .brxa-inner,
.dwc-nest-menu .brxa-wrap:hover .brxa-inner:after,
.dwc-nest-menu .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,
.dwc-nest-menu .brx-nav-nested-items > li:not(.brx-has-megamenu) .brx-submenu-toggle {
padding-block: var(--dropdown-item-block-padding);
padding-inline: var(--dropdown-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);
}
/* 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"] .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):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"] .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):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 {
position: relative;
}
/* ACTIVE STYLES */
/* links and dropdwon active styles */
.dwc-nest-menu .brx-nav-nested-items a[aria-current="page"]:not(li:hover > a, a:hover, .dwc-nest-menu__logo,
[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 .brx-nav-nested-items > li:has([aria-current="page"]):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(.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([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, .brx-submenu-toggle > a)::before,
.dwc-nest-menu .brx-nav-nested-items > li:has([aria-current="page"]) > .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"]) > .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-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{
background-color: var(--dropdown-active-bg);
color: var(--dropdown-active-clr);
}
: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-active-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"]), 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"]) > .brx-submenu-toggle svg,
.dwc-nest-menu .brx-nav-nested-items li:hover > .brx-submenu-toggle svg{
color: var(--chevron-hover-clr);
}
.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;
}
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%;
}
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;
}
/* 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: calc((var(--menu-item-inline-padding) * 2) + (var(--menu-item-font-size) * 2));
inline-size: 150%;
inset-inline-end: 50%;
transform: translateX(50%);
z-index: -1;
} */
/*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);
}
/* 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 .dwc-nest-nav-list:not([data-offcanvas="true"] .dwc-nest-nav-list, .brx-header-left .dwc-nest-nav-list, .brx-header-right .dwc-nest-nav-list) {
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 */
html:not(.dwc-mobile) .dwc-stripe-style .brx-has-megamenu.open .brx-dropdown-content:not([data-offcanvas="true"] .dwc-nest-nav-list, .brx-header-left .dwc-nest-nav-list, .brx-header-right .dwc-nest-nav-list) > * {
transform: translateX(0);
}
html:not(.dwc-mobile) .dwc-stripe-style .brx-has-megamenu.open .brx-dropdown-content:not([data-offcanvas="true"] .dwc-nest-nav-list, .brx-header-left .dwc-nest-nav-list, .brx-header-right .dwc-nest-nav-list) > * {
transition: transform 0.4s, opacity 0s 0.15s;
opacity: 1;
}
html:not(.dwc-mobile) .dwc-stripe-style .brx-has-megamenu .brx-dropdown-content:not([data-offcanvas="true"] .dwc-nest-nav-list, .brx-header-left .dwc-nest-nav-list, .brx-header-right .dwc-nest-nav-list) > * {
transition: transform 0.4s, opacity 0s;
opacity: 0;
}
html:not(.dwc-mobile) .dwc-stripe-style .brx-has-megamenu.open + .brx-has-megamenu .brx-dropdown-content:not([data-offcanvas="true"] .dwc-nest-nav-list, .brx-header-left .dwc-nest-nav-list, .brx-header-right .dwc-nest-nav-list) > * {
transform: translateX(5%);
}
html:not(.dwc-mobile) .dwc-stripe-style .brx-has-megamenu:has(+ .brx-has-megamenu.open) .brx-dropdown-content:not([data-offcanvas="true"] .dwc-nest-nav-list, .brx-header-left .dwc-nest-nav-list, .brx-header-right .dwc-nest-nav-list) > * {
transform: translateX(-5%);
}
/* 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(.show-nav .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"]):not([data-match-overlay-header-width="true"]) .dwc-nav-wrapper:has(.brxe-dropdown.open.active) {
z-index: unset !important;
}
.dwc-mobile :is([data-slide-in-direction="top"], [data-slide-in-direction="top left"]) .dwc-nav-wrapper {
z-index: -1;
}
.dwc-mobile .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(.adaptive-height-active .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;
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: 50vw;
transform: translateX(-50%);
}
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: 15px;
block-size: 15px;
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(-50%) rotate(45deg) translateY(calc(50% + 2px));
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 {
opacity: 1;
}
html:not(.dwc-mobile) .dwc-stripe-style .dwc-nest-header::after {
border: var(--adaptive-height-border);
}
html:not(.dwc-mobile) :not(.brx-header-left, .brx-header-right).dwc-stripe-style .dwc-nest-menu .brx-nav-nested-items>.brxe-dropdown.brx-has-megamenu>.brx-dropdown-content:not([data-offcanvas="true"] .brx-dropdown-content) {
/* transform: translateY(calc(var(--dwc-nest-header-height) * 0.5)); */
}
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-nest-header-height) + 14px);
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;
}
.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;
}
/****************
MENU OVERLAY
***************/
.dwc-nest-menu-overlay {
position: fixed;
inline-size: 100%;
block-size: 100%;
background: var(--dwc-overlay-clr) !important;
z-index: 1;
opacity: 0;
transition: 0.4s;
backdrop-filter: blur(var(--backdrop-blur));
}
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);
}
body:has([data-overlay-header-optimize-adaptive-height="true"][data-overlay-header="true"]) .dwc-nest-menu-overlay {
inset-block-start: 0;
}
.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));
}
@media (min-width:1025px){
.bricks-is-frontend:not(:has([data-offcanvas="true"])) header:has(.open) .dwc-nest-menu-overlay {
opacity: 1;
}
}
.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;
}
/* 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) {
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) {
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, div) {
padding-block-start: var(--overlay-offset-padding);
}
/* menu height anime on overlay header */
html:not(.dwc-mobile) .bricks-is-frontend
#brx-header:has([data-overlay-header = "true"])
.dwc-nest-header::after {
border-radius: var(--overlay-header-radius);
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 {
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 {
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(.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"] .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 ), .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-has-megamenu .brx-dropdown-content {
border-radius: var(--dropdown-content-border-radius);
}
.dwc-nest-header{
position: relative;
z-index: 9999;
}
/* optimize multi row header*/
.dwc-mobile .dwc-nest-header[data-fullscreen-mobile-menu="true"]{
--dwc-nest-header-height:var(--fullscreen-mobile-menu-top-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-top-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] [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 in dropdown Content ATTRIBUTES > style, value:--dropdown-content-width: e.g. 1080px. Leave empty to use default width (set in Menu Styles CSS code block) | 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;
}
: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 Offcanvas, 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 Offcanvas, 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%);
}
/*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-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-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(var(--dropdown-content-gap)) 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);
}
/* caret on dropdown (non stripe) */
/* 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(var(--dropdown-content-gap) * -2.1);
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[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.5);
block-size: calc(var(--dropdown-content-gap) * 1.5);
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.open:not(.dwc-stripe-style .brx-has-megamenu)::after {
inline-size: calc(var(--dropdown-content-gap) * 1.2);
block-size: calc(var(--dropdown-content-gap) * 1.2);
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(var(--dropdown-content-gap) * -1.6);
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[data-align-content-bottom="true"][data-caret-outline="true"]: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[data-align-content-bottom="true"][data-caret-outline="true"]:not([data-offcanvas="true"]) .brx-nav-nested-items > .brxe-dropdown:not(.dwc-stripe-style .brx-has-megamenu) .brx-dropdown-content/*:not(.brx-dropdown-content .brx-dropdown-content)*/ {
outline: var(--dropdown-content-border);
}
html:not(.dwc-mobile) .dwc-nest-menu[data-align-content-bottom="true"][data-caret-outline="true"]:not([data-offcanvas="true"]) .brx-nav-nested-items .open:has(.open) > .brx-dropdown-content:not(.brx-header-left *, .brx-header-right *)::before {
background-color: initial;
}
/* === 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;
}
/* breakdout link*/
.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;
}
/*
.dwc-mobile .bricks-is-frontend [data-submenu-reveal="slide"].dwc-nest-menu.brxe-nav-nested .brxe-dropdown.brx-has-megamenu:not(:is([data-submenu-reveal="expand"])) .brx-dropdown-content:not([data-submenu-reveal="expand"] .brx-dropdown-content) > li,
.dwc-mobile .bricks-is-frontend [data-submenu-reveal="slide"].brxe-dropdown.brx-has-megamenu .brx-dropdown-content > li {
padding-block-end: 8rem;
}*/
body:has(.brx-has-megamenu.open) .brx-sticky .dwc-nest-header::after {
background-color: var(--adaptive-height-bg) !important;
}
html:not(.dwc-mobile) .bricks-is-frontend #brx-header:has([data-overlay-header="true"]):not(.brx-sticky) {
position: absolute;
inset-block-start: 0;
inset-inline: 0;
}
.dwc-mobile .bricks-is-frontend #brx-header:has([data-overlay-header-mobile="true"]):not(.brx-sticky) {
position: absolute;
inset-block-start: 0;
inset-inline: 0;
}
/* DESKTOP OVERRIDES — force horizontaal op ≥1201px */
@media only screen and (min-width: 1201px) {
/* Zorg dat niets denkt dat we 'mobile' zijn */
.dwc-mobile .dwc-nav-wrapper,
.dwc-mobile .dwc-nest-menu,
.dwc-mobile #dwc-nest-menu {
/* dit neutraliseert per ongeluk geplakte .dwc-mobile styles op desktop */
all: unset;
}
/* Basis desktop lay-out */
.dwc-nest-menu .dwc-nav-wrapper {
position: static !important;
transform: none !important;
visibility: visible !important;
inline-size: auto !important;
block-size: auto !important;
background: transparent !important;
overflow: visible !important;
}
.dwc-nest-menu .brx-nav-nested-items {
display: flex !important;
flex-direction: row !important; /* ← horizontaal */
align-items: center !important;
gap: var(--menu-item-gap, 18px);
background: transparent !important;
overflow: visible !important;
position: static !important;
}
/* Verberg de mobiele topbar op desktop */
.dwc-nest-menu-top {
display: none !important;
}
/* Dropdowns als normale desktop dropdowns onder het item */
.dwc-nest-menu .brxe-dropdown > .brx-dropdown-content {
position: absolute !important;
inset-block-start: 100% !important; /* onder het hoofditem */
inset-inline-start: 0 !important;
transform: none !important;
min-block-size: auto !important;
max-block-size: none !important;
padding-block: var(--dropdown-padding-block, 10px) !important;
background: var(--dropdown-bg, #fff) !important;
visibility: hidden;
opacity: 0;
transition: opacity .2s ease, visibility .2s ease;
}
/* Toon dropdown bij hover/focus */
.dwc-nest-menu .brxe-dropdown:hover > .brx-dropdown-content,
.dwc-nest-menu .brxe-dropdown:focus-within > .brx-dropdown-content {
visibility: visible;
opacity: 1;
}
/* Megamenu’s mogen breder, maar óók onder het item blijven */
.dwc-nest-menu .brx-has-megamenu > .brx-dropdown-content {
position: absolute !important;
inset-inline-start: 0 !important;
inset-block-start: 100% !important;
width: min(90vw, 1200px) !important; /* pas aan naar wens */
}
/* Haal mobiele ‘slide/expand’ gedrag uit op desktop */
[data-submenu-reveal="slide"] .brx-dropdown-content,
[data-submenu-reveal="expand"] .brx-dropdown-content {
position: absolute !important;
inset-block-start: 100% !important;
inset-inline-start: 0 !important;
transform: none !important;
min-block-size: auto !important;
max-block-size: none !important;
display: block !important;
}
/* Zorg dat de toggle (hamburger) niet zichtbaar is op desktop */
.dwc-nest-menu .brxe-toggle {
display: none !important;
}
}
function updateMobileClass(minWidth = MegaMenuCONFIG.minWidth) {
const classList = document.documentElement.classList;
const isMobile = window.innerWidth < 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
this.listItems = Array.from(this.elements.listParent.children).filter(item =>
!item.querySelector('.brx-toggle-div')
);
// Calculate position
const halfIndex = this.listItems.length / 2;
const logoOrder = this.roundHalfIndex(halfIndex, this.config.roundOffFactor);
this.logoListItem.style.order = logoOrder;
// this.elements.headerInner.classList.add('dwc-logo-is-centered');
// 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,
navTopLinksSelector: `${config.headerSelector || MegaMenuCONFIG.headerSelector} .dwc-nest-nav-top-link.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.navTopLinks = document.querySelectorAll(this.config.navTopLinksSelector);
this.header = document.querySelector(this.config.headerSelector);
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;
}
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;
let menuOpened = false;
let menuWidth = 0;
let menuHeight = 0;
let menuLeftOffset = 0;
this.navTopLinks.forEach(link => {
if (link.classList.contains('open')) {
requestAnimationFrame(() => {
let dropdownMenu = link.querySelector('.dwc-nest-nav-list');
let nestHeader = link.closest(this.config.headerSelector);
if (dropdownMenu) {
menuWidth = dropdownMenu.offsetWidth;
menuHeight = dropdownMenu.offsetHeight;
menuLeftOffset = Number(dropdownMenu.getBoundingClientRect().left) - Number(nestHeader.getBoundingClientRect().left) + window.scrollX;
this.maxMenuWidth = Math.max(this.maxMenuWidth, menuWidth);
this.maxMenuHeight = Math.max(this.maxMenuHeight, menuHeight);
let scaleX = menuWidth / this.maxMenuWidth;
let scaleY = menuHeight / this.maxMenuHeight;
if (this.config.adaptiveHeight || this.config.stripeStyle) {
this.header.style.setProperty('--dropdown-menu-height', `${menuHeight}px`);
}
if (this.config.stripeStyle) {
this.header.style.setProperty('--dropdown-menu-x', `${menuLeftOffset}px`);
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());
}
}
});
menuOpened = true;
this.header.classList.add('show-menu-animation');
this.header.classList.remove('hide-menu-animation');
}
});
if (!menuOpened) {
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;
requestAnimationFrame(() => {
dropdowns.forEach((dropdown) => {
const computedStyle = getComputedStyle(dropdown);
const contentWidth = parseInt(computedStyle.getPropertyValue('--dropdown-content-width'), 10);
// 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]);
}
}
const parentLi = dropdown.closest('.brx-has-megamenu.brxe-dropdown');
if (!parentLi) return;
const contentAlign = dropdown.getAttribute('data-content-align');
const validAlignments = ['left', 'center', 'right'];
const hasValidAlignment = contentAlign && validAlignments.includes(contentAlign);
let leftPosition;
const liRect = parentLi.getBoundingClientRect();
const dropdownRect = dropdown.getBoundingClientRect();
// Calculate actual width by dividing by the scale factor
const actualDropdownWidth = dropdownRect.width / scaleX;
if (!hasValidAlignment) {
if (defaultRect) {
// Account for window scroll and parent container position
const headerElement = defaultElement;
const headerRect = headerElement ? headerElement.getBoundingClientRect() : null;
if (headerRect) {
const headerLeftOffset = headerRect.left + window.scrollX;
leftPosition = (defaultRect.width - actualDropdownWidth) / 2 - (liRect.left - headerLeftOffset);
} else {
leftPosition = 0;
}
} else {
leftPosition = 0;
}
} else {
switch (contentAlign) {
case 'left':
leftPosition = 0;
const rightEdge = liRect.left + actualDropdownWidth;
if (rightEdge >= viewportWidth) {
let overflow = rightEdge - viewportWidth;
if (overflow > 0 && overflow < this.config.minOverflow) overflow = this.config.minOverflow;
leftPosition -= overflow * this.config.shiftFactor;
}
break;
case 'right':
leftPosition = liRect.width - actualDropdownWidth;
const leftEdge = liRect.left + leftPosition;
if (leftEdge <= 0) {
let overflow = -leftEdge;
if (overflow > 0 && overflow < this.config.minOverflow) overflow = this.config.minOverflow;
leftPosition += overflow * this.config.shiftFactor;
}
break;
case 'center':
leftPosition = (liRect.width - actualDropdownWidth) / 2;
break;
}
}
dropdown.style.setProperty('--left-position', `${leftPosition}px`);
if (!dropdown.style.getPropertyValue('--left-position')) {
dropdown.style.setProperty('--left-position', '0px');
}
});
});
}
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');
if (parentDropdown) {
setTimeout(() => {
parentDropdown.classList.add('open', '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');
}
}, 100)
});
}
setTimeout(() => {
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;
}
let linkRect = targetLink.getBoundingClientRect();
let linkMidpoint = linkRect.left + linkRect.width / 2;
let headerRect = headerElement.getBoundingClientRect();
let headerLeftOffset = headerRect.left + window.scrollX;
headerElement.style.setProperty('--chevron-parent-width', `${headerRect.width}px`);
headerElement.style.setProperty('--chevron-parent-left', `${headerLeftOffset}px`);
headerElement.style.setProperty('--navlink-midpoint', `${linkMidpoint - headerLeftOffset}px`);
headerElement.style.setProperty('--navlink-left', `${linkRect.left - headerLeftOffset}px`);
headerElement.style.setProperty('--navlink-width', `${linkRect.width}px`);
});
}
updateHeaderHeight() {
if (this.headerTimeoutId) {
clearTimeout(this.headerTimeoutId);
}
requestAnimationFrame(() => {
if (this.header) {
this.headerTimeoutId = setTimeout(() => {
let headerHeight = this.header.offsetHeight;
document.body.style.setProperty('--dwc-nest-header-height', `${headerHeight}px`);
}, 300);
}
});
}
setMobileMenuTopHeight() {
if (this.mobileMenuTimeoutId) {
clearTimeout(this.mobileMenuTimeoutId);
}
let mobileMenuTop = document.getElementById('mobile_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.navTopLinks.forEach(link => {
let dropdown = link.querySelector('.dwc-nest-nav-list');
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;
}
}
closeNavOnClick() {
const menuItemLinks = document.querySelectorAll('.dwc-nest-menu a');
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 condition - if true, exit without adding new listeners
if(this.isAboveMinWidth() && !this.isOffCanvas()) return;
// Only add new event listeners if the condition is false
menuItemLinks.forEach(link => {
const clickHandler = () => {
if (menuToggle) {
menuToggle.click();
}
};
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('.brx-nav-nested-items');
if (closestUl) {
const tooltip = closestUl.querySelector('.dwc-nest-tooltip');
if (tooltip) {
const buttonText = button.getAttribute('data-text');
tooltip.setAttribute('data-text', buttonText);
tooltip.innerText = toolTipBackText + ' ' + buttonText;
}
}
}
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('ul');
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;
}
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;
let diffX = this.endX - this.startX;
let diffY = Math.abs(this.endY - this.startY);
if (diffX > 50 && diffY < 30 && this.targetButton) {
this.targetButton.click();
this.targetButton = null;
}
}
isMobileMenuOpen() {
return document.querySelector('.dwc-nest-menu')?.classList.contains('brx-open');
}
setTargetButton(button) {
this.targetButton = button;
}
}
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');
}, 100);
styleSheet.remove();
}
}
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,
navTopLinksSelector: `${config.headerSelector || MegaMenuCONFIG.headerSelector} .dwc-nest-nav-top-link.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.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); // Add the CenteredLogoController
// Start early initialization for centered logo
this.centeredLogoController.initializeEarly();
}
initialize() {
updateMobileClass(this.config.minWidthThreshold);
document.addEventListener('DOMContentLoaded', () => {
let overlay = document.querySelector('.dwc-nest-menu-overlay');
if (!overlay) {
overlay = document.createElement('nav-overlay');
overlay.className = 'dwc-nest-menu-overlay';
const header = document.querySelector('#brx-header');
let mainContent = document.querySelector('main');
if (header) {
header.parentNode.insertBefore(overlay, header);
} else if (mainContent) {
mainContent.parentNode.insertBefore(overlay, mainContent);
}
}
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()
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();
}, 200);
setTimeout(() => {
document.body.classList.add('adaptive-height-active');
if (this.animationController.isAboveMinWidth()) {
this.animationController.updateDropdownPositions(); // Initial desktop positioning
this.animationController.setBoxedWidthVariable()
}
}, 1200);
});
return this;
}
setupDesktopBehavior() {
this.animationController.navTopLinks.forEach(link => {
link.removeEventListener('mouseenter', this.handleMouseEnter);
link.addEventListener('mouseenter', this.handleMouseEnter);
});
}
handleMouseEnter = (event) => {
this.animationController.updateChevronPosition(event.target);
};
setupEventListeners() {
let observer = new MutationObserver(mutations => {
mutations.forEach(mutation => {
if (mutation.type === 'attributes' && mutation.attributeName === 'class') {
this.animationController.updateMenuVariables();
}
});
});
this.animationController.navTopLinks.forEach(link =>
observer.observe(link, { attributes: true })
);
document.addEventListener('click', event => {
let submenuToggle = event.target.closest('.brx-submenu-toggle');
if (submenuToggle) {
setTimeout(() => {
let openButtons = document.querySelectorAll('.brxe-dropdown.open.active button');
let targetButton = Array.from(openButtons).find(button => {
let parentDropdown = button.closest('.brxe-dropdown.open.active');
return parentDropdown &&
parentDropdown.tagName.toLowerCase() === 'li' &&
!parentDropdown.querySelector('.brxe-dropdown.open.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();
this.animationController.updateDropdownPositions(); // Update on resize
} else {
this.animationController.resetForMobile();
this.swipeHandler.initialize();
}
}, 300));
}
debounce(func, delay) {
let timeoutId;
return function(...args) {
clearTimeout(timeoutId);
timeoutId = setTimeout(() => func.apply(this, args), delay);
};
}
}
const mainMenu = new MenuSystem().initialize();
//==== HEADER INSTANCE EXPERIMENTAL ====
/*
const secondaryMenu = new MenuSystem({
headerSelector: '.second.dwc-nest-header',
adaptiveHeight: 1,
stripeStyle: 0,
shiftFactor: 1.5, // Example override
minOverflow: 300 // Example override
}).initialize();
*/
// Use WeakMap for better garbage collection
const originalParents = new WeakMap();
let isMobileView = null;
let resizeTimer;
function handleResponsiveMenu() {
const currentIsMobile = window.innerWidth < MegaMenuCONFIG.minWidth; // Adjust breakpoint as needed
// Only run the logic if the view state changed
if (isMobileView === currentIsMobile) return;
isMobileView = currentIsMobile;
const nestMenu = document.querySelector('.dwc-nest-menu');
if (!nestMenu) return;
if (isMobileView) {
// Mobile behavior
const targetItems = document.querySelectorAll('.brx-nav-nested-items > .menu-item > [data-breakout-link]');
const fragment = document.createDocumentFragment();
targetItems.forEach(item => {
const parent = item.parentElement;
parent.classList.add('has-breakout-link')
// Store original parent if not already stored
if (!originalParents.has(item)) {
originalParents.set(item, parent);
}
// Add to document fragment instead of direct DOM manipulation
fragment.appendChild(item);
// Hide the original parent
parent.style.display = 'none';
});
// Single DOM operation to insert all items
nestMenu.insertBefore(fragment, nestMenu.firstChild);
} else {
// Desktop behavior - restore items to original parents
const movedItems = nestMenu.querySelectorAll('[data-breakout-link]');
movedItems.forEach(item => {
const originalParent = originalParents.get(item);
if (originalParent) {
originalParent.appendChild(item);
originalParent.style.display = '';
}
});
}
}
// Run on page load
handleResponsiveMenu();
// Debounce resize events
window.addEventListener('resize', () => {
clearTimeout(resizeTimer);
resizeTimer = setTimeout(handleResponsiveMenu, 150);
});
// Optional: Add for better initial load behavior
document.addEventListener('DOMContentLoaded', handleResponsiveMenu);/* DO NOT ADD ANY CODE IN THIS CODE BLOCK */
/*MOBILE MENU/OFFCANVAS/SIDEBAR STYLES*/
@media only screen and (max-width: 1200px) {
.desktop-centered header:has([data-fix-centered-logo-fouc="true"]) {
opacity: 0;
}
.dwc-nest-menu__logo[data-breakout-link]{
margin-inline-end: auto
}
/*special mobile menu styles for overlay header UPDATED */
.dwc-mobile .bricks-is-frontend .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 .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 .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(--overlay-header-radius) * -1);
}
.dwc-mobile .bricks-is-frontend .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);
}
.dwc-mobile .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: var(--mobile-menu-radius);
border-bottom-right-radius: var(--mobile-menu-radius);
padding-block-start: calc(var(--dwc-nest-header-height) / 2);
overflow-x: hidden;
}
.dwc-mobile .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 .dwc-nest-menu[data-slide-in-direction="top"][data-match-overlay-header-width="true"] .dwc-nav-wrapper {
transform: translateY(0%);
border-radius: var(--overlay-header-radius);
overflow: hidden !important;
inset-block-start: var(--overlay-header-inset);
}
.dwc-mobile .bricks-is-frontend .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 .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))
}
.dwc-mobile .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) {
height: 0;
}
.dwc-mobile .dwc-nest-header:has(.dwc-nest-menu[data-slide-in-direction="top"][data-match-overlay-header-width="true"]) {
padding-inline: initial
}
.dwc-mobile .dwc-nest-menu[data-slide-in-direction="top"][data-match-overlay-header-width="true"] .dwc-nest-menu-top {
border-block-end: initial;
}
.dwc-mobile .dwc-nest-header:has(.dwc-nest-menu[data-slide-in-direction="top"][data-match-overlay-header-width="true"]:not([data-submenu-reveal="expand"])) .dwc-nest-nav-items:has(.open.active) .brx-submenu-toggle>button:not(.brxe-dropdown.open.active .brx-submenu-toggle > button) {
opacity: 0;
}
.dwc-mobile .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) {
inset-block-start: var(--overlay-header-radius) !important;
padding-block-start: 50px;
}
.dwc-mobile .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),
.bricks-is-frontend [data-submenu-reveal="slide"].brxe-dropdown .brx-dropdown-content:not([data-hide-close-bar="true"] ul) {
inset-block-start: var(--overlay-header-radius) !important;
padding-block-start: 50px;
}
.dwc-mobile .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: var(--overlay-header-radius);
}
.dwc-mobile .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 .dwc-nest-menu[data-slide-in-direction="top"][data-match-overlay-header-width="true"][data-submenu-reveal="slide"] .brx-nav-nested-items:has(.open.active) {
overflow-y: hidden;
}
*/
.dwc-mobile .bricks-is-frontend .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 {
width: 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;
}
.dwc-nest-menu .brx-nav-nested-items {
position: relative !Important;
background: var(--mobile-menu-bg) !important;
align-items: stretch;
flex: 1;
}
.dwc-nest-menu .brx-nav-nested-items:not(.brx-open .brx-nav-nested-items) {
transform: unset
}
.dwc-nest-nav-top-link: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;
}
/* RTL */
[dir="rtl"] .dwc-nav-wrapper{
inset-inline-end: initial;
inset-inline-start: 0;
}
.brx-open .dwc-nav-wrapper {
transform: translateX(0%);
visibility: visible;
}
.dwc-nest-menu-top {
background-color: var(--mobile-menu-top-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-nav-top-link.brx-has-megamenu,
.dwc-nest-dropdown-content>.menu-item>a {
border-block-end: var(--menu-item-border);
}
.dwc-nest-nav-top-link:not(.brx-has-megamenu):not(.open, :has(.open)),
.dwc-nest-dropdown-content>.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: 80px;
}
.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 *) {
min-block-size: var(--dwc-nest-header-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)
}
.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-active-bg);
color: var(--dropdown-active-clr);
}
/* 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: 70%;
position: fixed;
inset-block-start: 0;
transform: translateY(0%) !important;
inset-inline-start: var(--menu-item-inline-padding);
color: var(--back-text-clr);
text-transform: var(--back-text-transform);
letter-spacing: 1px;
/* padding-inline: 1rem !important; */
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-nest-header-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: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:not([data-hide-close-bar="true"] button):after {
content: attr(data-text);
}
/* FORCE TO USE 'BACK' AS BACK BUTTON TEXT */
.bricks-is-frontend [data-force-backtext="true"]:not([data-submenu-reveal="expand"]) .brxe-dropdown.open:not([data-submenu-reveal="expand"]) > .brx-submenu-toggle button::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"]) .dwc-nest-menu-top {
background-color: var(--mobile-menu-top-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-top-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"] *) {
background-color: transparent !important;
}
/* MENU BELOW HEADER */
.bricks-is-frontend [data-below-header="true"].dwc-nest-menu .dwc-nav-wrapper {
inset-block-start: var(--dwc-nest-header-height);
}
[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;
}
.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(.open.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(150%);
opacity: 0;
}
}
.dwc-nest-tooltip {
animation: slideIn 0.4s ease-in-out both, fadeOut 0.4s ease-in-out 2s both;
}
/* 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;
height: 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*/
}/* ============= NAV STYLES =========== */
:root{
--primary-clr: orangered;
--header-bg: white;
--header-min-height:60px;
/*when using fullscreen mobile menu*/
--fullscreen-mobile-menu-top-height: 60px;
--sidebar-shadow: 0px 0px 2px rgba(0, 0, 0, 0.7);
/* default width for mega menu dropdown content */
--dropdown-content-default-width: 1080px;
/* mega menu dropdown content border radius*/
--dropdown-content-border-radius: 0;
/* space between dropdwon content and header */
--dropdown-content-gap:0;
/* mobile/offcanvas menu width */
--mobile-menu-width: min(300px, 100%);
/* radius for special mobile style on overlay header*/
--mobile-menu-radius: var(--overlay-header-radius);
/* mobile/offcanvas/sidebar
higher value = faster
use any value, even decimals */
--slide-out-speed: 1.3;
/* Back text bar height for sidebar nav & menu below header */
--top-offset: 40px;
/* overlay backdrop blur */
--backdrop-blur: 0px;
/* ========================
MENU ITEMS
======================== */
/* Colors */
--menu-item-clr: #000;
--menu-item-hover-clr: var(--primary-clr);
--menu-toggle-clr: var(--menu-item-clr);
--menu-icon-clr: var(--primary-clr);
/* hover colors */
--menu-toggle-hover-clr: var(--menu-item-hover-clr);
--menu-item-hover-border-bg: var(--menu-item-active-border-bg);
--menu-item-hover-border-height:var(--menu-item-active-border-height);
/* active colors */
--menu-item-active-clr: var(--menu-item-hover-clr);
--menu-item-active-border-height: 2px;
--menu-item-active-border-bg: var(--primary-clr);
/* Backgrounds */
--menu-item-bg: initial;
--menu-item-hover-bg: white;
--menu-item-active-bg: #ededed;
/* Spacing */
--menu-item-inline-padding: 1.1rem; /*horizontal padding*/
--menu-item-block-padding: 1rem; /* vertical padding*/
--menu-items-gap: 0;
/* Typography */
--menu-item-font-weight: 500;
--menu-item-font-size: 14px;
/* Bottom Border | Radius */
--menu-item-border: 1px solid rgba(0, 0, 0, 0.1); /*mobile only*/
--menu-item-radius: 0;
/* ========================
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)
======================== */
/* Colors */
--menu-cta-clr: white;
--menu-cta-hover-clr: white;
/* Backgrounds */
--menu-cta-bg: black;
--menu-cta-hover-bg: var(--primary-clr);
/* Spacing */
--menu-cta-inline-padding: calc(var(--menu-item-inline-padding) * 1.3);
--menu-cta-block-padding: var(--menu-item-block-padding);
/* Borders & Radius */
--menu-cta-border: none;
--menu-cta-radius: 0em;
/* ========================
MENU CTA BUTTON (SECOND BUTTON)
======================== */
/* Colors */
--menu-cta-2-clr: white;
--menu-cta-2-hover-clr: white;
/* Backgrounds */
--menu-cta-2-bg: black;
--menu-cta-2-hover-bg: var(--primary-clr);
/* Spacing */
--menu-cta-2-inline-padding: var(--menu-cta-inline-padding);
--menu-cta-2-block-padding: var(--menu-cta-block-padding);
/* Borders & Radius */
--menu-cta-2-border: var(--menu-cta-border);
--menu-cta-2-radius: var(--menu-cta-radius);
/* ========================
MENU CTA BUTTON (THIRD BUTTON)
======================== */
/* Colors */
--menu-cta-3-clr: white;
--menu-cta-3-hover-clr: white;
/* Backgrounds */
--menu-cta-3-bg: black;
--menu-cta-3-hover-bg: var(--primary-clr);
/* Spacing */
--menu-cta-3-inline-padding: var(--menu-cta-inline-padding);
--menu-cta-3-block-padding: var(--menu-cta-block-padding);
/* Borders & Radius */
--menu-cta-3-border: var(--menu-cta-border);
--menu-cta-3-radius: var(--menu-cta-radius);
/* ========================
DROPDOWN LINKS
======================== */
--dropdown-width: 200px;
/* Colors */
--dropdown-item-clr: var(--menu-item-clr);
--dropdown-item-hover-clr: var(--menu-item-hover-clr);
--dropdown-heading-clr: var(--primary-clr);
--dropdown-active-clr: white;
/* Backgrounds */
--dropdown-content-bg: var(--mobile-menu-bg);
--dropdown-content-inner-bg: var(--mobile-menu-bg);
--dropdown-item-hover-bg: white;
--dropdown-item-bg: white;
--dropdown-indent-bg: rgb(0 0 0 / 5%);
--dropdown-active-bg: black;
--dropdown-inactive-overlay: rgb(0 0 0 / 10%);
/* Spacing */
--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;
/* Typography */
--dropdown-item-font-size: var(--menu-item-font-size);
/* Border & Shadow */
--dropdown-indent-line: solid 1px rgb(0 0 0 / 25%);
--dropdown-content-shadow: 0px 5px 15px -10px rgb(0 0 0 / 0%);
--dropdown-content-border: solid 1px var(--primary-clr);;
/* ========================
CHEVRON (Dropdown Arrow)
======================== */
--chevron-size: 14px;
--chevron-clr: var(--menu-item-clr);
--chevron-hover-clr:var(--menu-item-hover-clr);
/* ========================
MENU TOGGLE - Hamburger
======================== */
--open-icon-size: 30px;
--open-icon-line-height: 3px;
--icon-line-gap: 0.5em; /* gap between the lines*/
--open-icon-line-variance: 9px; /* by how much the lines vary in width, e.g. 0 = same width*/
--open-icon-align: 0; /* when the lines' width varies, 0 = align right, auto = align left*/
--open-icon-horizontal-offset: 0px; /* nudge the icon left or right from edge of screen*/
/* ======================================
ADAPTIVE HEIGHT/ STRIPE BG COLOR/BORDER
========================================= */
--adaptive-height-bg: #fff;
--adaptive-height-border: 1px solid #fff;
/* ========================
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 */
--mobile-menu-bg: white; /* mobile menu background color */
--mobile-menu-top-bg: white; /* mobile menu close bar background color */
/* =================
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 to previous menu color */
--back-text-font-size: 12px;
--back-text-font-weight: 600;
--back-text-transform: uppercase;
--back-text-bg: var(--mobile-menu-top-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;
/* ========================
PAGE OVERLAY - color/opacity
======================== */
--dwc-overlay-clr: rgba(0, 0, 0, 0.3);
/* ======== DON'T YOU DARE! ======== */
--iw: calc(var(--open-icon-size) - var(--open-icon-line-variance));
--aw: calc(var(--iw) - var(--open-icon-line-variance));
}
/* 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);
}
/* ========================================
MOBILE STYLES
copy above variables to modify
for mobile breakpoint
========================================= */
.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;
}
/* ========================
STICKY HEADER STYLES
copy variables to modify
for sticky header
======================== */
.sticky.scrolling{
/* add your sticky styles variable here */
}
/* ========== NAV STYLES END ============== */
/* ======== 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-21924 *) {
display: none !important;
}
:is(.brx-header-left, .brx-header-right)[data-builder-window] :is(#brx-content, #brx-footer):not(.postid-21924 *) {
margin: unset !important;
}
const MegaMenuCONFIG = {
// Minimum width threshold for desktop behavior,
// should be 1px larger than mobile (max-width) breakpoint in the "MENU Styles/Options" CSS code block
//IMPORTANT: Also change min-width in the "MEGA MENU Codes" CSS code block
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: false,
// Stripe menu animation
stripeStyle: false,
headerSelector: '.dwc-nest-header',
// New properties for dropdown positioning
shiftFactor: 1, // Factor to shift overflow
minOverflow: 10 // Minimum overflow threshold
};
// 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'
};
/*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 #mobile_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;
}
: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 #mobile_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;
}
/* 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();@media (min-width: 1201px){
.dwc-mobile header{
display: none;
}
/* 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';
}
}
/* end min-width */
/*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(--dropdown-width) !important;
}
html:not(.dwc-mobile) .bricks-is-frontend .dwc-nest-menu .brx-dropdown-content{
box-shadow: var(--dropdown-content-shadow);
}
.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) * 1.2);
}
.dwc-nest-toggle--open.brxa--vortex .brxa-wrap{
inline-size: var(--open-icon-size)
}
.dwc-nest-menu .brxa-inner,
.dwc-nest-menu .brxa-inner:after,
.dwc-nest-menu .brxa-inner:before{
background-color: var(--menu-toggle-clr)
}
.dwc-nest-menu.brxe-nav-nested .brxe-toggle i{
color: var(--menu-toggle-clr)
}
.dwc-nest-menu .brxa-wrap:hover .brxa-inner,
.dwc-nest-menu .brxa-wrap:hover .brxa-inner:after,
.dwc-nest-menu .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,
.dwc-nest-menu .brx-nav-nested-items > li:not(.brx-has-megamenu) .brx-submenu-toggle {
padding-block: var(--dropdown-item-block-padding);
padding-inline: var(--dropdown-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);
}
/* 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"] .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):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"] .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):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 {
position: relative;
}
/* ACTIVE STYLES */
/* links and dropdwon active styles */
.dwc-nest-menu .brx-nav-nested-items a[aria-current="page"]:not(li:hover > a, a:hover, .dwc-nest-menu__logo,
[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 .brx-nav-nested-items > li:has([aria-current="page"]):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(.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([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, .brx-submenu-toggle > a)::before,
.dwc-nest-menu .brx-nav-nested-items > li:has([aria-current="page"]) > .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"]) > .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-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{
background-color: var(--dropdown-active-bg);
color: var(--dropdown-active-clr);
}
: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-active-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"]), 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"]) > .brx-submenu-toggle svg,
.dwc-nest-menu .brx-nav-nested-items li:hover > .brx-submenu-toggle svg{
color: var(--chevron-hover-clr);
}
.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;
}
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%;
}
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;
}
/* 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: calc((var(--menu-item-inline-padding) * 2) + (var(--menu-item-font-size) * 2));
inline-size: 150%;
inset-inline-end: 50%;
transform: translateX(50%);
z-index: -1;
} */
/*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);
}
/* 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 .dwc-nest-nav-list:not([data-offcanvas="true"] .dwc-nest-nav-list, .brx-header-left .dwc-nest-nav-list, .brx-header-right .dwc-nest-nav-list) {
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 */
html:not(.dwc-mobile) .dwc-stripe-style .brx-has-megamenu.open .brx-dropdown-content:not([data-offcanvas="true"] .dwc-nest-nav-list, .brx-header-left .dwc-nest-nav-list, .brx-header-right .dwc-nest-nav-list) > * {
transform: translateX(0);
}
html:not(.dwc-mobile) .dwc-stripe-style .brx-has-megamenu.open .brx-dropdown-content:not([data-offcanvas="true"] .dwc-nest-nav-list, .brx-header-left .dwc-nest-nav-list, .brx-header-right .dwc-nest-nav-list) > * {
transition: transform 0.4s, opacity 0s 0.15s;
opacity: 1;
}
html:not(.dwc-mobile) .dwc-stripe-style .brx-has-megamenu .brx-dropdown-content:not([data-offcanvas="true"] .dwc-nest-nav-list, .brx-header-left .dwc-nest-nav-list, .brx-header-right .dwc-nest-nav-list) > * {
transition: transform 0.4s, opacity 0s;
opacity: 0;
}
html:not(.dwc-mobile) .dwc-stripe-style .brx-has-megamenu.open + .brx-has-megamenu .brx-dropdown-content:not([data-offcanvas="true"] .dwc-nest-nav-list, .brx-header-left .dwc-nest-nav-list, .brx-header-right .dwc-nest-nav-list) > * {
transform: translateX(5%);
}
html:not(.dwc-mobile) .dwc-stripe-style .brx-has-megamenu:has(+ .brx-has-megamenu.open) .brx-dropdown-content:not([data-offcanvas="true"] .dwc-nest-nav-list, .brx-header-left .dwc-nest-nav-list, .brx-header-right .dwc-nest-nav-list) > * {
transform: translateX(-5%);
}
/* 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(.show-nav .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"]):not([data-match-overlay-header-width="true"]) .dwc-nav-wrapper:has(.brxe-dropdown.open.active) {
z-index: unset !important;
}
.dwc-mobile :is([data-slide-in-direction="top"], [data-slide-in-direction="top left"]) .dwc-nav-wrapper {
z-index: -1;
}
.dwc-mobile .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(.adaptive-height-active .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;
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: 50vw;
transform: translateX(-50%);
}
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: 15px;
block-size: 15px;
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(-50%) rotate(45deg) translateY(calc(50% + 2px));
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 {
opacity: 1;
}
html:not(.dwc-mobile) .dwc-stripe-style .dwc-nest-header::after {
border: var(--adaptive-height-border);
}
html:not(.dwc-mobile) :not(.brx-header-left, .brx-header-right).dwc-stripe-style .dwc-nest-menu .brx-nav-nested-items>.brxe-dropdown.brx-has-megamenu>.brx-dropdown-content:not([data-offcanvas="true"] .brx-dropdown-content) {
/* transform: translateY(calc(var(--dwc-nest-header-height) * 0.5)); */
}
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-nest-header-height) + 14px);
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;
}
.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;
}
/****************
MENU OVERLAY
***************/
.dwc-nest-menu-overlay {
position: fixed;
inline-size: 100%;
block-size: 100%;
background: var(--dwc-overlay-clr) !important;
z-index: 1;
opacity: 0;
transition: 0.4s;
backdrop-filter: blur(var(--backdrop-blur));
}
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);
}
body:has([data-overlay-header-optimize-adaptive-height="true"][data-overlay-header="true"]) .dwc-nest-menu-overlay {
inset-block-start: 0;
}
.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));
}
@media (min-width:1025px){
.bricks-is-frontend:not(:has([data-offcanvas="true"])) header:has(.open) .dwc-nest-menu-overlay {
opacity: 1;
}
}
.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;
}
/* 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) {
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) {
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, div) {
padding-block-start: var(--overlay-offset-padding);
}
/* menu height anime on overlay header */
html:not(.dwc-mobile) .bricks-is-frontend
#brx-header:has([data-overlay-header = "true"])
.dwc-nest-header::after {
border-radius: var(--overlay-header-radius);
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 {
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 {
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(.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"] .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 ), .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-has-megamenu .brx-dropdown-content {
border-radius: var(--dropdown-content-border-radius);
}
.dwc-nest-header{
position: relative;
z-index: 9999;
}
/* optimize multi row header*/
.dwc-mobile .dwc-nest-header[data-fullscreen-mobile-menu="true"]{
--dwc-nest-header-height:var(--fullscreen-mobile-menu-top-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-top-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] [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 in dropdown Content ATTRIBUTES > style, value:--dropdown-content-width: e.g. 1080px. Leave empty to use default width (set in Menu Styles CSS code block) | 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;
}
: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 Offcanvas, 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 Offcanvas, 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%);
}
/*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-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-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(var(--dropdown-content-gap)) 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);
}
/* caret on dropdown (non stripe) */
/* 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(var(--dropdown-content-gap) * -2.1);
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[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.5);
block-size: calc(var(--dropdown-content-gap) * 1.5);
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.open:not(.dwc-stripe-style .brx-has-megamenu)::after {
inline-size: calc(var(--dropdown-content-gap) * 1.2);
block-size: calc(var(--dropdown-content-gap) * 1.2);
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(var(--dropdown-content-gap) * -1.6);
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[data-align-content-bottom="true"][data-caret-outline="true"]: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[data-align-content-bottom="true"][data-caret-outline="true"]:not([data-offcanvas="true"]) .brx-nav-nested-items > .brxe-dropdown:not(.dwc-stripe-style .brx-has-megamenu) .brx-dropdown-content/*:not(.brx-dropdown-content .brx-dropdown-content)*/ {
outline: var(--dropdown-content-border);
}
html:not(.dwc-mobile) .dwc-nest-menu[data-align-content-bottom="true"][data-caret-outline="true"]:not([data-offcanvas="true"]) .brx-nav-nested-items .open:has(.open) > .brx-dropdown-content:not(.brx-header-left *, .brx-header-right *)::before {
background-color: initial;
}
/* === 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;
}
/* breakdout link*/
.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;
}
/*
.dwc-mobile .bricks-is-frontend [data-submenu-reveal="slide"].dwc-nest-menu.brxe-nav-nested .brxe-dropdown.brx-has-megamenu:not(:is([data-submenu-reveal="expand"])) .brx-dropdown-content:not([data-submenu-reveal="expand"] .brx-dropdown-content) > li,
.dwc-mobile .bricks-is-frontend [data-submenu-reveal="slide"].brxe-dropdown.brx-has-megamenu .brx-dropdown-content > li {
padding-block-end: 8rem;
}*/
body:has(.brx-has-megamenu.open) .brx-sticky .dwc-nest-header::after {
background-color: var(--adaptive-height-bg) !important;
}
html:not(.dwc-mobile) .bricks-is-frontend #brx-header:has([data-overlay-header="true"]):not(.brx-sticky) {
position: absolute;
inset-block-start: 0;
inset-inline: 0;
}
.dwc-mobile .bricks-is-frontend #brx-header:has([data-overlay-header-mobile="true"]):not(.brx-sticky) {
position: absolute;
inset-block-start: 0;
inset-inline: 0;
}function updateMobileClass(minWidth = MegaMenuCONFIG.minWidth) {
const classList = document.documentElement.classList;
const isMobile = window.innerWidth < 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
this.listItems = Array.from(this.elements.listParent.children).filter(item =>
!item.querySelector('.brx-toggle-div')
);
// Calculate position
const halfIndex = this.listItems.length / 2;
const logoOrder = this.roundHalfIndex(halfIndex, this.config.roundOffFactor);
this.logoListItem.style.order = logoOrder;
// this.elements.headerInner.classList.add('dwc-logo-is-centered');
// 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,
navTopLinksSelector: `${config.headerSelector || MegaMenuCONFIG.headerSelector} .dwc-nest-nav-top-link.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.navTopLinks = document.querySelectorAll(this.config.navTopLinksSelector);
this.header = document.querySelector(this.config.headerSelector);
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;
}
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;
let menuOpened = false;
let menuWidth = 0;
let menuHeight = 0;
let menuLeftOffset = 0;
this.navTopLinks.forEach(link => {
if (link.classList.contains('open')) {
requestAnimationFrame(() => {
let dropdownMenu = link.querySelector('.dwc-nest-nav-list');
let nestHeader = link.closest(this.config.headerSelector);
if (dropdownMenu) {
menuWidth = dropdownMenu.offsetWidth;
menuHeight = dropdownMenu.offsetHeight;
menuLeftOffset = Number(dropdownMenu.getBoundingClientRect().left) - Number(nestHeader.getBoundingClientRect().left) + window.scrollX;
this.maxMenuWidth = Math.max(this.maxMenuWidth, menuWidth);
this.maxMenuHeight = Math.max(this.maxMenuHeight, menuHeight);
let scaleX = menuWidth / this.maxMenuWidth;
let scaleY = menuHeight / this.maxMenuHeight;
if (this.config.adaptiveHeight || this.config.stripeStyle) {
this.header.style.setProperty('--dropdown-menu-height', `${menuHeight}px`);
}
if (this.config.stripeStyle) {
this.header.style.setProperty('--dropdown-menu-x', `${menuLeftOffset}px`);
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());
}
}
});
menuOpened = true;
this.header.classList.add('show-menu-animation');
this.header.classList.remove('hide-menu-animation');
}
});
if (!menuOpened) {
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;
requestAnimationFrame(() => {
dropdowns.forEach((dropdown) => {
const computedStyle = getComputedStyle(dropdown);
const contentWidth = parseInt(computedStyle.getPropertyValue('--dropdown-content-width'), 10);
// 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]);
}
}
const parentLi = dropdown.closest('.brx-has-megamenu.brxe-dropdown');
if (!parentLi) return;
const contentAlign = dropdown.getAttribute('data-content-align');
const validAlignments = ['left', 'center', 'right'];
const hasValidAlignment = contentAlign && validAlignments.includes(contentAlign);
let leftPosition;
const liRect = parentLi.getBoundingClientRect();
const dropdownRect = dropdown.getBoundingClientRect();
// Calculate actual width by dividing by the scale factor
const actualDropdownWidth = dropdownRect.width / scaleX;
if (!hasValidAlignment) {
if (defaultRect) {
// Account for window scroll and parent container position
const headerElement = defaultElement;
const headerRect = headerElement ? headerElement.getBoundingClientRect() : null;
if (headerRect) {
const headerLeftOffset = headerRect.left + window.scrollX;
leftPosition = (defaultRect.width - actualDropdownWidth) / 2 - (liRect.left - headerLeftOffset);
} else {
leftPosition = 0;
}
} else {
leftPosition = 0;
}
} else {
switch (contentAlign) {
case 'left':
leftPosition = 0;
const rightEdge = liRect.left + actualDropdownWidth;
if (rightEdge >= viewportWidth) {
let overflow = rightEdge - viewportWidth;
if (overflow > 0 && overflow < this.config.minOverflow) overflow = this.config.minOverflow;
leftPosition -= overflow * this.config.shiftFactor;
}
break;
case 'right':
leftPosition = liRect.width - actualDropdownWidth;
const leftEdge = liRect.left + leftPosition;
if (leftEdge <= 0) {
let overflow = -leftEdge;
if (overflow > 0 && overflow < this.config.minOverflow) overflow = this.config.minOverflow;
leftPosition += overflow * this.config.shiftFactor;
}
break;
case 'center':
leftPosition = (liRect.width - actualDropdownWidth) / 2;
break;
}
}
dropdown.style.setProperty('--left-position', `${leftPosition}px`);
if (!dropdown.style.getPropertyValue('--left-position')) {
dropdown.style.setProperty('--left-position', '0px');
}
});
});
}
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');
if (parentDropdown) {
setTimeout(() => {
parentDropdown.classList.add('open', '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');
}
}, 100)
});
}
setTimeout(() => {
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;
}
let linkRect = targetLink.getBoundingClientRect();
let linkMidpoint = linkRect.left + linkRect.width / 2;
let headerRect = headerElement.getBoundingClientRect();
let headerLeftOffset = headerRect.left + window.scrollX;
headerElement.style.setProperty('--chevron-parent-width', `${headerRect.width}px`);
headerElement.style.setProperty('--chevron-parent-left', `${headerLeftOffset}px`);
headerElement.style.setProperty('--navlink-midpoint', `${linkMidpoint - headerLeftOffset}px`);
headerElement.style.setProperty('--navlink-left', `${linkRect.left - headerLeftOffset}px`);
headerElement.style.setProperty('--navlink-width', `${linkRect.width}px`);
});
}
updateHeaderHeight() {
if (this.headerTimeoutId) {
clearTimeout(this.headerTimeoutId);
}
requestAnimationFrame(() => {
if (this.header) {
this.headerTimeoutId = setTimeout(() => {
let headerHeight = this.header.offsetHeight;
document.body.style.setProperty('--dwc-nest-header-height', `${headerHeight}px`);
}, 300);
}
});
}
setMobileMenuTopHeight() {
if (this.mobileMenuTimeoutId) {
clearTimeout(this.mobileMenuTimeoutId);
}
let mobileMenuTop = document.getElementById('mobile_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.navTopLinks.forEach(link => {
let dropdown = link.querySelector('.dwc-nest-nav-list');
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;
}
}
closeNavOnClick() {
const menuItemLinks = document.querySelectorAll('.dwc-nest-menu a');
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 condition - if true, exit without adding new listeners
if(this.isAboveMinWidth() && !this.isOffCanvas()) return;
// Only add new event listeners if the condition is false
menuItemLinks.forEach(link => {
const clickHandler = () => {
if (menuToggle) {
menuToggle.click();
}
};
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('.brx-nav-nested-items');
if (closestUl) {
const tooltip = closestUl.querySelector('.dwc-nest-tooltip');
if (tooltip) {
const buttonText = button.getAttribute('data-text');
tooltip.setAttribute('data-text', buttonText);
tooltip.innerText = toolTipBackText + ' ' + buttonText;
}
}
}
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('ul');
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;
}
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;
let diffX = this.endX - this.startX;
let diffY = Math.abs(this.endY - this.startY);
if (diffX > 50 && diffY < 30 && this.targetButton) {
this.targetButton.click();
this.targetButton = null;
}
}
isMobileMenuOpen() {
return document.querySelector('.dwc-nest-menu')?.classList.contains('brx-open');
}
setTargetButton(button) {
this.targetButton = button;
}
}
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');
}, 100);
styleSheet.remove();
}
}
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,
navTopLinksSelector: `${config.headerSelector || MegaMenuCONFIG.headerSelector} .dwc-nest-nav-top-link.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.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); // Add the CenteredLogoController
// Start early initialization for centered logo
this.centeredLogoController.initializeEarly();
}
initialize() {
updateMobileClass(this.config.minWidthThreshold);
document.addEventListener('DOMContentLoaded', () => {
let overlay = document.querySelector('.dwc-nest-menu-overlay');
if (!overlay) {
overlay = document.createElement('nav-overlay');
overlay.className = 'dwc-nest-menu-overlay';
const header = document.querySelector('#brx-header');
let mainContent = document.querySelector('main');
if (header) {
header.parentNode.insertBefore(overlay, header);
} else if (mainContent) {
mainContent.parentNode.insertBefore(overlay, mainContent);
}
}
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()
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();
}, 200);
setTimeout(() => {
document.body.classList.add('adaptive-height-active');
if (this.animationController.isAboveMinWidth()) {
this.animationController.updateDropdownPositions(); // Initial desktop positioning
this.animationController.setBoxedWidthVariable()
}
}, 1200);
});
return this;
}
setupDesktopBehavior() {
this.animationController.navTopLinks.forEach(link => {
link.removeEventListener('mouseenter', this.handleMouseEnter);
link.addEventListener('mouseenter', this.handleMouseEnter);
});
}
handleMouseEnter = (event) => {
this.animationController.updateChevronPosition(event.target);
};
setupEventListeners() {
let observer = new MutationObserver(mutations => {
mutations.forEach(mutation => {
if (mutation.type === 'attributes' && mutation.attributeName === 'class') {
this.animationController.updateMenuVariables();
}
});
});
this.animationController.navTopLinks.forEach(link =>
observer.observe(link, { attributes: true })
);
document.addEventListener('click', event => {
let submenuToggle = event.target.closest('.brx-submenu-toggle');
if (submenuToggle) {
setTimeout(() => {
let openButtons = document.querySelectorAll('.brxe-dropdown.open.active button');
let targetButton = Array.from(openButtons).find(button => {
let parentDropdown = button.closest('.brxe-dropdown.open.active');
return parentDropdown &&
parentDropdown.tagName.toLowerCase() === 'li' &&
!parentDropdown.querySelector('.brxe-dropdown.open.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();
this.animationController.updateDropdownPositions(); // Update on resize
} else {
this.animationController.resetForMobile();
this.swipeHandler.initialize();
}
}, 300));
}
debounce(func, delay) {
let timeoutId;
return function(...args) {
clearTimeout(timeoutId);
timeoutId = setTimeout(() => func.apply(this, args), delay);
};
}
}
const mainMenu = new MenuSystem().initialize();
//==== HEADER INSTANCE EXPERIMENTAL ====
/*
const secondaryMenu = new MenuSystem({
headerSelector: '.second.dwc-nest-header',
adaptiveHeight: 1,
stripeStyle: 0,
shiftFactor: 1.5, // Example override
minOverflow: 300 // Example override
}).initialize();
*/
// Use WeakMap for better garbage collection
const originalParents = new WeakMap();
let isMobileView = null;
let resizeTimer;
function handleResponsiveMenu() {
const currentIsMobile = window.innerWidth < MegaMenuCONFIG.minWidth; // Adjust breakpoint as needed
// Only run the logic if the view state changed
if (isMobileView === currentIsMobile) return;
isMobileView = currentIsMobile;
const nestMenu = document.querySelector('.dwc-nest-menu');
if (!nestMenu) return;
if (isMobileView) {
// Mobile behavior
const targetItems = document.querySelectorAll('.brx-nav-nested-items > .menu-item > [data-breakout-link]');
const fragment = document.createDocumentFragment();
targetItems.forEach(item => {
const parent = item.parentElement;
parent.classList.add('has-breakout-link')
// Store original parent if not already stored
if (!originalParents.has(item)) {
originalParents.set(item, parent);
}
// Add to document fragment instead of direct DOM manipulation
fragment.appendChild(item);
// Hide the original parent
parent.style.display = 'none';
});
// Single DOM operation to insert all items
nestMenu.insertBefore(fragment, nestMenu.firstChild);
} else {
// Desktop behavior - restore items to original parents
const movedItems = nestMenu.querySelectorAll('[data-breakout-link]');
movedItems.forEach(item => {
const originalParent = originalParents.get(item);
if (originalParent) {
originalParent.appendChild(item);
originalParent.style.display = '';
}
});
}
}
// Run on page load
handleResponsiveMenu();
// Debounce resize events
window.addEventListener('resize', () => {
clearTimeout(resizeTimer);
resizeTimer = setTimeout(handleResponsiveMenu, 150);
});
// Optional: Add for better initial load behavior
document.addEventListener('DOMContentLoaded', handleResponsiveMenu);/* DO NOT ADD ANY CODE IN THIS CODE BLOCK */
/*MOBILE MENU/OFFCANVAS/SIDEBAR STYLES*/
@media only screen and (max-width: 1200px) {
.desktop-centered header:has([data-fix-centered-logo-fouc="true"]) {
opacity: 0;
}
.dwc-nest-menu__logo[data-breakout-link]{
margin-inline-end: auto
}
/*special mobile menu styles for overlay header UPDATED */
.dwc-mobile .bricks-is-frontend .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 .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 .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(--overlay-header-radius) * -1);
}
.dwc-mobile .bricks-is-frontend .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);
}
.dwc-mobile .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: var(--mobile-menu-radius);
border-bottom-right-radius: var(--mobile-menu-radius);
padding-block-start: calc(var(--dwc-nest-header-height) / 2);
overflow-x: hidden;
}
.dwc-mobile .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 .dwc-nest-menu[data-slide-in-direction="top"][data-match-overlay-header-width="true"] .dwc-nav-wrapper {
transform: translateY(0%);
border-radius: var(--overlay-header-radius);
overflow: hidden !important;
inset-block-start: var(--overlay-header-inset);
}
.dwc-mobile .bricks-is-frontend .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 .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))
}
.dwc-mobile .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) {
height: 0;
}
.dwc-mobile .dwc-nest-header:has(.dwc-nest-menu[data-slide-in-direction="top"][data-match-overlay-header-width="true"]) {
padding-inline: initial
}
.dwc-mobile .dwc-nest-menu[data-slide-in-direction="top"][data-match-overlay-header-width="true"] .dwc-nest-menu-top {
border-block-end: initial;
}
.dwc-mobile .dwc-nest-header:has(.dwc-nest-menu[data-slide-in-direction="top"][data-match-overlay-header-width="true"]:not([data-submenu-reveal="expand"])) .dwc-nest-nav-items:has(.open.active) .brx-submenu-toggle>button:not(.brxe-dropdown.open.active .brx-submenu-toggle > button) {
opacity: 0;
}
.dwc-mobile .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) {
inset-block-start: var(--overlay-header-radius) !important;
padding-block-start: 50px;
}
.dwc-mobile .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),
.bricks-is-frontend [data-submenu-reveal="slide"].brxe-dropdown .brx-dropdown-content:not([data-hide-close-bar="true"] ul) {
inset-block-start: var(--overlay-header-radius) !important;
padding-block-start: 50px;
}
.dwc-mobile .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: var(--overlay-header-radius);
}
.dwc-mobile .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 .dwc-nest-menu[data-slide-in-direction="top"][data-match-overlay-header-width="true"][data-submenu-reveal="slide"] .brx-nav-nested-items:has(.open.active) {
overflow-y: hidden;
}
*/
.dwc-mobile .bricks-is-frontend .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 {
width: 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;
}
.dwc-nest-menu .brx-nav-nested-items {
position: relative !Important;
background: var(--mobile-menu-bg) !important;
align-items: stretch;
flex: 1;
}
.dwc-nest-menu .brx-nav-nested-items:not(.brx-open .brx-nav-nested-items) {
transform: unset
}
.dwc-nest-nav-top-link: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;
}
/* RTL */
[dir="rtl"] .dwc-nav-wrapper{
inset-inline-end: initial;
inset-inline-start: 0;
}
.brx-open .dwc-nav-wrapper {
transform: translateX(0%);
visibility: visible;
}
.dwc-nest-menu-top {
background-color: var(--mobile-menu-top-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-nav-top-link.brx-has-megamenu,
.dwc-nest-dropdown-content>.menu-item>a {
border-block-end: var(--menu-item-border);
}
.dwc-nest-nav-top-link:not(.brx-has-megamenu):not(.open, :has(.open)),
.dwc-nest-dropdown-content>.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: 80px;
}
.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 *) {
min-block-size: var(--dwc-nest-header-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)
}
.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-active-bg);
color: var(--dropdown-active-clr);
}
/* 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: 70%;
position: fixed;
inset-block-start: 0;
transform: translateY(0%) !important;
inset-inline-start: var(--menu-item-inline-padding);
color: var(--back-text-clr);
text-transform: var(--back-text-transform);
letter-spacing: 1px;
/* padding-inline: 1rem !important; */
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-nest-header-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: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:not([data-hide-close-bar="true"] button):after {
content: attr(data-text);
}
/* FORCE TO USE 'BACK' AS BACK BUTTON TEXT */
.bricks-is-frontend [data-force-backtext="true"]:not([data-submenu-reveal="expand"]) .brxe-dropdown.open:not([data-submenu-reveal="expand"]) > .brx-submenu-toggle button::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"]) .dwc-nest-menu-top {
background-color: var(--mobile-menu-top-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-top-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"] *) {
background-color: transparent !important;
}
/* MENU BELOW HEADER */
.bricks-is-frontend [data-below-header="true"].dwc-nest-menu .dwc-nav-wrapper {
inset-block-start: var(--dwc-nest-header-height);
}
[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;
}
.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(.open.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(150%);
opacity: 0;
}
}
.dwc-nest-tooltip {
animation: slideIn 0.4s ease-in-out both, fadeOut 0.4s ease-in-out 2s both;
}
/* 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;
height: 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*/
}/* ============= NAV STYLES =========== */
:root{
--primary-clr: orangered;
--header-bg: white;
--header-min-height:60px;
/*when using fullscreen mobile menu*/
--fullscreen-mobile-menu-top-height: 60px;
--sidebar-shadow: 0px 0px 2px rgba(0, 0, 0, 0.7);
/* default width for mega menu dropdown content */
--dropdown-content-default-width: 1080px;
/* mega menu dropdown content border radius*/
--dropdown-content-border-radius: 0;
/* space between dropdwon content and header */
--dropdown-content-gap:0;
/* mobile/offcanvas menu width */
--mobile-menu-width: min(300px, 100%);
/* radius for special mobile style on overlay header*/
--mobile-menu-radius: var(--overlay-header-radius);
/* mobile/offcanvas/sidebar
higher value = faster
use any value, even decimals */
--slide-out-speed: 1.3;
/* Back text bar height for sidebar nav & menu below header */
--top-offset: 40px;
/* overlay backdrop blur */
--backdrop-blur: 0px;
/* ========================
MENU ITEMS
======================== */
/* Colors */
--menu-item-clr: #000;
--menu-item-hover-clr: var(--primary-clr);
--menu-toggle-clr: var(--menu-item-clr);
--menu-icon-clr: var(--primary-clr);
/* hover colors */
--menu-toggle-hover-clr: var(--menu-item-hover-clr);
--menu-item-hover-border-bg: var(--menu-item-active-border-bg);
--menu-item-hover-border-height:var(--menu-item-active-border-height);
/* active colors */
--menu-item-active-clr: var(--menu-item-hover-clr);
--menu-item-active-border-height: 2px;
--menu-item-active-border-bg: var(--primary-clr);
/* Backgrounds */
--menu-item-bg: initial;
--menu-item-hover-bg: white;
--menu-item-active-bg: #ededed;
/* Spacing */
--menu-item-inline-padding: 1.1rem; /*horizontal padding*/
--menu-item-block-padding: 1rem; /* vertical padding*/
--menu-items-gap: 0;
/* Typography */
--menu-item-font-weight: 500;
--menu-item-font-size: 14px;
/* Bottom Border | Radius */
--menu-item-border: 1px solid rgba(0, 0, 0, 0.1); /*mobile only*/
--menu-item-radius: 0;
/* ========================
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)
======================== */
/* Colors */
--menu-cta-clr: white;
--menu-cta-hover-clr: white;
/* Backgrounds */
--menu-cta-bg: black;
--menu-cta-hover-bg: var(--primary-clr);
/* Spacing */
--menu-cta-inline-padding: calc(var(--menu-item-inline-padding) * 1.3);
--menu-cta-block-padding: var(--menu-item-block-padding);
/* Borders & Radius */
--menu-cta-border: none;
--menu-cta-radius: 0em;
/* ========================
MENU CTA BUTTON (SECOND BUTTON)
======================== */
/* Colors */
--menu-cta-2-clr: white;
--menu-cta-2-hover-clr: white;
/* Backgrounds */
--menu-cta-2-bg: black;
--menu-cta-2-hover-bg: var(--primary-clr);
/* Spacing */
--menu-cta-2-inline-padding: var(--menu-cta-inline-padding);
--menu-cta-2-block-padding: var(--menu-cta-block-padding);
/* Borders & Radius */
--menu-cta-2-border: var(--menu-cta-border);
--menu-cta-2-radius: var(--menu-cta-radius);
/* ========================
MENU CTA BUTTON (THIRD BUTTON)
======================== */
/* Colors */
--menu-cta-3-clr: white;
--menu-cta-3-hover-clr: white;
/* Backgrounds */
--menu-cta-3-bg: black;
--menu-cta-3-hover-bg: var(--primary-clr);
/* Spacing */
--menu-cta-3-inline-padding: var(--menu-cta-inline-padding);
--menu-cta-3-block-padding: var(--menu-cta-block-padding);
/* Borders & Radius */
--menu-cta-3-border: var(--menu-cta-border);
--menu-cta-3-radius: var(--menu-cta-radius);
/* ========================
DROPDOWN LINKS
======================== */
--dropdown-width: 200px;
/* Colors */
--dropdown-item-clr: var(--menu-item-clr);
--dropdown-item-hover-clr: var(--menu-item-hover-clr);
--dropdown-heading-clr: var(--primary-clr);
--dropdown-active-clr: white;
/* Backgrounds */
--dropdown-content-bg: var(--mobile-menu-bg);
--dropdown-content-inner-bg: var(--mobile-menu-bg);
--dropdown-item-hover-bg: white;
--dropdown-item-bg: white;
--dropdown-indent-bg: rgb(0 0 0 / 5%);
--dropdown-active-bg: black;
--dropdown-inactive-overlay: rgb(0 0 0 / 10%);
/* Spacing */
--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;
/* Typography */
--dropdown-item-font-size: var(--menu-item-font-size);
/* Border & Shadow */
--dropdown-indent-line: solid 1px rgb(0 0 0 / 25%);
--dropdown-content-shadow: 0px 5px 15px -10px rgb(0 0 0 / 0%);
--dropdown-content-border: solid 1px var(--primary-clr);;
/* ========================
CHEVRON (Dropdown Arrow)
======================== */
--chevron-size: 14px;
--chevron-clr: var(--menu-item-clr);
--chevron-hover-clr:var(--menu-item-hover-clr);
/* ========================
MENU TOGGLE - Hamburger
======================== */
--open-icon-size: 30px;
--open-icon-line-height: 3px;
--icon-line-gap: 0.5em; /* gap between the lines*/
--open-icon-line-variance: 9px; /* by how much the lines vary in width, e.g. 0 = same width*/
--open-icon-align: 0; /* when the lines' width varies, 0 = align right, auto = align left*/
--open-icon-horizontal-offset: 0px; /* nudge the icon left or right from edge of screen*/
/* ======================================
ADAPTIVE HEIGHT/ STRIPE BG COLOR/BORDER
========================================= */
--adaptive-height-bg: #fff;
--adaptive-height-border: 1px solid #fff;
/* ========================
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 */
--mobile-menu-bg: white; /* mobile menu background color */
--mobile-menu-top-bg: white; /* mobile menu close bar background color */
/* =================
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 to previous menu color */
--back-text-font-size: 12px;
--back-text-font-weight: 600;
--back-text-transform: uppercase;
--back-text-bg: var(--mobile-menu-top-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;
/* ========================
PAGE OVERLAY - color/opacity
======================== */
--dwc-overlay-clr: rgba(0, 0, 0, 0.3);
/* ======== DON'T YOU DARE! ======== */
--iw: calc(var(--open-icon-size) - var(--open-icon-line-variance));
--aw: calc(var(--iw) - var(--open-icon-line-variance));
}
/* 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);
}
/* ========================================
MOBILE STYLES
copy above variables to modify
for mobile breakpoint
========================================= */
.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;
}
/* ========================
STICKY HEADER STYLES
copy variables to modify
for sticky header
======================== */
.sticky.scrolling{
/* add your sticky styles variable here */
}
/* ========== NAV STYLES END ============== */
/* ======== 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-21924 *) {
display: none !important;
}
:is(.brx-header-left, .brx-header-right)[data-builder-window] :is(#brx-content, #brx-footer):not(.postid-21924 *) {
margin: unset !important;
}
const MegaMenuCONFIG = {
// Minimum width threshold for desktop behavior,
// should be 1px larger than mobile (max-width) breakpoint in the "MENU Styles/Options" CSS code block
//IMPORTANT: Also change min-width in the "MEGA MENU Codes" CSS code block
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: false,
// Stripe menu animation
stripeStyle: false,
headerSelector: '.dwc-nest-header',
// New properties for dropdown positioning
shiftFactor: 1, // Factor to shift overflow
minOverflow: 10 // Minimum overflow threshold
};
// 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'
};