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

Welk padelniveau heb jij?

Complete gids + zelftest

Veel spelers onderschatten óf overschatten hun niveau. Dat is logisch: padel is nieuw, je leert snel én iedereen om je heen speelt anders. Daarom werken we bij NXT Level Padelacademy met vijf duidelijke niveaus, gebaseerd op wat we elke dag zien op de baan in Den Haag.

Daarnaast leggen we uit hoe jouw niveau zich verhoudt tot Playtomic-ratings en de KNLTB padelspeelsterkte.

Zo krijg je precies antwoord op de vraag: Wat is mijn padelniveau?

Waarom je padelniveau belangrijk is

Als je op het juiste niveau traint:

Leer je sneller
Voorkom je verkeerde gewoontes
Speel je met gelijkwaardige mensen
Krijg je meer vertrouwen
Groeit je techniek én spelinzicht

Het maakt padel leuker en uitdagend.

Onze vijf padelniveaus

(met Playtomic & KNLTB vergelijking)

Niveau 1 – Starter

Playtomic 0.0–1.0 • ca. KNLTB 9

Je staat voor het eerst op de baan en alles voelt nog nieuw.

Herken jij dit?

Je hebt nog (bijna) nooit padel gespeeld.
Forehand en backhand voelen onwennig.
Je weet niet altijd waar je moet staan.
Rally’s zijn meestal na een paar slagen voorbij.

Waar je op dit niveau aan werkt

Forehand, backhand en eerste volleys.
Basishouding, grip en rustig bewegen.
Basisbalgevoel: controle over richting en lengte.
Samenwerking met je partner op de baan.

Playtomic: ongeveer 0.0–1.0.

KNLTB (globaal): speelsterkte 9.

Niveau 2 – Basis

Playtomic 1.1–2.0 • ca. KNLTB 8–7

Je basis is er, maar nog niet stabiel in elke situatie.

Herken jij dit?

Je raakt de bal prima, maar timing wisselt.
Je probeert af en toe te smashen, maar het voelt onzeker.
Netspel lukt soms goed, soms juist helemaal niet.
Glasballen gaan soms goed, soms mis je ze volledig.

Waar je op dit niveau aan werkt

Stabielere forehand en backhand.
Smash proberen vanuit een goede voorbereiding.
Netspel verkennen: simpele volleys en positionering.
Eerste glasballen: bal na het glas rustig overnemen.

Playtomic: ongeveer 1.1–2.0.

KNLTB (globaal): speelsterkte rond 8–7.

Niveau 3 – Intermediate

Playtomic 2.1–3.0 • ca. KNLTB 7–6

Je kunt rally’s spelen, maar nog niet altijd onder druk.

Herken jij dit?

Rally’s van 6–10 slagen zijn normaal voor je.
Glas lukt meestal, maar bij hoger tempo sluipen fouten erin.
Samenwerking voelt soms goed, soms rommelig.
Je ziet kansen, maar uitvoering lukt niet altijd op tijd.

Waar je op dit niveau aan werkt

Overheads zoals bandeja en eerste gancho’s.
Betere glascontrole vanuit verdediging én aanval.
Eerste chiquita’s spelen op het juiste moment.
Rust en ritme houden in langere rally’s.

Playtomic: ongeveer 2.1–3.0.

KNLTB (globaal): speelsterkte rond 7–6.

Niveau 4 – Gevorderd

Playtomic 3.1–4.0 • ca. KNLTB 6–5

Je speelt met een plan en leest de baan steeds beter.

Herken jij dit?

Je schakelt gericht tussen verdedigen en aanvallen.
Glas voelt natuurlijk in je spel.
Je voorspelt vaker wat tegenstanders gaan doen.
Fouten komen vooral door keuzes, niet door techniek.

Waar je op dit niveau aan werkt

Comfortabel netspel en punten afmaken aan het net.
Snel schakelen tussen verdediging en aanval.
Bajada vanuit het glas gecontroleerd inzetten.
Tempowissels slim gebruiken om de rally naar jou toe te trekken.

