/*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; } }

/* 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' };

NXT Level Padelacademy

Welke padel locatie past het beste bij jou?

Kies tussen indoor trainen in Den Haag, outdoor spelen vlak bij het strand of onze hoofdlocatie in Rijswijk. Op deze pagina zie je snel welke locatie het beste past bij hoe, waar en wanneer jij wilt trainen.

Bekijk de locaties Padelles aanvragen

Locaties

Op welke locaties kun je trainen?

Niet iedereen zoekt dezelfde plek. De één wil binnen trainen met meer zekerheid, de ander speelt liever buiten in Den Haag of kiest juist voor Rijswijk omdat dat op een mooie locatie ligt. Daarom kun je bij NXT Level kiezen uit meerdere locaties.

Directe beschikbaarheid

Hoofdlocatie in Rijswijk

Estate Padelclub Rijswijk

Onze hoofdlocatie in Rijswijk ligt op een mooi en bijzonder park, verscholen in de drukte. Een fijne plek om buiten te trainen, met vaak meer beschikbaarheid en de mogelijkheid om sneller te starten.

Bekijk locatie

Indoor trainen in Den Haag

Padel Mariahoeve

Indoor trainen in Den Haag met meer zekerheid in je planning. Handig als je minder afhankelijk wilt zijn van weer en wind en graag in vaste omstandigheden traint.

Bekijk locatie

Outdoor vlak bij het strand

Padel Klein Zwitserland

Outdoor trainen in Den Haag, vlak bij het strand. Een fijne locatie als je graag buiten speelt en traint op een plek met een heel eigen sfeer.

Bekijk locatie

Keuzehulp

Welke locatie past het beste bij jou?

Meer zekerheid

Ik wil vooral indoor trainen

Dan is Mariahoeve meestal de meest logische keuze. Je traint daar binnen en hebt meer zekerheid als het regent, waait of kouder wordt.

Outdoor in Den Haag

Ik speel liever buiten vlak bij het strand

Dan past Klein Zwitserland vaak beter. Deze locatie ligt in Den Haag, vlak bij het strand, en voelt heel anders dan een indoor hal.

Sneller starten

Ik wil graag snel kunnen beginnen

Dan is Estate Padelclub in Rijswijk vaak interessant. Daar is vaak meer ruimte in de planning en dat maakt sneller starten vaker mogelijk.

Indoor of outdoor

Indoor of outdoor trainen

Indoor trainen

Indoor padel geeft meer voorspelbaarheid. Je hebt minder last van regen, wind of kou en kunt vaak rustiger werken aan techniek, controle en timing.

Wil je vooral binnen trainen? Dan is Padel Mariahoeve meestal de meest logische keuze.

Outdoor trainen

Outdoor trainen voelt vaak vrijer en heeft een andere sfeer. Je speelt meer in de buitenlucht, zeker op zonnige dagen is dit extra genieten.

Zoek je juist padelbanen in Den Haag waar je buiten speelt, dan passen Klein Zwitserland en Estate Padelclub beter.

Rijswijk is ook een outdoor padellocatie, maar voelt anders dan Klein Zwitserland. Estate Padelclub ligt bijzonder verscholen en heeft vaak meer ruimte in de planning. Dat maakt het een sterke keuze als je buiten wilt trainen op een plek die net even anders voelt.

Den Haag of Rijswijk

Trainen in Den Haag of Rijswijk

Den Haag

Wil je vooral in Den Haag trainen?

Dan kom je meestal uit bij de keuze tussen indoor in Mariahoeve of outdoor bij Klein Zwitserland. Dat hangt vooral af van hoe belangrijk vaste omstandigheden of buiten spelen voor jou zijn.

Rijswijk

Kom je met de auto of fiets?

Dan is Estate Padelclub vaak een logische keuze. Vooral als je uitkomt vanaf Voorburg, Delft, Rijswijk of Den Haag-Zuid kan deze locatie net handiger liggen.

Wil je vooral de locaties in Den Haag bekijken, of juist meer weten over trainen in Rijswijk? Dan vind je via de locatiepagina’s snel de plek die het beste aansluit. Bekijk bijvoorbeeld padellessen in Den Haag of lees meer over trainen in Rijswijk bij Welgelegen.

Veelgestelde vragen

Veelgestelde vragen over padel locaties

Op welke locaties geeft NXT Level padelles?

NXT Level geeft padelles op meerdere locaties in Den Haag en Rijswijk. De belangrijkste locaties zijn Mariahoeve, Klein Zwitserland en Estate Padelclub Rijswijk. Welke locatie het beste past, hangt af van je voorkeur, route, beschikbaarheid en gewenste lesvorm.

Kan ik kiezen tussen indoor en outdoor padel?

Ja, dat kan. Mariahoeve is de indoor route in Den Haag. Klein Zwitserland en Estate Padelclub Rijswijk zijn outdoor locaties. Indoor geeft meer zekerheid bij wisselend weer. Outdoor heeft juist een andere sfeer en voelt vaak vrijer.

Welke locatie past het beste bij beginners?

Dat hangt af van wat prettig voelt. Sommige beginners vinden indoor trainen fijn omdat wind en regen minder invloed hebben. Anderen kiezen liever een locatie die dichterbij is of waar sneller plek is. Als je twijfelt, denken we mee.

Kan ik ook in Rijswijk trainen?

Ja, Estate Padelclub Rijswijk is een belangrijke hoofdlocatie van NXT Level. Deze locatie is vooral praktisch voor spelers uit Rijswijk, Voorburg, Delft en de zuidkant van Den Haag. Vaak zijn er ook goede mogelijkheden om sneller te starten.

Wat is het verschil tussen Mariahoeve, Klein Zwitserland en Rijswijk?

Mariahoeve is indoor en geeft meer zekerheid bij slecht weer. Klein Zwitserland is outdoor in Den Haag, vlak bij het strand. Estate Padelclub Rijswijk is een bijzondere outdoor hoofdlocatie, verscholen in de drukte en vaak praktisch qua beschikbaarheid.

Moet ik zelf kiezen waar ik wil lessen?

Je mag een voorkeur doorgeven, maar je hoeft het niet meteen zeker te weten. Als je twijfelt, kijken we mee welke locatie past bij je woonplaats, beschikbaarheid, lesvorm en gewenste startmoment.

Laatste stap

Welke padel locatie past bij jou?

Geef je voorkeurslocatie en beschikbaarheid door, dan kijken we mee welke locatie en les het beste past.

Zo weet je sneller waar en wanneer je kunt starten.

Padelles aanvragen Padellessen Den Haag bekijken

Welke padel locatie past het beste bij jou?

Op welke locaties kun je trainen?

Estate Padelclub Rijswijk

Padel Mariahoeve

Padel Klein Zwitserland

Welke locatie past het beste bij jou?

Ik wil vooral indoor trainen

Ik speel liever buiten vlak bij het strand

Ik wil graag snel kunnen beginnen

Indoor of outdoor trainen

Indoor trainen

Outdoor trainen

Trainen in Den Haag of Rijswijk

Wil je vooral in Den Haag trainen?

Kom je met de auto of fiets?

Veelgestelde vragen over padel locaties

Welke padel locatie past bij jou?

Contactgegevens

Snel naar