Playtomic: ongeveer 3.1–4.0.

KNLTB (globaal): speelsterkte rond 6–5.

Niveau 5 – Competitief / Wedstrijd

Playtomic 4.1–5.0 • ca. KNLTB 5–4

Je speelt competitie of toernooien en zoekt de volgende stap.

Herken jij dit?

Je hebt per wedstrijd een duidelijk speelplan.
Samenwerking met je partner voelt vanzelfsprekend.
Je wisselt bewust tussen druk zetten en vertragen.
Je herkent snel zwakke punten van tegenstanders.

Waar je op dit niveau aan werkt

Meerdere strategieën en patronen per tegenstander.
Variatie in overheads (bandeja, vibora, smash).
Wedstrijdsituaties en puntpatronen trainen.
Mentale keuzes op belangrijke momenten.

Playtomic: ongeveer 4.1–5.0.

KNLTB (globaal): hogere competitie, rond 5–4.

Overzicht padelniveau's

Padelniveaus – globale richtlijn

Niveau	Omschrijving	Playtomic (±)	KNLTB (±)	Technische focus (kernslagen)
1	Starter	0.0 – 1.0	9	Forehand, backhand, eerste volleys, basisbalgevoel.
2	Basis	1.1 – 2.0	8 – 7	Smash proberen, netspel verkennen, eerste glasballen.
3	Intermediate	2.1 – 3.0	7 – 6	Overheads (bandeja/gancho), betere glascontrole, eerste chiquita’s.
4	Gevorderd	3.1 – 4.0	6 – 5	Comfortabel netspel, schakelen aanval/verdediging, bajada.
5	Competitief / Wedstrijd	4.1 – 5.0	5 – 4	Meerdere strategieën, variatie in overheads, vibora om punten af te maken.

Welk padelniveau heb ik? Ontdek het hier.

Complete gids + zelftest

Twijfel je of je een beginner, intermediate of al een gevorderde padelspeler bent? Op deze pagina helpen we je in een paar minuten jouw padelniveau te bepalen -met duidelijke voorbeelden, herkenbare situaties én een koppeling met Playtomic-niveaus en KNLTB-speelsterktes.

Of je nu voor het eerst op de baan staat, al competitie speelt of eindelijk die stap naar gevorderd wilt zetten: hier ontdek je precies waar je staat én wat je volgende stap is.

Waarom je padelniveau bepalen belangrijk is

Veel spelers voelen dat ze “ergens tussen beginner en intermediate” zitten. Maar wist je dat het kennen van jouw padelniveau enorm helpt bij:

het vinden van trainingspartners die écht bij je passen
het kiezen van de juiste lessen (beginners, intermediate, gevorderd)
het boeken van Playtomic-wedstrijden op jouw niveau
het veel sneller ervaren van progressie
het voorkomen van frustratie tijdens rally’s of bij het glas

Bij NXT Level Padelacademy gebruiken we een helder en eerlijk 5-niveausysteem, zodat jij precies weet:

waar je nu staat,
wat je nog mist,
en hoe je gericht kunt groeien.

De vijf padelniveaus bij NXT Level

Hieronder zie je de vijf padelniveaus die we gebruiken bij NXT Level Padelacademy. De omschrijvingen helpen je om jouw huidige niveau te herkennen en te zien wat jouw logische volgende stap is.

Niveau 1 – Starter

Playtomic 0.0–1.0 • KNLTB 9

Je ontdekt padel. Alles is nieuw: grip, voetenwerk, timing en het glas.

Je hoort hier als je

pas net begonnen bent met padel;
voornamelijk bezig bent met de bal raken;
nog zoekt naar waar je moet staan;
korte rally’s speelt en snel fouten maakt.

Jouw volgende stap

basiscontrole in forehand en backhand;
rust in je beweging en voetenwerk;
eerste volleys en simpele netposities;
vertrouwen opbouwen in je slag.

Playtomic-indicatie: 0.0–1.0 • KNLTB-indicatie: 9.

Niveau 2 – Basis

Playtomic 1.1–2.0 • KNLTB 8–7

Je basis is er, maar nog niet stabiel in elke situatie of op hoger tempo.

Je hoort hier als je

al wat vaker speelt, maar nog wisselvallig bent;
glasballen soms goed, soms slecht raakt;
smash en overheads probeert, maar onzeker voelt;
zowel goede als heel rommelige rally’s hebt.

Jouw volgende stap

stabieler slaan met meer controle;
betere timing bij smash en overheads;
rust in netspel en positionering;
glasballen bewust en gecontroleerd spelen.

Playtomic-indicatie: 1.1–2.0 • KNLTB-indicatie: 8–7.

Niveau 3 – Intermediate

Playtomic 2.1–3.0 • KNLTB 7–6

Je kunt rally’s spelen en het glas gebruiken, maar onder druk sluipen fouten erin.

Je hoort hier als je

regelmatig rally’s van 6–10 slagen speelt;
het glas meestal goed inschat, behalve op hoog tempo;
samenwerking met je partner nog wisselend voelt;
kansen ziet, maar timing en uitvoering niet altijd kloppen.

Jouw volgende stap

bandeja, bajada en eerste chiquita’s verbeteren;
verdedigen en aanvallen beter scheiden;
bewustere keuzes maken in langere rally’s;
meer structuur in patronen en spelopbouw.

Playtomic-indicatie: 2.1–3.0 • KNLTB-indicatie: 7–6.

Niveau 4 – Gevorderd

Playtomic 3.1–4.0 • KNLTB 6–5

Je speelt met een plan, leest situaties beter en gebruikt het glas in je voordeel.

Je hoort hier als je

bewust schakelt tussen verdedigen en aanvallen;
het glas als vast onderdeel van je tactiek ziet;
de bewegingen van tegenstanders leert lezen;
fouten vooral maakt door beslissingen, niet door techniek.

Jouw volgende stap

punten efficiënt afmaken aan het net;
bajada’s en overheads variëren;
tempowissels inzetten om de rally te controleren;
vaste patronen ontwikkelen met je partner.

Playtomic-indicatie: 3.1–4.0 • KNLTB-indicatie: 6–5.

Niveau 5 – Competitief / Wedstrijd

Playtomic 4.1–5.0 • KNLTB 5–4

Je speelt competitie of toernooien en denkt in patronen, strategie en details.

Je hoort hier als je

met een duidelijk wedstrijdplan de baan op stapt;
sterk teamwork en communicatie hebt met je partner;
bewust druk zet of juist vertraagt waar nodig;
zwakke punten van tegenstanders snel herkent.

Jouw volgende stap

verschillende strategieën per type tegenstander;
variatie in bandeja, vibora en smash;
wedstrijdsituaties en puntpatronen verfijnen;
mentale scherpte op belangrijke momenten.

Playtomic-indicatie: 4.1–5.0 • KNLTB-indicatie: 5–4.

Welk padelniveau heb jij?

Complete gids + zelftest

Waarom je padelniveau belangrijk is

Onze vijf padelniveaus

(met Playtomic & KNLTB vergelijking)

Niveau 1 – Starter

Niveau 2 – Basis

Niveau 3 – Intermediate

Niveau 4 – Gevorderd

Niveau 5 – Competitief / Wedstrijd

Overzicht padelniveau's

Wat is jouw padelniveau?

Zelftest: wat is jouw padelniveau?

Welk padelniveau heb ik? Ontdek het hier.

Complete gids + zelftest

Waarom je padelniveau bepalen belangrijk is

De vijf padelniveaus bij NXT Level

Niveau 1 – Starter

Niveau 2 – Basis

Niveau 3 – Intermediate

Niveau 4 – Gevorderd

Niveau 5 – Competitief / Wedstrijd

Contactgegevens

Snel naar