BruCart – A Demo E-commerce Site

/* ======================================== MOBILE ONLY STYLES add and modify varibales for mobile breakpoint ========================================= */ html.dwc-mobile { --mobile-menu-width: min(450px, 100%); --menu-item-font-size: 18px; --dropdown-item-font-size: var(--menu-item-font-size); --back-text-font-size: 16px; --menu-item-hover-border-bg: initial; } /* ======================================= GENERAL NAV STYLES ========================================= */ :root { /* ======================== GENERAL COLORS/BACKGROUND ======================== */ --primary-clr: orangered; --header-bg: white; --dropdown-content-bg: white; --mobile-menu-bg: var(--header-bg); --mobile-menu-topbar-bg: var(--header-bg); /* =============================== GENERAL WIDTH | HEIGHT | SPACINGS ================================== */ --mobile-menu-width: min(300px, 100%); /* mobile & offcanvas */ --multilevel-dropdown-width: 200px; --dropdown-content-gap: 0px; /* gap between header and dropdown, add unit (e.g. 0px) */ --header-min-height: 60px; --fullscreen-mobile-menu-top-height: 60px; --top-offset: 40px; /* when nav is below header */ --dropdown-content-default-width: 1120px; /* preview width & default width for dropdown content */ --header-inline-padding: clamp(1.5rem, calc(0.625vw + 1.375rem), 1.875rem); /* ============================================== GENERAL BORDERS | SHADOWS | OVERLAY BACKDROP ================================================= */ /* dropdown content */ --dropdown-content-border-radius: 0px; --dropdown-content-shadow: 0px 5px 15px -10px rgb(0 0 0 / 0%); --dropdown-content-border-size: 1px; /* at least 1px */ --dropdown-content-border-color: var(--dropdown-content-bg); /* overlay backdrop */ --nav-overlay-backdrop-blur: 0px; --nav-overlay-backdrop-clr: rgba(0, 0, 0, 0.3); /* sidebar nav */ --sidebar-shadow: 0px 0px 2px rgba(0, 0, 0, 0.7); /* radius for special mobile style on overlay header*/ --mobile-menu-radius: var(--overlay-header-radius); /* mobile & offcanvas */ --slide-out-speed: 1.3; /* =============================== MENU TOGGLE - Hamburger (additional settings at line 202) ================================== */ --menu-toggle-clr: var(--menu-item-clr); --menu-close-toggle-clr: var(--menu-item-clr); --menu-toggle-hover-clr: var(--menu-item-hover-clr); --open-icon-size: 40px; /* menu toggle size*/ /* ======================== MENU ITEMS ======================== */ /* DEFAULT STATE */ --menu-item-clr: #000; --menu-item-font-size: 14px; --menu-item-font-weight: 500; --menu-item-bg: initial; /* HOVER STATE */ --menu-item-hover-clr: var(--primary-clr); --menu-item-hover-bg: initial; --menu-item-hover-border-bg: var(--menu-item-active-border-bg); --menu-item-hover-border-height: var(--menu-item-active-border-height); /* ACTIVE STATE (to exclude a link from this style, add .dwc-exclude to its container)*/ --menu-item-active-clr: var(--menu-item-hover-clr); --menu-item-active-bg: initial; --menu-item-active-border-bg: var(--primary-clr); --menu-item-active-border-height: 2px; /* PADDING | GAP */ --menu-item-inline-padding: 1.1rem; --menu-item-block-padding: 1rem; --menu-items-gap: 0; /* BORDERS | RADIUS */ --menu-item-border: 1px solid rgba(0, 0, 0, 0.1); --menu-item-radius: 0; /* CHEVRON (dropdown arrow) */ --chevron-size: 14px; --chevron-clr: var(--menu-item-clr); --chevron-hover-clr: var(--menu-item-hover-clr); /* ======================== MULTILEVEL DROPDOWN LINKS ======================== */ /* DEFAULT STATE */ --dropdown-item-clr: var(--menu-item-clr); --dropdown-item-font-size: var(--menu-item-font-size); --dropdown-item-bg: initial; --dropdown-indent-bg: rgb(0 0 0 / 5%); --dropdown-heading-clr: var(--primary-clr); /* HOVER STATE */ --dropdown-item-hover-clr: var(--menu-item-hover-clr); --dropdown-item-hover-bg: white; /* EXPANDED STATE (PARENT) - mobile */ /* when [data-submenu-reveal="expand"] */ --dropdown-expanded-clr: white; --dropdown-expanded-bg: black; /* PADDING | GAP | INDENT */ --dropdown-item-inline-padding: var(--menu-item-inline-padding); --dropdown-item-block-padding: var(--menu-item-block-padding); --dropdown-indent: 0.6rem; --dropdown-indent-item-pad-offset: 0.5; --dropdown-indent-line: solid 1px rgb(0 0 0 / 25%); /* RADIUS */ --dropdown-item-radius: var(--dropdown-content-border-radius); /* OTHERS */ --dropdown-inactive-overlay: rgb(0 0 0 / 10%); /* ======================== MENU CTA BUTTON (ALL BUTTONS) ======================== */ /* all cta buttons max width on mobile */ --cta-width: 100%; /* gap offset between 2 or 3 cta buttons on mobile/offcanvas/sidebar*/ --cta-gap-offset: 0; /* gap between breakout cta and menu toggle on mobile */ --cta-breakout-gap: 20px; /* ======================== MENU CTA BUTTON (LAST BUTTON) ======================== */ /* DEFAULT STATE */ --menu-cta-clr: white; --menu-cta-bg: black; --menu-cta-inline-padding: calc(var(--menu-item-inline-padding) * 1.3); --menu-cta-block-padding: var(--menu-item-block-padding); --menu-cta-border: none; --menu-cta-radius: 0em; /* HOVER STATE */ --menu-cta-hover-clr: white; --menu-cta-hover-bg: var(--primary-clr); /* ======================== MENU CTA BUTTON (SECOND BUTTON) ======================== */ /* DEFAULT STATE */ --menu-cta-2-clr: white; --menu-cta-2-bg: black; --menu-cta-2-inline-padding: var(--menu-cta-inline-padding); --menu-cta-2-block-padding: var(--menu-cta-block-padding); --menu-cta-2-border: var(--menu-cta-border); --menu-cta-2-radius: var(--menu-cta-radius); /* HOVER STATE */ --menu-cta-2-hover-clr: white; --menu-cta-2-hover-bg: var(--primary-clr); /* ======================== MENU CTA BUTTON (THIRD BUTTON) ======================== */ /* DEFAULT STATE */ --menu-cta-3-clr: white; --menu-cta-3-bg: black; --menu-cta-3-inline-padding: var(--menu-cta-inline-padding); --menu-cta-3-block-padding: var(--menu-cta-block-padding); --menu-cta-3-border: var(--menu-cta-border); --menu-cta-3-radius: var(--menu-cta-radius); /* HOVER STATE */ --menu-cta-3-hover-clr: white; --menu-cta-3-hover-bg: var(--primary-clr); /* ======================== MENU TOGGLE - Hamburger additional settings ======================== */ --open-icon-align: 0; /* 0 = right | auto = left */ --open-icon-horizontal-offset: 0px; /* nudge icon left or right from edge of screen*/ --open-icon-close-offset: 1.2; /* nudge icon left or right when close icon is active */ /* ====================================== ADAPTIVE HEIGHT/ STRIPE BG COLOR/BORDER ========================================= */ --adaptive-height-bg: var(--dropdown-content-bg); /*also controls stripe background*/ --adaptive-height-border: 1px solid #fff; --adaptive-height-shadow: 0 0 30px rgb(39 50 59 / 10%); /* ======================== STRIPE - when [data-optimize-stripe="true"] ======================== */ --stripe-border-radius: 10px; /* ======================== MOBILE/OFFCANVAS MENU ======================== */ --mobile-menu-ttf: cubic-bezier(0.8, 0.07, 0.2, 0.95); /* Transition timing function */ /* ================= OVERLAY HEADER ================== */ --overlay-header-width: 1400px; --overlay-header-inset: 1rem; --overlay-header-bg: rgb(255 255 255 / 100%); --overlay-header-bg-active: rgb(255 255 255 / 100%); --overlay-header-blur: 10px; --overlay-header-radius: 1rem; --overlay-header-shadow: 0px 2px 20px rgb(0 0 0 / 20%); --overlay-offset-padding: clamp(5rem, 1.875rem + 12.5vw, 11.25rem); /* ======================== BACK TEXT ======================== */ --back-text-clr: var(--menu-item-clr); --back-text-font-size: 12px; --back-text-font-weight: 600; --back-text-transform: uppercase; --back-text-bg: var(--mobile-menu-topbar-bg); /* ======================== SIDEBAR NAV - OVERLAY MODE ======================== */ --overlay-sidebar-radius: 1rem; --overlay-sidebar-bg: rgb(255 255 255 / 80%); --overlay-sidebar-shadow: 0 0 30px rgb(39 50 59 / 10%); --overlay-sidebar-inset: 12px; /* ======== DO NOT EDIT THIS VARIABLES! ======== */ --open-icon-line-height: calc(var(--open-icon-size) * 0.1); --icon-line-gap: calc(var(--open-icon-size) * 0.25); --open-icon-line-variance: calc(var(--open-icon-size) * 0.25); --iw: calc(var(--open-icon-size) - var(--open-icon-line-variance)); --aw: calc(var(--iw) - var(--open-icon-line-variance)); --caret-size: calc(var(--dropdown-content-gap) + var(--dropdown-content-border-size)); --dropdown-content-border: solid var(--dropdown-content-border-color) var(--dropdown-content-border-size); } /* SIDEBAR BACK TEXT BAR HEIGHT WHEN BACK TEXT OVERLAYS LOGO */ #brx-header:has([data-sidebar-back-text-on-logo="true"]) { --top-offset: var(--mobile-menu-top-height); } /* ======================== STICKY HEADER STYLES add variables to modify for sticky header ======================== */ .brx-sticky.scrolling { /* add your sticky styles variable here */ } /* ======================== DROPDOWN ITEM IS BUTTON OR ICON ======================== */ [data-is-button]>.brx-submenu-toggle { --menu-item-bg: black; --menu-item-clr: white; --menu-item-hover-clr: white; --menu-item-hover-bg: black; --menu-item-radius: 50vw; --menu-item-hover-border-height: 0; --chevron-size: 0; --chevron-color: white; --menu-item-inline-padding: 1.5rem; --menu-item-block-padding: 1rem; /* mobile only*/ --menu-item-width: 200px; --menu-item-border: solid 1px transparent; --menu-item-hover-border: solid 1px transparent; } [data-is-icon]>.brx-submenu-toggle { --menu-item-bg: black; --menu-item-clr: white; --menu-item-hover-clr: white; --menu-item-hover-bg: black; --icon-clr: white; --icon-hover-clr: white; --icon-size: 14px; --menu-item-inline-padding: 1.1rem; --button-max-diameter: 45px; --menu-item-radius: 50vw; --menu-item-border: solid 1px transparent; --menu-item-hover-border: solid 1px transparent; } /* ========== NAV STYLES END ============== */ /* ======= STICKY HEADER WITH OVERLAY SPECIAL STYLES ===== */ /*===== this styles only apply when the header div attribute [data-sticky-overlay-special-style] attribute is set to true, and sticky header is enabled =====*/ /* SVG STYLES BEFORE SCROLLING - REVERTS TO INITIAL VALUES WHEN DROPDOWN IS OPEN */ html:not(.dwc-mobile):has([data-sticky-overlay-special-style="true"]) .bricks-is-frontend .brx-sticky:not(.scrolling) .dwc-nest-header:not(:has(.brxe-dropdown.open, .brx-nav-nested-items > li:hover)) :is(path, .cls-1):not(:is(.brx-submenu-toggle path)) { fill: white; } /* BRICKS SEARCH ICON STYLES BEFORE SCROLLING - REVERTS TO INITIAL VALUES WHEN DROPDOWN IS OPEN */ html:not(.dwc-mobile):has([data-sticky-overlay-special-style="true"]) .bricks-is-frontend .brx-sticky:not(.scrolling) .dwc-nest-header:not(:has(.brxe-dropdown.open, .brx-nav-nested-items > li:hover)) :is(.brxe-search path,.brxe-search circle) { stroke: white; } /* STYLES BEFORE SCROLLING - REVERTS TO INITIAL VALUES WHEN DROPDOWN IS OPEN */ html:not(.dwc-mobile):has([data-sticky-overlay-special-style="true"]) .bricks-is-frontend .brx-sticky:not(.scrolling) .dwc-nest-header:not(:has(.brxe-dropdown.open, .brx-nav-nested-items > li:hover)) { --menu-item-clr: white; --chevron-clr: white; --menu-item-hover-clr: white; --menu-item-hover-border-bg: white; --overlay-header-bg: transparent; --header-bg: transparent; --overlay-header-shadow: none; } /* STYLES BEFORE SCROLLING */ html:not(.dwc-mobile):has([data-sticky-overlay-special-style="true"]) .bricks-is-frontend .brx-sticky:not(.scrolling) { --link-transition: 0s; --transition: 0.2s; } /* STYLES WHEN SCROLLING */ html:not(.dwc-mobile):has([data-sticky-overlay-special-style="true"]) .bricks-is-frontend .brx-sticky.scrolling { --overlay-header-bg: white; --header-bg: white; } /* STYLES WHEN SCROLLING :HOVER*/ html:not(.dwc-mobile):has([data-sticky-overlay-special-style="true"]) .bricks-is-frontend .brx-sticky.scrolling .dwc-nest-header:has(.brxe-dropdown.open) { /* add and update variable here */ } /* DEFAULT STYLES FOR OVERLAY HEADER */ html:not(.dwc-mobile):has([data-sticky-overlay-special-style="true"]) .bricks-is-frontend .brx-sticky { --menu-item-hover-bg: initial; --menu-item-bg: initial; --overlay-header-inset: 0; --overlay-header-width: 100%; --overlay-header-radius: 0; } /* RESET STICKY HEADER TRANSITION*/ html:not(.dwc-mobile):has([data-sticky-overlay-special-style="true"]) .bricks-is-frontend #brx-header.brx-sticky .dwc-nest-header { transition: var(--transition); } /* ======= END STICKY HEADER WITH OVERLAY SPECIAL STYLES ===== */ /* ======== CHANGE postid-xxxx TO THIS TEMPLATE'S ID ========= */ /*hide sidebar in builder */ :is(.brx-header-left, .brx-header-right)[data-builder-window] #brx-header:not(.postid-23338 *, :has(.dwc-sidebar) *) { display: none !important; } [data-builder-window] #brx-header:has([data-offcanvas="true"]):not(.postid-23338 *, :has(.dwc-sidebar) *) :is(.dwc-nav-wrapper, .dwc-nest-menu) { display: none !important; } :is(.brx-header-left, .brx-header-right)[data-builder-window] :is(#brx-content, #brx-footer):not(.postid-23338 *, :has(.dwc-sidebar) *) { margin: unset !important; } [data-builder-mode]:is(.brx-header-left, .brx-header-right).postid-23338::before { display: none }

const MegaMenuCONFIG = { // Minimum width threshold for desktop behavior, // should be 1px larger than mobile (max-width) breakpoint in the "MEDIA QUERY" CSS code block //IMPORTANT: Also change min-width in the "MEGA MENU Codes" CSS code block to match this value minWidth: 1201, // automatically open the current menu panel/dropdown (mobile, offcanvas & sidebar) menuAutoExpansion: true, swipeToClose: true, // show or hide swipe to close hint toolTip: true, // adaptive height animation adaptiveHeight: 0, // Stripe menu animation stripeStyle: 0, headerSelector: '#brx-header', nestMenuSelector: '.dwc-nest-menu', closeNavOnClick: 1, closeOnHashClickOnly: 0, closeOnMobileOnly: 0, // Set to false to enable close on both mobile and desktop // Selectors (e.g. .class-name, #id_name, tag-name, .complex > selectors etc.) that should NOT close the navigation when clicked // Separate multiple selectors with a comma e.g. '.class-one, #id_one, tag' closeNavOnClickExclude: '.js-wpml-ls-item-toggle', breakinToNavList: 1, /*mobile only - places the breakin container as an li isnide the nav list (see docs for more info) */ // New properties for dropdown positioning shiftFactor: 1, // Factor to shift overflow minOverflow: 10, // Minimum overflow threshold reinitializeOnURLchange: true, //when using page transition API //move backdrop overlay element Inside header //placing it inside header will allow backdrop overlay/blur to affect header, but won't work when data-overlay-header is enabled. overlayInsideHeader:0 }; // Centered Logo Configuration const CenteredLogoCONFIG = { enable: 0, centerGuide: 1, forceCenteredLogo: 1, // move the navigation left // or right using negative or positive value centerNudge: 0, // allow centered logo when no. of // menu items are odd e.g. 5 or 7 allowOddItems: 1, // place logo 'before' or 'after' the odd menu item roundOffFactor: 'before' };

/* DO NOT ADD ANY CODE IN THIS CODE BLOCK */ /*MOBILE MENU/OFFCANVAS/SIDEBAR STYLES*/ @media only screen and (max-width: 1200px) { .bricks-is-frontend .dwc-nav-wrapper:not(.show-nav .dwc-nav-wrapper){ display: none; } [data-breakinto].dwc-tabbed-nav-container:not(.brxe-dropdown .dwc-tabbed-nav-container){ display: none; } .desktop-centered header:has([data-fix-centered-logo-fouc="true"]) { opacity: 0; } .dwc-nest-menu__logo[data-breakout-link] { margin-inline-end: auto } /*mobile logo*/ .dwc-nest-menu__mobile-logo> :is(svg, img) { block-size: 100%; inline-size: auto; } .dwc-nest-menu__mobile-logo:not([data-show-mobile-logo="true"] .dwc-nest-menu__mobile-logo) { display: none; } [data-sidebar-back-text-on-logo="true"] .dwc-nest-menu__mobile-logo { --dwc-nest-header-height: var(--mobile-menu-top-height); } /*special mobile menu styles for overlay header UPDATED */ .dwc-mobile .bricks-is-frontend [data-overlay-header-mobile="true"] .dwc-nest-menu[data-slide-in-direction="top"][data-match-overlay-header-width="true"] .brx-nav-nested-items { transform: translateY(-100%); } .dwc-mobile .bricks-is-frontend [data-overlay-header-mobile="true"] .dwc-nest-menu[data-slide-in-direction="top"][data-match-overlay-header-width="true"].brx-open .brx-nav-nested-items { transform: translateY(0%); } /* .dwc-mobile .bricks-is-frontend [data-overlay-header-mobile="true"] .dwc-nest-menu[data-slide-in-direction="top"][data-match-overlay-header-width="true"] .brx-nav-nested-items { transition: 0.45s; transition-timing-function: var(--mobile-menu-ttf); inset-block-start: calc(min(var(--overlay-header-radius), 2em) * -1); } */ .dwc-mobile .bricks-is-frontend [data-overlay-header-mobile="true"] .dwc-nest-menu[data-slide-in-direction="top"][data-match-overlay-header-width="true"] .brx-nav-nested-items { transition: 0.45s; transition-timing-function: var(--mobile-menu-ttf); inset-block-start: calc(var(--dwc-nest-header-height) * -1); } .dwc-mobile .bricks-is-frontend [data-overlay-header-mobile="true"] .dwc-nest-menu[data-slide-in-direction="top"][data-submenu-reveal="expand"][data-match-overlay-header-width="true"] .brx-nav-nested-items { /* inset-block-start: calc(var(--dwc-nest-header-height) / -2); */ /* inset-block-start: -40px;*/ } /* .dwc-mobile [data-overlay-header-mobile="true"] .dwc-nest-menu[data-slide-in-direction="top"][data-match-overlay-header-width="true"] .brx-nav-nested-items { --mobile-menu-width: 100% !important; inline-size: var(--mobile-menu-width); border-bottom-left-radius: min(var(--mobile-menu-radius), 2em); border-bottom-right-radius: min(var(--mobile-menu-radius), 2em); padding-block-start: 40px; overflow-x: hidden; } */ .dwc-mobile [data-overlay-header-mobile="true"] .dwc-nest-menu[data-slide-in-direction="top"][data-match-overlay-header-width="true"] .brx-nav-nested-items { --mobile-menu-width: 100% !important; inline-size: var(--mobile-menu-width); border-bottom-left-radius: min(var(--mobile-menu-radius), 2em); border-bottom-right-radius: min(var(--mobile-menu-radius), 2em); padding-block-start: calc(var(--dwc-nest-header-height) + 0px); overflow-x: hidden; } .dwc-mobile [data-overlay-header-mobile="true"] .dwc-nest-menu[data-slide-in-direction="top"][data-match-overlay-header-width="true"]:not([data-submenu-reveal="expand"]) .brx-nav-nested-items { overflow-y:hidden; } .dwc-mobile [data-overlay-header-mobile="true"] .dwc-nest-menu[data-slide-in-direction="top"][data-match-overlay-header-width="true"][data-submenu-reveal="expand"] .brx-nav-nested-items { max-block-size: fit-content; } .dwc-mobile .bricks-is-frontend [data-overlay-header-mobile="true"] .dwc-nest-menu[data-slide-in-direction="top"][data-match-overlay-header-width="true"] .dwc-nav-wrapper { transform: translateY(0%); border-radius: min(var(--overlay-header-radius), 2em); overflow: hidden !important; inset-block-start: var(--overlay-header-inset); } .dwc-mobile .bricks-is-frontend [data-overlay-header-mobile="true"] .dwc-nest-menu[data-slide-in-direction="top"][data-match-overlay-header-width="true"].brx-open .dwc-nav-wrapper { transform: translateY(0%); } .dwc-mobile .bricks-is-frontend [data-overlay-header-mobile="true"] .dwc-nest-menu[data-slide-in-direction="top"][data-match-overlay-header-width="true"] :is(.dwc-nav-wrapper) { --mobile-menu-width: min(calc(100% - (var(--overlay-header-inset) * 2)), 100%) !important; inline-size: var(--mobile-menu-width) !important; inset-inline-end: var(--overlay-header-inset) !important; block-size: calc(100dvb - (var(--overlay-header-inset) * 2)); } .dwc-mobile [data-overlay-header-mobile="true"] .dwc-nest-menu.brxe-nav-nested[data-slide-in-direction="top"][data-match-overlay-header-width="true"] .brxe-dropdown:not(.open) .brx-dropdown-content:not([data-builder-mode] .brx-dropdown-content) { min-block-size: 0; } .dwc-mobile [data-overlay-header-mobile="true"].dwc-nest-header:has(.dwc-nest-menu[data-slide-in-direction="top"][data-match-overlay-header-width="true"]) { padding-inline: initial } .dwc-mobile [data-overlay-header-mobile="true"] .dwc-nest-menu[data-slide-in-direction="top"][data-match-overlay-header-width="true"] .dwc-nest-menu-top { border-block-end: initial; min-block-size: var(--dwc-header-div-height); } /* .dwc-mobile [data-overlay-header-mobile="true"] .dwc-nest-menu[data-slide-in-direction="top"][data-match-overlay-header-width="true"][data-submenu-reveal="slide"] .brx-has-megamenu.brxe-dropdown .brx-dropdown-content:not([data-hide-close-bar="true"] ul, [data-submenu-reveal="expand"].brx-has-megamenu ul, :has(.dwc-tabbed-nav-list__li.active)) { inset-block-start: min(calc(var(--overlay-header-radius) + var(--wp-admin--admin-bar--height, 0px)), calc(2em + var(--wp-admin--admin-bar--height, 0px))) !important; padding-block-start: 50px; } */ .dwc-mobile [data-overlay-header-mobile="true"] .dwc-nest-menu[data-slide-in-direction="top"][data-match-overlay-header-width="true"][data-submenu-reveal="slide"] .brx-has-megamenu.brxe-dropdown .brx-dropdown-content:not([data-hide-close-bar="true"] ul, [data-submenu-reveal="expand"].brx-has-megamenu ul, :has(.dwc-tabbed-nav-list__li.active)) { inset-block-start: calc(var(--dwc-nest-header-height) + var(--wp-admin--admin-bar--height, 0px)) !important; padding-block-start: 50px; } .dwc-mobile [data-overlay-header-mobile="true"] .dwc-nest-menu[data-slide-in-direction="top"][data-match-overlay-header-width="true"][data-submenu-reveal="slide"] .brxe-dropdown:not(.brx-has-megamenu, [data-submenu-reveal="expand"]) .brx-dropdown-content:not([data-hide-close-bar="true"] ul, :has(.dwc-tabbed-nav-list__li.active)), .bricks-is-frontend [data-submenu-reveal="slide"].brxe-dropdown .brx-dropdown-content:not([data-hide-close-bar="true"] ul, :has(.dwc-tabbed-nav-list__li.active)) { inset-block-start: calc(var(--dwc-nest-header-height) + var(--wp-admin--admin-bar--height, 0px)) !important; padding-block-start: 50px; } /* .dwc-mobile [data-overlay-header-mobile="true"] .dwc-nest-menu[data-slide-in-direction="top"][data-match-overlay-header-width="true"][data-submenu-reveal="slide"] .brxe-dropdown:not(.brx-has-megamenu, [data-submenu-reveal="expand"]) .brx-dropdown-content:not([data-hide-close-bar="true"] ul, :has(.dwc-tabbed-nav-list__li.active)), .bricks-is-frontend [data-submenu-reveal="slide"].brxe-dropdown .brx-dropdown-content:not([data-hide-close-bar="true"] ul, :has(.dwc-tabbed-nav-list__li.active)) { inset-block-start: min(calc(var(--overlay-header-radius) + var(--wp-admin--admin-bar--height, 0px)), calc(2em + var(--wp-admin--admin-bar--height, 0px))) !important; padding-block-start: 50px; } */ .bricks-is-frontend [data-overlay-header-mobile="true"] .dwc-nest-menu[data-slide-in-direction="top"][data-match-overlay-header-width="true"][data-submenu-reveal="slide"] .open.active>.brx-submenu-toggle button:not([data-hide-close-bar="true"] button, [data-submenu-reveal="expand"] button), .bricks-is-frontend [data-submenu-reveal="slide"].open.active>.brx-submenu-toggle button:not([data-hide-close-bar="true"] button, [data-submenu-reveal="expand"] button) { inset-block-start: calc(max(var(--dwc-nest-header-height) - var(--dwc-header-div-height), var(--dwc-header-div-height))); } /* .dwc-mobile [data-overlay-header-mobile="true"] .dwc-nest-menu[data-submenu-reveal="slide"][data-slide-in-direction="top"][data-match-overlay-header-width="true"] .open.active>.brx-submenu-toggle>button:not([data-hide-close-bar="true"] button, [data-submenu-reveal="expand"] button, .open.active:has(.open.active)>.brx-submenu-toggle > button) { z-index: 9999; min-inline-size: 100%; min-block-size: 50px; inset-block-start: min(calc(var(--overlay-header-radius) + var(--wp-admin--admin-bar--height, 0px)), calc(2em + var(--wp-admin--admin-bar--height, 0px))); } */ .dwc-mobile [data-overlay-header-mobile="true"] .dwc-nest-menu[data-submenu-reveal="slide"][data-slide-in-direction="top"][data-match-overlay-header-width="true"] .open.active>.brx-submenu-toggle>button:not([data-hide-close-bar="true"] button, [data-submenu-reveal="expand"] button, .open.active:has(.open.active)>.brx-submenu-toggle > button) { z-index: 9999; min-inline-size: 100%; min-block-size: 50px; inset-block-start: calc(var(--dwc-nest-header-height) + var(--wp-admin--admin-bar--height, 0px)) !important; } .dwc-mobile [data-overlay-header-mobile="true"] .dwc-nest-menu[data-submenu-reveal="slide"][data-slide-in-direction="top"][data-match-overlay-header-width="true"] .open.active>.brx-submenu-toggle>button:not([data-submenu-reveal="expand"] button) { inset-block-start: calc(var(--dwc-nest-header-height) + var(--wp-admin--admin-bar--height, 0px)) !important; } .dwc-mobile [data-overlay-header-mobile="true"] .dwc-nest-menu[data-slide-in-direction="top"][data-match-overlay-header-width="true"][data-submenu-reveal="slide"] .brxe-dropdown:not(:is([data-submenu-reveal="expand"], .brx-has-megamenu)) .brx-dropdown-content:not([data-submenu-reveal="expand"] *), .bricks-is-frontend [data-submenu-reveal="slide"].brxe-dropdown:not(.brx-has-megamenu) .brx-dropdown-content { min-block-size: 100%; } .dwc-mobile [data-overlay-header-mobile="true"] .dwc-nest-menu[data-slide-in-direction="top"][data-match-overlay-header-width="true"] .brxe-dropdown:not(.brx-has-megamenu) .brx-dropdown-content{ min-inline-size: 0px !important; } .dwc-mobile .bricks-is-frontend [data-overlay-header-mobile="true"] .dwc-nest-menu[data-slide-in-direction="top"][data-match-overlay-header-width="true"][data-submenu-reveal="slide"] .brxe-dropdown.brx-has-megamenu:not(:is([data-submenu-reveal="expand"])) .brx-dropdown-content:not([data-submenu-reveal="expand"] .brx-dropdown-content)>li { padding-block-end: 40px; } .dwc-mobile .dwc-nest-header[data-overlay-header-mobile="true"]>div { padding-inline: var(--menu-item-inline-padding); border-radius: var(--overlay-header-radius); } /* special style UPDATED ends*/ /* .dwc-nest-menu .brx-nav-nested-items { inline-size: var(--mobile-menu-width); } */ /* unset default values */ [data-offcanvas="true"] .open:has(.open) .brx-dropdown-content::before { display: none !important; } [data-offcanvas="true"] .brx-nav-nested-items { flex-wrap: nowrap; } .dwc-nest-menu .brx-nav-nested-items { gap: 0; } .dwc-nest-menu.brxe-nav-nested .brxe-dropdown:not(.open) .brx-dropdown-content:not([data-builder-mode] .brx-dropdown-content) { display: flex; visibility: hidden; } [data-overlay-header="true"] .dwc-nest-menu.brxe-nav-nested .brxe-dropdown:not(.open) .brx-dropdown-content:not([data-builder-mode] .brx-dropdown-content), .dwc-nest-menu.brxe-nav-nested .brxe-dropdown:not(.open) .brx-dropdown-content:not([data-builder-mode] .brx-dropdown-content) { min-inline-size: 0 !important; } .dwc-nest-menu.brxe-nav-nested.brx-open .brxe-dropdown>.brx-dropdown-content { overflow-y: auto; } .dwc-nest-menu .brx-nav-nested-items { flex-direction: column !important; flex-wrap: nowrap; } .dwc-nest-toggle--open.brxe-toggle { display: flex !important; place-items: center; } .dwc-nest-menu .brx-nav-nested-items { position: relative !Important; background: var(--mobile-menu-bg) !important; align-items: stretch; } .dwc-nest-header:not([data-overlay-header-mobile="true"]:has([data-slide-in-direction="top"])) .dwc-nest-menu .brx-nav-nested-items { flex-grow: 1; } [data-overlay-header-mobile="true"] .dwc-nest-menu.dwc-nest-menu[data-submenu-reveal="slide"] .brx-nav-nested-items:has(li.open.active) { flex-grow: 1; } .dwc-nest-menu .brx-nav-nested-items:not(.brx-open .brx-nav-nested-items) { transform: unset } .dwc-nest-menu .brxe-dropdown:not(.brx-has-megamenu)>.brx-dropdown-content { transform: translateZ(0); transform: unset; } .dwc-nest-menu.brxe-nav-nested.brx-closing .brx-nav-nested-items { opacity: unset !important; visibility: unset !important; } .dwc-nest-menu.brxe-nav-nested .brx-nav-nested-items { overflow-y: auto; scrollbar-width: none; justify-content: flex-start !important; } /* set new values */ .dwc-nav-wrapper { position: fixed; inset-block: 0; inset-inline-end: 0; transform: translateX(100%); background-color: var(--mobile-menu-bg); transition: 0.45s; transition-timing-function: var(--mobile-menu-ttf); z-index: 1; flex-wrap: nowrap; inline-size: var(--mobile-menu-width); visibility: hidden; } .brx-open .dwc-nav-wrapper { transform: translateX(0%); visibility: visible; } .dwc-nest-menu-top { background-color: var(--mobile-menu-topbar-bg); border-block-end: var(--menu-item-border); min-block-size: var(--dwc-nest-header-height); display: flex; flex-direction: row; align-items: center; } .dwc-nest-menu .brxe-dropdown.brx-has-megamenu, .dwc-nest-menu .menu-item>a { border-block-end: var(--menu-item-border); } .dwc-nest-menu .brxe-dropdown:not(.brx-has-megamenu):not(.open, :has(.open)), .dwc-nest-menu .brxe-dropdown:not(.brx-has-megamenu)>.brxe-dropdown:not(.open, :has(.open)) { border-block-end: var(--menu-item-border); } /* MENU CTA (LAST BUTTON) */ :is([data-last-item-is-button="true"], [data-last-item-is-button="true-2"], [data-last-item-is-button="true-3"]).dwc-nest-menu .brx-nav-nested-items>.menu-item:last-of-type, :is([data-last-item-is-button="true-2"], [data-last-item-is-button="true-3"]).dwc-nest-menu .brx-nav-nested-items>.menu-item:nth-last-of-type(-n+2), [data-last-item-is-button="true-3"].dwc-nest-menu .brx-nav-nested-items>.menu-item:nth-last-of-type(-n+3) { padding-inline: var(--menu-item-inline-padding) !important; padding-block: var(--menu-item-block-padding) !important; inline-size: 100%; margin-inline: auto; max-inline-size: var(--cta-width); } [data-last-item-is-button="true-2"].dwc-nest-menu .brx-nav-nested-items>.menu-item:nth-last-of-type(-n+2)+li { padding-block-start: var(--cta-gap-offset) !important } [data-last-item-is-button="true-3"].dwc-nest-menu .brx-nav-nested-items>.menu-item:nth-last-of-type(-n+3)+li { padding-block-start: var(--cta-gap-offset) !important } :is([data-last-item-is-button="true"], [data-last-item-is-button="true-2"], [data-last-item-is-button="true-3"]).dwc-nest-menu .brx-nav-nested-items>.menu-item:last-of-type a, :is([data-last-item-is-button="true-2"], [data-last-item-is-button="true-3"]).dwc-nest-menu .brx-nav-nested-items>.menu-item:nth-last-of-type(-n+2) a, [data-last-item-is-button="true-3"].dwc-nest-menu .brx-nav-nested-items>.menu-item:nth-last-of-type(-n+3) a { justify-content: center; } /* MOBILE MENU SLIDE IN DIRECTION */ .bricks-is-frontend [data-slide-in-direction="left"] .dwc-nav-wrapper { transform: translateX(-100%); inset-inline-start: 0; overflow: hidden; } /* RTL */ [dir="rtl"] .bricks-is-frontend [data-slide-in-direction="left"] .dwc-nav-wrapper { inset-inline-start: initial; inset-inline-end: 0; } [dir="rtl"] .bricks-is-frontend [data-slide-in-direction="left"] .dwc-nav-wrapper { inset-inline-start: initial; inset-inline-end: 0; } [dir="rtl"] .bricks-is-frontend [data-submenu-reveal="slide"][data-slide-in-direction="left"] .open.active>.brx-submenu-toggle button:not([data-hide-close-bar="true"] button, [data-submenu-reveal="expand"] button), [dir="rtl"] .bricks-is-frontend .dwc-nest-menu[data-slide-in-direction="left"] [data-submenu-reveal="slide"].open.active>.brx-submenu-toggle button:not([data-hide-close-bar="true"] button, [data-submenu-reveal="expand"] button) { inset-inline-start: initial; inset-inline-end: 0; justify-content: flex-end; } .bricks-is-frontend [data-slide-in-direction="left"].brx-open .dwc-nav-wrapper { transform: translateX(0); } /* SLIDE IN TOP */ .bricks-is-frontend .dwc-nest-menu[data-slide-in-direction="top"].brx-open .dwc-nav-wrapper, .bricks-is-frontend .dwc-nest-menu[data-slide-in-direction="left top"].brx-open .dwc-nav-wrapper { transform: translateY(0%); } .bricks-is-frontend .dwc-nest-menu[data-slide-in-direction="top"] .dwc-nav-wrapper, .bricks-is-frontend .dwc-nest-menu[data-slide-in-direction="left top"] .dwc-nav-wrapper { transform: translateY(-100%); } /* SLIDE IN BOTTOM */ .bricks-is-frontend .dwc-nest-menu[data-slide-in-direction="bottom"].brx-open .dwc-nav-wrapper, .bricks-is-frontend .dwc-nest-menu[data-slide-in-direction="left bottom"].brx-open .dwc-nav-wrapper { transform: translateY(0%); } .bricks-is-frontend .dwc-nest-menu[data-slide-in-direction="bottom"] .dwc-nav-wrapper, .bricks-is-frontend .dwc-nest-menu[data-slide-in-direction="left bottom"] .dwc-nav-wrapper { transform: translateY(100%); } .bricks-is-frontend [data-slide-in-direction="left bottom"] .dwc-nav-wrapper, .bricks-is-frontend [data-slide-in-direction="left top"] .dwc-nav-wrapper { inset-inline-start: 0; overflow: hidden; } .dwc-nest-menu.brxe-nav-nested .brxe-dropdown>.brx-dropdown-content::-webkit-scrollbar-track, .dwc-nest-menu .brx-nav-nested-items::-webkit-scrollbar-track { border-radius: 50vw; background-color: transparent; } .dwc-nest-menu.brxe-nav-nested .brxe-dropdown>.brx-dropdown-content::-webkit-scrollbar, .dwc-nest-menu .brx-nav-nested-items::-webkit-scrollbar { inline-size: 0px; background-color: transparent; } .dwc-nest-menu.brxe-nav-nested .brxe-dropdown>.brx-dropdown-content::-webkit-scrollbar-thumb, .dwc-nest-menu .brx-nav-nested-items::-webkit-scrollbar-thumb { border-radius: 50vw; background-color: #55565d; } /* SCROLLBARS END */ /* SLIDE IN DIRECTION - DROPDOWN ITEMS*/ .bricks-is-frontend [data-submenu-reveal="slide"].dwc-nest-menu.brxe-nav-nested .brxe-dropdown:not(:is([data-submenu-reveal="expand"])) .brx-dropdown-content:not([data-submenu-reveal="expand"] *), .bricks-is-frontend [data-submenu-reveal="slide"].brxe-dropdown .brx-dropdown-content { max-block-size: unset; position: absolute !important; opacity: 1; transition-duration: 0.45s !important; transition-timing-function: var(--mobile-menu-ttf); padding-block-end: 50px; } .bricks-is-frontend .dwc-nest-menu [data-submenu-reveal="expand"].brx-has-megamenu>ul { position: static !important; padding-block-end: 0 !important; transition: 0.3s ease-in-out !important; } .bricks-is-frontend [data-submenu-reveal="slide"].dwc-nest-menu.brxe-nav-nested .brx-has-megamenu.brxe-dropdown .brx-dropdown-content:not([data-submenu-reveal="expand"].brx-has-megamenu ul) { inset: 0 !important; transform: translateX(100%); transition-property: opacity, transform, visibility; min-block-size: calc(100dvb - var(--dwc-nest-header-height)); position: fixed !important; } .bricks-is-frontend [data-submenu-reveal="slide"].dwc-nest-menu.brxe-nav-nested .brx-has-megamenu.brxe-dropdown .brx-dropdown-content:not([data-hide-close-bar="true"] ul, [data-submenu-reveal="expand"].brx-has-megamenu ul) { inset-block-start: var(--dwc-nest-header-height) !important; } .bricks-is-frontend :is([data-slide-in-direction="left"], [data-slide-in-direction="left bottom"], [data-slide-in-direction="left top"])[data-submenu-reveal="slide"].dwc-nest-menu.brxe-nav-nested .brx-has-megamenu.brxe-dropdown .brx-dropdown-content:not([data-submenu-reveal="expand"].brx-has-megamenu ul), .bricks-is-frontend.brx-header-left [data-submenu-reveal="slide"].dwc-nest-menu.brxe-nav-nested .brx-has-megamenu.brxe-dropdown .brx-dropdown-content:not([data-submenu-reveal="expand"].brx-has-megamenu ul) { transform: translateX(-100%); } .bricks-is-frontend :is([data-slide-in-direction="left"], [data-slide-in-direction="left bottom"], [data-slide-in-direction="left top"], [data-submenu-reveal="slide"]).dwc-nest-menu.brx-open .brx-has-megamenu.brxe-dropdown.open>.brx-dropdown-content:not([data-submenu-reveal="expand"].brx-has-megamenu ul) { transform: translateX(0) !important; } html:not(.dwc-mobile) .bricks-is-frontend:is(.brx-header-left, .brx-header-right) :is([data-slide-in-direction="left"], [data-slide-in-direction="left bottom"], [data-slide-in-direction="left top"], [data-submenu-reveal="slide"]).dwc-nest-menu .brx-has-megamenu.brxe-dropdown.open>.brx-dropdown-content:not([data-submenu-reveal="expand"].brx-has-megamenu ul) { transform: translateX(0) !important; visibility: visible; } /* SLIDE IN - mult-level DROPDOWN ITEMS*/ .bricks-is-frontend [data-submenu-reveal="slide"].dwc-nest-menu.brxe-nav-nested .brxe-dropdown:not(:is([data-submenu-reveal="expand"], .brx-has-megamenu)) .brx-dropdown-content:not([data-submenu-reveal="expand"] *), .bricks-is-frontend [data-submenu-reveal="slide"].brxe-dropdown:not(.brx-has-megamenu) .brx-dropdown-content { inset-block: 0 !important; inline-size: 100%; transition-property: inset-inline-start, visibility, opacity; inset-inline-start: 100% !important; min-block-size: 100dvb; position: fixed !important; } .bricks-is-frontend :is([data-slide-in-direction="left"], [data-slide-in-direction="left bottom"], [data-slide-in-direction="left top"])[data-submenu-reveal="slide"].dwc-nest-menu.brxe-nav-nested .brxe-dropdown:not(.brx-has-megamenu, .open, [data-submenu-reveal="expand"]) .brx-dropdown-content:not([dir="rtl"] .brx-dropdown-content), .bricks-is-frontend :is([data-slide-in-direction="left"], [data-slide-in-direction="left bottom"], [data-slide-in-direction="left top"]) [data-submenu-reveal="slide"].brxe-dropdown:not(.brx-has-megamenu, .open) .brx-dropdown-content:not([dir="rtl"] .brx-dropdown-content), .bricks-is-frontend.brx-header-left [data-submenu-reveal="slide"].dwc-nest-menu.brxe-nav-nested .brxe-dropdown:not(.brx-has-megamenu, [data-submenu-reveal="expand"], .open) .brx-dropdown-content:not([dir="rtl"] .brx-dropdown-content) { inset-inline-start: -100% !important; } /* RTL */ [dir="rtl"] .brx-header-right.bricks-is-frontend [data-submenu-reveal="slide"].dwc-nest-menu.brxe-nav-nested:not([data-slide-in-direction="left"], [data-slide-in-direction="left bottom"], [data-slide-in-direction="left top"]) .brxe-dropdown:not(.brx-has-megamenu, [data-submenu-reveal="expand"]) .brx-dropdown-content, [dir="rtl"] .brx-header-right.bricks-is-frontend .dwc-nest-menu:not([data-slide-in-direction="left"], [data-slide-in-direction="left bottom"], [data-slide-in-direction="left top"]) [data-submenu-reveal="slide"].brxe-dropdown:not(.brx-has-megamenu) .brx-dropdown-content, [dir="rtl"] .bricks-is-frontend [data-submenu-reveal="slide"].dwc-nest-menu.brxe-nav-nested:not([data-slide-in-direction="left"], [data-slide-in-direction="left bottom"], [data-slide-in-direction="left top"]) .brxe-dropdown:not(.brx-has-megamenu, [data-submenu-reveal="expand"], .open) .brx-dropdown-content, [dir="rtl"] .bricks-is-frontend .dwc-nest-menu:not([data-slide-in-direction="left"], [data-slide-in-direction="left bottom"], [data-slide-in-direction="left top"]) [data-submenu-reveal="slide"].brxe-dropdown:not(.brx-has-megamenu, .open) .brx-dropdown-content { inset-inline-start: -100% !important; } [dir="rtl"] .brx-header-left.bricks-is-frontend :is([data-slide-in-direction="left"], [data-slide-in-direction="left bottom"], [data-slide-in-direction="left top"])[data-submenu-reveal="slide"].dwc-nest-menu.brxe-nav-nested .brxe-dropdown:not(.brx-has-megamenu, .open) .brx-dropdown-content, [dir="rtl"] .brx-header-left.bricks-is-frontend :is([data-slide-in-direction="left"], [data-slide-in-direction="left bottom"], [data-slide-in-direction="left top"]) [data-submenu-reveal="slide"].brxe-dropdown:not(.brx-has-megamenu, .open) .brx-dropdown-content, [dir="rtl"] .brx-header-left.bricks-is-frontend [data-submenu-reveal="slide"].dwc-nest-menu.brxe-nav-nested .brxe-dropdown:not(.brx-has-megamenu, [data-submenu-reveal="expand"], .open) .brx-dropdown-content { inset-inline-start: 100% !important; } .bricks-is-frontend [data-submenu-reveal="slide"].dwc-nest-menu.brxe-nav-nested .brxe-dropdown:not(.brx-has-megamenu, [data-submenu-reveal="expand"]) .brx-dropdown-content:not([data-hide-close-bar="true"] ul), .bricks-is-frontend [data-submenu-reveal="slide"].brxe-dropdown .brx-dropdown-content:not([data-hide-close-bar="true"] ul) { inset-block-start: var(--dwc-nest-header-height) !important; } .bricks-is-frontend [data-submenu-reveal="slide"].brxe-nav-nested.brx-open .brxe-dropdown.open:not(.brx-has-megamenu, [data-submenu-reveal="expand"])>.brx-dropdown-content, .bricks-is-frontend .brx-open [data-submenu-reveal="slide"].brxe-dropdown.open>.brx-dropdown-content, .bricks-is-frontend .brx-open [data-submenu-reveal="slide"].brxe-dropdown.open>.brx-dropdown-content .open>.brx-dropdown-content { inset-inline-start: 0 !important; } html:not(.dwc-mobile) .bricks-is-frontend:is(.brx-header-left, .brx-header-right) [data-submenu-reveal="slide"].brxe-nav-nested .brxe-dropdown.open:not(.brx-has-megamenu, [data-submenu-reveal="expand"])>.brx-dropdown-content, html:not(.dwc-mobile) .bricks-is-frontend:is(.brx-header-left, .brx-header-right) [data-submenu-reveal="slide"].brxe-dropdown.open>.brx-dropdown-content, html:not(.dwc-mobile) .bricks-is-frontend:is(.brx-header-left, .brx-header-right) [data-submenu-reveal="slide"].brxe-dropdown.open>.brx-dropdown-content .open>.brx-dropdown-content { inset-inline-start: 0 !important; visibility: visible; } .bricks-is-frontend .dwc-nest-menu .brxe-dropdown { position: static; } .bricks-is-frontend [data-submenu-reveal="slide"] .brx-submenu-toggle button svg:not([data-submenu-reveal="expand"] svg) { transform: rotate(270deg) } /* EXPAND - mult-level DROPDOWN ITEMS*/ .bricks-is-frontend .dwc-nest-menu .brxe-dropdown[data-submenu-reveal="expand"]:not(.brx-has-megamenu)>.brx-dropdown-content>li, .bricks-is-frontend .dwc-nest-menu .brxe-dropdown[data-submenu-reveal="expand"]:not(.brx-has-megamenu)>.brx-dropdown-content>.brxe-dropdown .brx-dropdown-content>li, .bricks-is-frontend .dwc-nest-menu[data-submenu-reveal="expand"] .brxe-dropdown:not(.brx-has-megamenu, .open) .brx-dropdown-content>.menu-item:not([data-submenu-reveal="slide"] li) { transform: translateY(-100px); opacity: 0; transition: transform 0s, opacity 0s } .bricks-is-frontend .dwc-nest-menu .brxe-dropdown.open[data-submenu-reveal="expand"]:not(.brx-has-megamenu)>.brx-dropdown-content>li, .bricks-is-frontend .dwc-nest-menu .brxe-dropdown.open[data-submenu-reveal="expand"]:not(.brx-has-megamenu)>.brx-dropdown-content>.brxe-dropdown.open .brx-dropdown-content>li, .bricks-is-frontend .dwc-nest-menu[data-submenu-reveal="expand"] .brxe-dropdown:not(.brx-has-megamenu).open>.brx-dropdown-content>.menu-item { transform: translateY(0); opacity: 1 !important; transition: transform 0.4s, opacity 0.4s } /* MOBILE LOGO */ .dwc-nest-menu:not([data-submenu-reveal="expand"]):has(.brxe-dropdown.open) .dwc-nest-menu__mobile-logo { opacity: 0; transition: 0s; } .dwc-nest-menu__mobile-logo { opacity: 1; transition: opacity 0.45s 0.15s var(--mobile-menu-ttf); } .dwc-nest-menu__mobile-logo:not(.brx-header-left *, .brx-header-right *) { block-size: var(--dwc-nest-header-height); max-block-size: var(--dwc-header-div-height); } .brx-header-left .dwc-nest-menu__mobile-logo, .brx-header-right .dwc-nest-menu__mobile-logo { min-block-size: var(--top-offset); } :where(.brx-header-left, .brx-header-right) #brx-header:has([data-sidebar-back-text-on-logo="true"]) .dwc-nest-menu__logo { display: none; } :where(.brx-header-left, .brx-header-right) #brx-header:has([data-sidebar-back-text-on-logo="true"]) .dwc-nest-menu__mobile-logo { display: flex; } /* DROPDOWN INDENT */ .dwc-nest-menu[data-submenu-reveal="expand"] .brxe-dropdown:not(.brx-has-megamenu)>.brx-dropdown-content:not(.brxe-dropdown[data-submenu-reveal="slide"] .brx-dropdown-content), .dwc-nest-menu .brxe-dropdown[data-submenu-reveal="expand"]:not(.brx-has-megamenu) .brx-dropdown-content { padding-inline-start: var(--dropdown-indent) !important; padding-inline-end: calc(var(--dropdown-indent) * 0) !important; border-left: var(--dropdown-indent-line); background-color: var(--dropdown-indent-bg); min-inline-size: 0px !important; } .dwc-nest-menu[data-submenu-reveal="expand"] .brxe-dropdown:not(.brx-has-megamenu)>.brx-dropdown-content:not(.brxe-dropdown[data-submenu-reveal="slide"] *)>*> :is(a, .brx-submenu-toggle), .dwc-nest-menu .brxe-dropdown[data-submenu-reveal="expand"]:not(.brx-has-megamenu)>.brx-dropdown-content>*> :is(a, .brx-submenu-toggle) { padding-inline-start: calc(var(--dropdown-item-inline-padding) * var(--dropdown-indent-item-pad-offset)) !important; } .dwc-nest-menu[data-submenu-reveal="expand"] .brxe-dropdown.open>.brx-submenu-toggle, .dwc-nest-menu [data-submenu-reveal="expand"].brxe-dropdown.open>.brx-submenu-toggle { background-color: var(--dropdown-expanded-bg); color: var(--dropdown-expanded-clr); } .dwc-nest-menu[data-submenu-reveal="expand"] .brxe-dropdown.open>.brx-submenu-toggle svg, .dwc-nest-menu [data-submenu-reveal="expand"].brxe-dropdown.open>.brx-submenu-toggle svg { color: var(--dropdown-expanded-clr) !important; } /* BACK BUTTON POSITIONING */ .bricks-is-frontend [data-submenu-reveal="slide"] .open.active>.brx-submenu-toggle button:not([data-hide-close-bar="true"] button, [data-submenu-reveal="expand"] button), .bricks-is-frontend [data-submenu-reveal="slide"].open.active>.brx-submenu-toggle button:not([data-hide-close-bar="true"] button, [data-submenu-reveal="expand"] button) { min-inline-size: 100%; position: fixed; inset-block-start: calc(var(--dwc-nest-header-height) - var(--dwc-header-div-height)); transform: translateY(0%) !important; inset-inline-start: 0; padding-inline-start: var(--menu-item-inline-padding); color: var(--back-text-clr); text-transform: var(--back-text-transform); letter-spacing: 1px; z-index: 1000; font-size: var(--back-text-font-size); font-weight: var(--back-text-font-weight); background-color: var(--back-text-bg); min-block-size: calc(var(--dwc-header-div-height) - 2px); -webkit-animation: dwc-nest-fade-in 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.3s both; animation: dwc-nest-fade-in 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.3s both; } /* BACK BUTTON TEXT, (ATTR SET BY JS) */ .bricks-is-frontend [data-submenu-reveal="slide"] .open.active>.brx-submenu-toggle button[data-back-text="auto"]:not([data-submenu-reveal="expand"] button, [data-hide-close-bar="true"] button):after, .bricks-is-frontend [data-submenu-reveal="slide"].brxe-dropdown.open>.brx-submenu-toggle button[data-back-text="auto"]:not([data-hide-close-bar="true"] button):after { content: attr(data-text); line-height: 1; } /* FORCE TO USE 'BACK' AS BACK BUTTON TEXT */ .bricks-is-frontend .dwc-nest-menu:not([data-submenu-reveal="expand"]) .brxe-dropdown.open:not([data-submenu-reveal="expand"])>.brx-submenu-toggle button:not([data-back-text="auto"])::after { content: attr(data-back-text) !important; } .dwc-nest-menu:not([data-submenu-reveal="expand"]) .brxe-dropdown:not([data-submenu-reveal="expand"]) .brx-submenu-toggle button[aria-expanded] { transition: unset !important; } /* BACK BUTTON CHEVRON ARROW direction */ .bricks-is-frontend [data-submenu-reveal="slide"] .brxe-dropdown.open>.brx-submenu-toggle button svg:not([data-submenu-reveal="expand"] svg), .bricks-is-frontend [data-submenu-reveal="slide"].brxe-dropdown.open>.brx-submenu-toggle button svg { transform: rotate(90deg); margin-inline-end: 0.5em; inline-size: 10px; } /* RTL */ [dir="rtl"] .bricks-is-frontend [data-submenu-reveal="slide"] .brxe-dropdown.open:not([data-submenu-reveal="expand"])>.brx-submenu-toggle button svg, [dir="rtl"] .bricks-is-frontend [data-submenu-reveal="slide"].brxe-dropdown.open>.brx-submenu-toggle button svg { order: 2; margin-inline-end: initial; margin-inline-start: 0.5em; } /* overlay back button on logo*/ body:has(.brx-open .open.active:not([data-submenu-reveal="expand"], [data-submenu-reveal="expand"] .open)) [data-mobile-top-transparent="true"]:not([data-submenu-reveal="expand"], [data-below-header="true"]) .dwc-nest-menu-top { background-color: var(--mobile-menu-topbar-bg) !important; -webkit-animation: dwc-nest-fade-in 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.2s both; animation: dwc-nest-fade-in 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.2s both; } body:has([data-submenu-reveal="slide"].brxe-dropdown.open, [data-submenu-reveal="slide"] .brxe-dropdown.open:not([data-submenu-reveal="expand"], [data-submenu-reveal="expand"] .open)) [data-mobile-top-transparent="true"] .dwc-nest-menu-top:not([data-below-header="true"] *) { background-color: var(--mobile-menu-topbar-bg) !important; } .dwc-mobile [data-mobile-top-transparent="true"] .dwc-nav-wrapper:not([data-below-header="true"] .dwc-nav-wrapper, [data-show-mobile-logo="true"] .dwc-nav-wrapper, [data-fullscreen-mobile-menu="true"] .dwc-nav-wrapper) { background-color: transparent !important; } .dwc-mobile [data-mobile-top-transparent="true"] .dwc-nest-menu-top:not([data-below-header="true"] *, [data-show-mobile-logo="true"] *, [data-allow-overlay-mobile-opacity="true"][data-overlay-header-mobile="true"] [data-submenu-reveal="expand"][data-slide-in-direction="top"] *) { background-color: transparent !important; } .dwc-mobile [data-allow-overlay-mobile-opacity="true"][data-overlay-header-mobile="true"] [data-submenu-reveal="expand"][data-slide-in-direction="top"] .dwc-nest-menu-top { z-index: 9999; border-radius: var(--overlay-header-radius); --mobile-menu-topbar-bg: var(--overlay-header-bg); backdrop-filter: blur(var(--overlay-header-blur)); } /* MENU BELOW HEADER */ .bricks-is-frontend [data-below-header="true"].dwc-nest-menu .dwc-nav-wrapper { inset-block-start: calc(var(--dwc-nest-header-height) + var(--wp-admin--admin-bar--height, 0px)); } [data-below-header="true"] .dwc-nest-menu-top { min-block-size: var(--top-offset); } .bricks-is-frontend [data-below-header="true"] .brxe-dropdown.open>.brx-submenu-toggle button:not([data-hide-close-bar="true"] button, [data-submenu-reveal="expand"] button) { min-block-size: calc(var(--top-offset) - 1px); padding-block: 0 !important; inset-block-start: 0; } .bricks-is-frontend [data-below-header="true"].dwc-nest-menu.brxe-nav-nested .brxe-dropdown:not(.brx-has-megamenu) .brx-dropdown-content:not([data-hide-close-bar="true"] ul), .bricks-is-frontend [data-submenu-reveal="slide"].brxe-dropdown .brx-dropdown-content:not([data-hide-close-bar="true"] ul) { inset-block-start: calc(var(--top-offset) + 1px) !important; } .bricks-is-frontend [data-below-header="true"].dwc-nest-menu.brxe-nav-nested .brx-has-megamenu.brxe-dropdown .brx-dropdown-content:not([data-hide-close-bar="true"] ul, [data-submenu-reveal="expand"].brx-has-megamenu ul) { inset-block-start: calc(var(--top-offset) + 1px) !important; } .dwc-nest-menu[data-below-header="true"] .dwc-nest-menu__mobile-logo { display: none; } /* tooltip */ .dwc-nest-tooltip:not(.dwc-nav-wrapper:has(.open.active) .dwc-nest-tooltip, .dwc-tabbed-nav-list__li.active ~ .dwc-nest-tooltip) { opacity: 0 !important; } @keyframes slideIn { 0% { transform: translateX(-100%); opacity: 0; } 100% { transform: translateX(0); opacity: 1; } } @keyframes fadeOut { 0% { transform: translateX(0); opacity: 1; } 100% { transform: translateX(50%); opacity: 0; } } .dwc-nest-tooltip { animation: slideIn 0.4s ease-in-out both, fadeOut 0.4s ease-in-out 2s both; text-transform: initial; } /* EXPAND DROP DOWN */ /* EXPAND MEGA MENU DROP DOWN */ [data-submenu-reveal="expand"] .brx-has-megamenu .brx-dropdown-content { display: grid !important; grid-template-rows: 0fr; grid-template-columns: 1fr; transition: 0.3s ease-in-out; overflow: hidden; position: static; visibility: visible; opacity: 1; } [data-submenu-reveal="expand"] .brx-has-megamenu.brxe-dropdown.open.active .brx-dropdown-content { grid-template-rows: 1fr; grid-template-columns: 1fr; } [data-submenu-reveal="expand"] .brx-has-megamenu .brx-dropdown-content> :is(div, li) { padding-block: 0 !important; opacity: 0; transition: opacity 0.3s ease; } [data-submenu-reveal="expand"] .brx-has-megamenu .brx-dropdown-content :is(div, li):not([data-submenu-reveal="slide"] *) { flex-wrap: nowrap !important; min-block-size: 0 !important; } [data-submenu-reveal="expand"] .brx-has-megamenu.brxe-dropdown.open.active .brx-dropdown-content> :is(div, li) { opacity: 1; transition: opacity 0.25s 0.25s ease; } /* EXPAND MEGA MENU DROP DOWN -- MODULAR*/ [data-submenu-reveal="expand"].brx-has-megamenu .brx-dropdown-content { display: grid !important; grid-template-rows: 0fr; grid-template-columns: 1fr; transition: 0.3s ease-in-out; overflow: hidden; position: static; visibility: visible; opacity: 1; } [data-submenu-reveal="expand"].brx-has-megamenu.brxe-dropdown.open.active .brx-dropdown-content { grid-template-rows: 1fr; grid-template-columns: 1fr; } [data-submenu-reveal="expand"].brx-has-megamenu .brx-dropdown-content> :is(div, li) { padding-block: 0 !important; opacity: 0; transition: opacity 0.3s ease; } [data-submenu-reveal="expand"].brx-has-megamenu .brx-dropdown-content :is(div, li) { flex-wrap: nowrap !important; min-block-size: 0 !important; } [data-submenu-reveal="expand"].brx-has-megamenu.brxe-dropdown.open.active .brx-dropdown-content> :is(div, li) { opacity: 1; transition: opacity 0.8s 0.25s ease; } /* HIDE TOP CLOSE BAR */ [data-hide-close-bar='true'] .dwc-nest-menu-top { display: none; } /* hide close button, bring main hamburger to front */ .dwc-nest-menu .brxe-toggle { position: relative; } [data-mobile-top-transparent="true"]:not(:has(.brxe-dropdown.open)) .brxe-toggle[aria-label="Open Menu"] { z-index: 9999; } [data-show-toggle-always="true"] .brxe-toggle[aria-label="Open Menu"] { z-index: 9999; } /* .dwc-nest-menu:not([data-mobile-top-transparent="true"], [data-below-header="true"]) .brxe-toggle[aria-label="Close Menu"] { display: grid; place-items: center; block-size: 100%; } */ .dwc-nest-menu .brx-nav-nested-items>.brxe-dropdown>.brx-dropdown-content { transform: unset; } .dwc-nest-menu .brx-nav-nested-items>.brxe-dropdown.open>.brx-dropdown-content { transform: unset; } .dwc-stripe-style .dwc-nest-header::after, .dwc-stripe-style .dwc-nest-header::before { display: none !important; } /* builder */ [data-builder-mode] .dwc-nest-menu-top { min-block-size: 80px !important; } [data-builder-mode] .dwc-nest-nav-items { overflow-y: scroll; } /* in builder ends*/ /*==========RTL=============*/ [dir=rtl] .bricks-is-frontend [data-submenu-reveal="slide"].dwc-nest-menu.brxe-nav-nested:not([data-slide-in-direction="right"]) .brx-has-megamenu.brxe-dropdown .brx-dropdown-content:not([data-submenu-reveal="expand"].brx-has-megamenu ul) { transform: translateX(-100%); } [dir=rtl] nav:not(.brx-open, [data-slide-in-direction="right"]) .dwc-nav-wrapper { transform: translateX(-100%); } [dir=rtl] .bricks-is-frontend [data-submenu-reveal="slide"] .brx-submenu-toggle button svg:not([data-submenu-reveal="expand"] svg) { transform: rotate(-270deg); } /* ================== BRICKS RESET LAYER ========================== */ @layer bricks.reset { /* multilevel dropdown slide in */ .bricks-is-frontend [data-submenu-reveal="slide"].dwc-nest-menu.brxe-nav-nested .brxe-dropdown:not(:is([data-submenu-reveal="expand"], .brx-has-megamenu)) .brx-dropdown-content:not([data-submenu-reveal="expand"] *, .brx-header-left *, .brx-header-right *), .bricks-is-frontend [data-submenu-reveal="slide"].brxe-dropdown:not(.brx-has-megamenu) .brx-dropdown-content:not(.brx-header-left *, .brx-header-right *) { inset-inline-start: 100% !important; } [dir=rtl] .bricks-is-frontend [data-slide-in-direction="right"][data-submenu-reveal="slide"].dwc-nest-menu.brxe-nav-nested .brxe-dropdown:not(:is([data-submenu-reveal="expand"], .brx-has-megamenu), .open) .brx-dropdown-content:not([data-submenu-reveal="expand"] *), [dir=rtl] .bricks-is-frontend [data-slide-in-direction="right"][data-submenu-reveal="slide"].brxe-dropdown:not(.brx-has-megamenu, .open) .brx-dropdown-content { inset-inline-start: -100% !important; } .bricks-is-frontend [data-submenu-reveal="slide"][data-slide-in-direction^="left"].dwc-nest-menu.brxe-nav-nested .brxe-dropdown:not(:is([data-submenu-reveal="expand"], .brx-has-megamenu)) .brx-dropdown-content:not([data-submenu-reveal="expand"] *, .brx-header-left *, .brx-header-right *), .bricks-is-frontend [data-submenu-reveal="slide"].brxe-dropdown:not(.brx-has-megamenu) .brx-dropdown-content:not(.brx-header-left *, .brx-header-right *) { inset-inline-start: -100% !important; } /*sidebar*/ .bricks-is-frontend:is(.brx-header-right, brx-header-left) [data-submenu-reveal="slide"].dwc-nest-menu.brxe-nav-nested .brxe-dropdown:not(:is([data-submenu-reveal="expand"], .brx-has-megamenu, .open)) .brx-dropdown-content:not([data-submenu-reveal="expand"] *, .-brx-header-left *, .-brx-header-right *), .bricks-is-frontend:is(.brx-header-right, brx-header-left) [data-submenu-reveal="slide"].brxe-dropdown:not(.brx-has-megamenu, .open) .brx-dropdown-content:not(.brx-header-left *, .brx-header-right *) { inset-inline-start: 100% !important; } .bricks-is-frontend [data-submenu-reveal="slide"].brxe-nav-nested.brx-open .brxe-dropdown.open:not(.brx-has-megamenu, [data-submenu-reveal="expand"])>.brx-dropdown-content, .bricks-is-frontend .brx-open [data-submenu-reveal="slide"].brxe-dropdown.open>.brx-dropdown-content, .bricks-is-frontend .brx-open [data-submenu-reveal="slide"].brxe-dropdown.open>.brx-dropdown-content .open>.brx-dropdown-content { inset-inline-start: 0 !important; } .bricks-is-frontend [data-submenu-reveal="slide"][data-slide-in-direction^="left"].brxe-nav-nested.brx-open .brxe-dropdown.open:not(.brx-has-megamenu, [data-submenu-reveal="expand"])>.brx-dropdown-content, .bricks-is-frontend [data-slide-in-direction^="left"] .brx-open [data-submenu-reveal="slide"].brxe-dropdown.open>.brx-dropdown-content, .bricks-is-frontend [data-slide-in-direction^="left"] .brx-open [data-submenu-reveal="slide"].brxe-dropdown.open>.brx-dropdown-content .open>.brx-dropdown-content { inset-inline-start: 0 !important; } /*sidebar*/ .bricks-is-frontend:is(.brx-header-right, brx-header-left) [data-submenu-reveal="slide"].brxe-nav-nested .brxe-dropdown.open:not(.brx-has-megamenu, [data-submenu-reveal="expand"])>.brx-dropdown-content, .bricks-is-frontend:is(.brx-header-right, brx-header-left) [data-submenu-reveal="slide"].brxe-dropdown.open>.brx-dropdown-content, .bricks-is-frontend:is(.brx-header-right, brx-header-left) [data-submenu-reveal="slide"].brxe-dropdown.open>.brx-dropdown-content .open>.brx-dropdown-content { inset-inline-start: 0 !important; } .brx-closing.brxe-nav-nested .brx-nav-nested-items { opacity: 1 !important; } .dwc-nest-menu.brxe-nav-nested.brx-closing .brx-nav-nested-items { opacity: unset !important; visibility: unset !important; } } /* ================== END BRICKS RESET LAYER ========================== */ } /* END MEDIA QUERY*/ @media (min-width: 640px) and (max-width: 1200px) { /* ================== BRICKS RESET LAYER ========================== */ @layer bricks.reset { /*special mobile style on tablet */ .dwc-mobile .bricks-is-frontend [data-mobile-special-style="slide-split"] [data-submenu-reveal="slide"].dwc-nest-menu.brxe-nav-nested .brxe-dropdown:not(:is([data-submenu-reveal="expand"], .brx-has-megamenu)) .brx-dropdown-content:not([data-submenu-reveal="expand"] *), .bricks-is-frontend [data-mobile-special-style="slide-split"] [data-submenu-reveal="slide"].brxe-dropdown:not(.brx-has-megamenu) .brx-dropdown-content { inset-inline-start: auto !important; inset-inline-end: -100% !important; } .dwc-mobile .bricks-is-frontend [data-mobile-special-style="slide-split"] [data-submenu-reveal="slide"].brxe-nav-nested.brx-open .brxe-dropdown.open:not(.brx-has-megamenu, [data-submenu-reveal="expand"])>.brx-dropdown-content, .bricks-is-frontend [data-mobile-special-style="slide-split"] .brx-open [data-submenu-reveal="slide"].brxe-dropdown.open>.brx-dropdown-content, .bricks-is-frontend [data-mobile-special-style="slide-split"] .brx-open [data-submenu-reveal="slide"].brxe-dropdown.open>.brx-dropdown-content .open>.brx-dropdown-content { inset-inline-end: 0% !important; inset-inline-start: auto !important; } } /* ================== END BRICKS RESET LAYER ========================== */ } /* END MEDIA QUERY*/

@media (min-width: 1201px){ .dwc-mobile header{ display: none; } @layer bricks.reset{ .brx-dropdown-content:not(.brx-submenu-positioned) { display: flex!important; } } /* CENTERED LOGO*/ /*force center align for centered logo menu */ .dwc-nest-header__container.dwc-logo-is-centered { justify-content: center; } .dwc-logo-is-centered .dwc-nest-menu .brx-nav-nested-items{ justify-content: center; } /*remvoe bricks default margin left*/ #brx-header .dwc-logo-is-centered .dwc-nest-menu li:not(.brx-dropdown-content *){ margin-inline: 0 !important; display: flex; flex-direction: column; justify-content: center; } /* prevent logo from shrinking on sceen resize*/ #brx-header .dwc-logo-is-centered .dwc-header-logo-item{ flex-shrink: 0; } .dwc-center-guide { background-color: rgba(132, 255, 0, 0.32); position: fixed; top: 0; bottom: 0; align-self: center; height: 100dvb; z-index: 9999; pointer-events: none; } body:not(:has([data-fix-centered-logo-fouc="true"])) .dwc-center-guide::before { content: 'To fix FOUC on the header, Go to Header Pro div > Attribute > data-fix-centered-logo-fouc, set the value to "true"'; position: absolute; top: 30vh; padding: 1rem; background-color: white; } .dwc-logo-is-centered .dwc-menu-wrap{ inline-size:100% } .dwc-nest-header .brx-nav-nested-items { transition-property: opacity,transform; } body.adaptive-height-active:has([data-fix-centered-logo-fouc="true"]):not(:has(.dwc-logo-is-centered))::before { content: 'Go to the Header Pro section > Attribute > data-fix-centered-logo-fouc, remove the value "true" OR enable Centered Logo'; } } /*======================================= MIN WIDTH MEDIA QUERY ENDS ==============================================================*/ body:has([data-overlay-header="true"]) .dwc-nest-menu-overlay { inset-block-start: 0 ; } /*fix centered logo fouc*/ html:not(.dwc-mobile) .bricks-is-frontend header:has([data-fix-centered-logo-fouc="true"]):not(.desktop-centered header) { opacity: 0; } /*end fix fouc*/ .dwc-adaptive-height:not(.dwc-stripe-style){ --dropdown-content-gap: 0 } html:not(.dwc-mobile) .bricks-is-frontend:not(.brx-header-right, .brx-header-left) .dwc-nest-menu:not([data-offcanvas="true"]) .brxe-dropdown:not(.brx-has-megamenu) .brx-dropdown-content:not(.brx-dropdown-content .brx-dropdown-content){ inset-inline-start: 0 !important; } html:not(.dwc-mobile) .bricks-is-frontend .dwc-nest-menu .brx-dropdown-content .brx-dropdown-content:not(.brx-sub-submenu-overflow-right, .brx-submenu-overflow-right){ inset-inline-start: 100% !important; } html:not(.dwc-mobile) .bricks-is-frontend .dwc-nest-menu .brxe-dropdown:not(.brx-has-megamenu) .brx-dropdown-content{ min-inline-size: var(--multilevel-dropdown-width) !important; } html:not(.dwc-mobile) .bricks-is-frontend .dwc-nest-menu .brx-dropdown-content{ box-shadow: var(--dropdown-content-shadow); } html:not(.dwc-mobile) .bricks-is-frontend:not(.brx-header-left, .brx-header-right) .dwc-nest-menu:not([data-offcanvas="true"]) .brx-has-megamenu .brx-dropdown-content > *{ max-block-size: calc(95dvb - calc(var(--dwc-nest-header-height) + var(--wp-admin--admin-bar--height, 0px))); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin !important; } .dwc-nest-menu[data-submenu-reveal="expand"] .brx-nav-nested-items > .brxe-dropdown:not([data-submenu-reveal="slide"], .brx-has-megamenu) > .brx-submenu-toggle { transform: translateY(0); z-index: 9999; } :is([data-submenu-reveal="expand"][data-offcanvas="true"]) .brxe-dropdown:not(.brx-has-megamenu) .brx-dropdown-content, :is(.brx-header-right, .brx-header-left) [data-submenu-reveal="expand"] .brxe-dropdown:not(.brx-has-megamenu) .brx-dropdown-content{ inset-block-start: 0; transition: 0s; min-inline-size: var(--mobile-menu-width); } .dwc-nest-toggle--open.brxe-toggle .brxa-inner:before { block-size: var(--open-icon-line-height); inset-inline-end: var(--open-icon-align); } .dwc-nest-toggle--open.brxa--vortex .brxa-inner:before { inline-size: var(--open-icon-size); } .dwc-nest-toggle--open.brxa--vortex .brxa-inner:not(.is-active .brxa-inner):before { inset-block-start: calc(var(--icon-line-gap) * -1); } .dwc-nest-toggle--open.brxa--vortex .brxa-inner:not(.is-active .brxa-inner):after { inset-block-end: calc(var(--icon-line-gap) * -1); } .dwc-nest-toggle--open.brxe-toggle .brxa-inner{ block-size: var(--open-icon-line-height); inset-inline-end: var(--open-icon-horizontal-offset); } .dwc-nest-toggle--open.brxa--vortex .brxa-inner{ inline-size:var(--iw); } .dwc-nest-toggle--open.brxe-toggle .brxa-inner:after { block-size: var(--open-icon-line-height); inset-inline-end: var(--open-icon-align); } .dwc-nest-toggle--open.brxa--vortex .brxa-inner:after { inline-size: var(--aw); } .dwc-nest-toggle--open.brxa--vortex.is-active .brxa-inner:after, .dwc-nest-toggle--open.brxa--vortex.is-active .brxa-inner { inline-size: calc(var(--iw) * var(--open-icon-close-offset)); } .dwc-nest-toggle--open.brxa--vortex .brxa-wrap{ inline-size: var(--open-icon-size) } .dwc-nest-toggle--open .brxa-inner, .dwc-nest-toggle--open .brxa-inner:after, .dwc-nest-toggle--open .brxa-inner:before{ background-color: var(--menu-toggle-clr) } .dwc-nest-menu.brxe-nav-nested .brxe-toggle[aria-label="Close Menu"] i{ color: var(--menu-close-toggle-clr) } .dwc-nest-toggle--open .brxa-wrap:hover .brxa-inner, .dwc-nest-toggle--open .brxa-wrap:hover .brxa-inner:after, .dwc-nest-toggle--open .brxa-wrap:hover .brxa-inner:before { background-color: var(--menu-toggle-hover-clr) !important } /* icon animation */ .dwc-nest-toggle--open.brxa--vortex .brxa-inner { transition-duration: .3s; transition-timing-function: ease-in-out; } .dwc-nest-toggle--open.brxa--vortex.is-active .brxa-inner { transform: rotate(225deg); transition-timing-function: ease-in-out; } .dwc-nest-toggle--open.brxa--vortex.is-active .brxa-inner:before { opacity: 0; inset-block-start: calc(var(--icon-line-gap) * -1); inline-size: 0px !important; } .dwc-nest-toggle--open .brxa-inner:before { transition-duration: 0.25s; transition-property: inline-size, tansform !important; } /* MENU ITEMS SPACING AND COLOR*/ /* Shared styles for both menu types */ .dwc-nest-menu .brx-nav-nested-items > li > a:not(.dwc-nest-menu__logo), .dwc-nest-menu .brx-nav-nested-items > li .brx-submenu-toggle, .dwc-nest-menu .brx-dropdown-content > .menu-item > a { font-weight: var(--menu-item-font-weight); font-size: var(--menu-item-font-size); color: var(--menu-item-clr); background-color: var(--menu-item-bg); inline-size: 100%; } .dwc-nest-menu .brx-dropdown-content > .brxe-dropdown > .brx-submenu-toggle, .dwc-nest-menu .brx-dropdown-content > .menu-item > a { --menu-item-font-size: var(--dropdown-item-font-size) } /* Specific padding for nested menu items */ .dwc-nest-menu .brx-nav-nested-items > li > a, .dwc-nest-menu .brx-nav-nested-items > li.brx-has-megamenu .brx-submenu-toggle { padding-block: var(--menu-item-block-padding); padding-inline: var(--menu-item-inline-padding) !important; } /* Specific padding for dropdown items */ .dwc-nest-menu .brx-dropdown-content > .menu-item > a { padding-block: var(--dropdown-item-block-padding); padding-inline: var(--dropdown-item-inline-padding) !important; } .dwc-nest-menu .brx-nav-nested-items > .brxe-dropdown:not(.brx-has-megamenu) li .brx-submenu-toggle{ padding-block: var(--dropdown-item-block-padding); padding-inline: var(--dropdown-item-inline-padding) !important; } .dwc-nest-menu .brx-nav-nested-items > li:not(.brx-has-megamenu) .brx-submenu-toggle:not(.brxe-dropdown li .brx-submenu-toggle){ padding-block: var(--menu-item-block-padding); padding-inline: var(--menu-item-inline-padding) !important; } .dwc-nest-menu .brx-dropdown-content > .menu-item > a:not([aria-current="page"], li:hover > *), li:not(.brx-has-megamenu) .brx-submenu-toggle:not( .brx-nav-nested-items > li > *, li:hover > *, .open.active *) { color: var(--dropdown-item-clr) !important; } /* DROPDOWN MENU ITEMS BG COLOR */ .dwc-nest-menu .brx-dropdown-content > .menu-item > a:not(.brx-has-megamenu a), li:not(.brx-has-megamenu) .brx-submenu-toggle:not( .brx-nav-nested-items > li > *) { background-color: var(--dropdown-item-bg) } /* DROPDOWN BG COLOR */ .dwc-nest-menu .brxe-dropdown:not(.brx-has-megamenu) .brx-dropdown-content { background-color: var(--dropdown-content-bg); } /* DROPDOWN BORDER RADIUS */ .dwc-nest-menu .brx-nav-nested-items .brxe-dropdown:not(.brx-has-megamenu) li :is(.brx-submenu-toggle, .brxe-text-link){ border-radius: var(--dropdown-item-radius) } /* HOVER STYLES */ .dwc-nest-menu .brx-nav-nested-items > li:hover > a, .dwc-nest-menu .brx-nav-nested-items > li:hover > .brx-submenu-toggle, .dwc-nest-menu .brx-dropdown-content > li:hover > .brx-submenu-toggle, .dwc-nest-menu .brx-dropdown-content > .menu-item:hover > a { color: var(--menu-item-hover-clr); background-color: var(--menu-item-hover-bg) } .dwc-nest-nav-dropdown-link:hover { color: var(--menu-item-hover-clr); } .dwc-nest-menu .brx-nav-nested-items > li > a:not([data-last-item-is-button="true"] .brx-nav-nested-items > .menu-item:last-of-type a, [data-last-item-is-button="true-2"] .brx-nav-nested-items > .menu-item:nth-last-of-type(-n+2) a, [data-last-item-is-button="true-3"] .brx-nav-nested-items > .menu-item:nth-last-of-type(-n+3) a, .dwc-nest-menu__logo):hover::before, body:not(.brx-header-left, .brx-header-right) .dwc-nest-menu .brx-nav-nested-items > li > a:not([data-last-item-is-button="true"] .brx-nav-nested-items > .menu-item:last-of-type a, [data-last-item-is-button="true-2"] .brx-nav-nested-items > .menu-item:nth-last-of-type(-n+2) a, [data-last-item-is-button="true-3"] .brx-nav-nested-items > .menu-item:nth-last-of-type(-n+3) a, .dwc-nest-menu__logo):focus-visible::before, .dwc-nest-menu .brx-nav-nested-items > li:hover > .brx-submenu-toggle::before, body:not(.brx-header-left, .brx-header-right) .dwc-nest-menu .brx-nav-nested-items > li:focus-within > .brx-submenu-toggle::before{ content: ''; background-color: var(--menu-item-hover-border-bg); inline-size: 100%; block-size: var(--menu-item-hover-border-height); position: absolute; inset-block-start: calc(100% - var(--menu-item-hover-border-height)); inset-inline-start: 0; } .dwc-nest-menu .brx-nav-nested-items > li.menu-item:has(> a), .dwc-nest-menu .brx-nav-nested-items > li.menu-item:has(> .brx-submenu-toggle) { position: relative; } /* ACTIVE STYLES */ /* links and dropdwon active styles */ .dwc-nest-menu .brx-nav-nested-items a[aria-current="page"]:not(.brxe-button, .dwc-exclude, .dwc-exclude a, li:hover > a, a:hover, .dwc-nest-menu__logo, [data-last-item-is-button="true"] .brx-nav-nested-items > .menu-item:last-of-type a, [data-last-item-is-button="true-2"] .brx-nav-nested-items > .menu-item:nth-last-of-type(-n+2) a, [data-last-item-is-button="true-3"] .brx-nav-nested-items > .menu-item:nth-last-of-type(-n+3) a), .dwc-nest-menu .brx-nav-nested-items > li:has([aria-current="page"]:not(.dwc-exclude)):not(li:hover) > .brx-submenu-toggle { color: var(--menu-item-active-clr); background-color: var(--menu-item-active-bg); } .dwc-nest-menu .brx-nav-nested-items .brx-submenu-toggle > a[aria-current="page"]{ background-color: initial !important; } .dwc-nest-menu .brx-nav-nested-items a[aria-current="page"]:not(.brxe-button, .dwc-exclude, .dwc-exclude a, .dwc-nest-menu__logo), .dwc-nest-menu .brx-nav-nested-items > li .brx-submenu-toggle{ position: relative; } .dwc-nest-menu .brx-nav-nested-items a[aria-current="page"]:not(.brxe-button, .dwc-exclude, .dwc-exclude a, [data-last-item-is-button="true"] .brx-nav-nested-items > .menu-item:last-of-type a, [data-last-item-is-button="true-2"] .brx-nav-nested-items > .menu-item:nth-last-of-type(-n+2) a, [data-last-item-is-button="true-3"] .brx-nav-nested-items > .menu-item:nth-last-of-type(-n+3) a, .dwc-nest-menu__logo, .brx-submenu-toggle > a)::before, .dwc-nest-menu .brx-nav-nested-items > li:has([aria-current="page"]:not(.dwc-exclude)) > .brx-submenu-toggle::before{ content: ''; background-color: var(--menu-item-active-border-bg); inline-size: 100%; block-size: var(--menu-item-active-border-height); position: absolute; inset-block-start: calc(100% - var(--menu-item-active-border-height)); inset-inline-start: 0; } .dwc-nest-menu .brx-nav-nested-items > li:has([aria-current="page"]:not(.dwc-exclude)) > .brx-submenu-toggle > :is(a:not(.dwc-nest-menu__logo), svg, button, span){ color: var(--menu-item-active-clr); } /* DROPDOWN HOVER BG */ .dwc-nest-menu .brx-dropdown-content > li:hover > .brx-submenu-toggle:not(.brx-has-megamenu *, .dwc-mobile .open.active > *), .dwc-nest-menu .brx-dropdown-content > li:hover > a:not(.brx-has-megamenu a){ background-color: var(--dropdown-item-hover-bg) ; color: var(--dropdown-item-hover-clr); } .dwc-nest-menu.brxe-nav-nested .brx-submenu-toggle { justify-content: space-between; } /* DROPDOWN INDENT */ :is(.dwc-mobile, .brx-header-left, .brx-header-right, body:has([data-offcanvas="true"])) :is([data-submenu-reveal="expand"]) .brxe-dropdown:not(.brx-has-megamenu) > .brx-dropdown-content:not(.brxe-dropdown[data-submenu-reveal="slide"] *) { padding-inline-start: var(--dropdown-indent) !important; padding-inline-end: calc(var(--dropdown-indent) * 0) !important; border-left: var(--dropdown-indent-line); background-color: var(--dropdown-indent-bg) } :is(.dwc-mobile, .brx-header-left, .brx-header-right, body:has([data-offcanvas="true"])) :is([data-submenu-reveal="expand"]) .brxe-dropdown:not(.brx-has-megamenu) > .brx-dropdown-content:not(.brxe-dropdown[data-submenu-reveal="slide"] *) > * > :is(a, .brx-submenu-toggle){ padding-inline-start: calc(var(--dropdown-item-inline-padding) * var(--dropdown-indent-item-pad-offset)) !important; } :is(.dwc-mobile, .brx-header-left, .brx-header-right, body:has([data-offcanvas="true"])) :is([data-submenu-reveal="expand"]) .open.active.brxe-dropdown > .brx-submenu-toggle svg:not(.open.active.brxe-dropdown:hover > .brx-submenu-toggle svg){ color: var(--dropdown-expanded-clr); } /* MENU ITEMS COLOR */ .dwc-nest-menu .brx-nav-nested-items > li .brx-submenu-toggle :where(span, a, svg) { color: inherit; font-weight: inherit; } /* CHEVRON */ .dwc-nest-menu .brx-nav-nested-items > li:not(li:has([aria-current="page"]:not(.dwc-exclude)), li:hover) .brx-submenu-toggle svg{ color: var(--chevron-clr); } .dwc-nest-menu .brx-nav-nested-items > li .brx-submenu-toggle svg{ font-size: var(--chevron-size); color: var(--chevron-clr); } .dwc-nest-menu .brx-nav-nested-items > li:has([aria-current="page"]:not(.dwc-exclude)) > .brx-submenu-toggle svg, .dwc-nest-menu .brx-nav-nested-items li:hover > .brx-submenu-toggle svg{ color: var(--chevron-hover-clr); } [data-align-dropdown-top="true"] .brx-dropdown-content .brxe-dropdown { position: static; } .brx-dropdown-content:not(.brx-has-megamenu .brx-dropdown-content) { padding-inline-end: 0 !important; } /*OVERLAY*/ html:not(.dwc-mobile) :is(.brx-header-left, .brx-header-right):not([data-builder-window]) :is(.brxe-code, .dwc-nest-menu-overlay), body:has([data-hide-overlay="true"]) .dwc-nest-menu-overlay, [data-builder-mode] .dwc-nest-menu-overlay { display: none; } .bricks-is-frontend #brx-header .dwc-nest-menu[data-offcanvas="true"]:not([data-submenu-reveal = 'slide']) .brxe-dropdown:not(.open.active) > .brx-dropdown-content > .brxe-dropdown:not([data-submenu-reveal = 'slide'] *){ visibility: hidden; } /* builder */ [data-builder-mode] [data-offcanvas="true"] .dwc-nest-menu-top { min-block-size: 80px !important; } /* ===========DESKTOP ONLY ============== */ :is( html:not(.dwc-mobile) .dwc-nest-header:not([data-overlay-header="true"]) [data-mobile-top-transparent="true"]) :is(.dwc-nest-menu-top:not([data-below-header="true"] *, :has(.open.active)), .dwc-nav-wrapper:not([data-below-header="true"] *, :has(.open.active))) { background-color: transparent !important; } html:not(.dwc-mobile):has(:is([data-last-item-is-button-alignment="center"], [data-last-item-is-button-alignment="left"])[data-last-item-is-button="true"]) :is(.dwc-menu-wrap, .dwc-nest-menu){ inline-size: 100%; } html:not(.dwc-mobile) [data-last-item-is-button-alignment="center"][data-last-item-is-button="true"].dwc-nest-menu:not(.brx-open) .dwc-nest-nav-items > li:is(:last-of-type, :first-of-type){ margin-inline-start: auto; } html:not(.dwc-mobile) [data-last-item-is-button-alignment="left"][data-last-item-is-button="true"].dwc-nest-menu:not(.brx-open) .dwc-nest-nav-items > li:is(:last-of-type) { margin-inline-start: auto; } html:not(.dwc-mobile) .dwc-nest-tooltip { display: none !important; clip: rect(1px,1px,1px,1px); word-wrap: normal!important; border: 0; clip-path: inset(50%); height: 1px !important; margin: -1px; overflow: hidden; overflow-wrap: normal!important; padding: 0 !important; width: 1px; } html:not(.dwc-mobile) .open:has(.open) .open:has(.brxe-dropdown:hover) .brx-dropdown-content:not(.brx-header-left *, .brx-header-right *, [data-offcanvas="true"] *) { box-shadow: 0px 10px 30px -10px rgba(0, 0, 0, 30%); } html:not(.dwc-mobile) :is(.brx-header-left, .brx-header-right) .brxe-nav-nested .brxe-dropdown.open>.brx-dropdown-content { display: flex; min-width: auto; opacity: 1; overflow-y: auto; position: static; visibility: visible; } /* EXTEND DROPDWON BUTTON TO AVOID LOSING FOCUS/CLOSING ON DROPDOWN CONTENT */ html:not(.dwc-mobile) body:not(.brx-header-right, .brx-header-left) .dwc-nest-menu:not([data-offcanvas="true"]) .open .brx-dropdown-content .brxe-dropdown:has( > .brx-sub-submenu-overflow-right):hover::after { inset-inline-end: 100%; inset-inline-start: auto; } html:not(.dwc-mobile) body:not(.brx-header-right, .brx-header-left) .dwc-nest-menu:not([data-offcanvas="true"]) .open .brx-dropdown-content .brxe-dropdown:not(.brxe-dropdown:has( > .brx-sub-submenu-overflow-right)):hover::after { inset-inline-start: 100%; } html:not(.dwc-mobile) body:not(.brx-header-right, .brx-header-left) .dwc-nest-menu:not([data-offcanvas="true"]) .open .brx-dropdown-content .brxe-dropdown:hover::after { content: ""; position: absolute; inset-block-end: 0; block-size: 100%; inline-size: 100%; z-index: -1; inset-inline-end: auto; } /*DIM DROPDOWN PARENT WHOSE CHILD DROPDOWN CONTENT IS SHOWING */ html:not(.dwc-mobile) .open:has(.open) > .brx-dropdown-content:not(.brx-header-left *, .brx-header-right *)::before { content: ""; position: absolute; inset: 0; background-color: var(--dropdown-inactive-overlay); pointer-events: none; border-radius: var(--dropdown-content-border-radius); z-index: 1; } html:not(.dwc-mobile) .open:has(.open) > .brxe-dropdown:not(.open, .brx-header-left *, .brx-header-right *){ position: static; } html:not(.dwc-mobile) .open:has(.open) > .brxe-dropdown:not(.open, .brx-header-left *, .brx-header-right *) > ul{ opacity: 0; transition: 0s } html:not(.dwc-mobile) .brxe-dropdown.open:not(.brx-has-megamenu, .brx-header-left *, .brx-header-right *){ z-index: 1; } /* LAST BUTTON LEFT PADDDING ON DESKTOP */ html:not(.dwc-mobile) [data-last-item-is-button="true"].dwc-nest-menu .brx-nav-nested-items > .menu-item:last-of-type { padding-inline-start: var(--menu-item-inline-padding); } /* hide toggle with back button appears */ html:not(.dwc-mobile) body:has(.brxe-dropdown.open) [data-offcanvas="true"] .brxe-toggle[aria-label="Open Menu"] { z-index: 1; } /* fades in close button when the main toggle is covered by the back button */ html:not(.dwc-mobile) body:has(.brxe-dropdown.open) [data-offcanvas="true"] .brxe-toggle[aria-label="Close Menu"]:not([data-submenu-reveal="expand"] *){ opacity: 1; } html:not(.dwc-mobile) [data-mobile-top-transparent="true"][data-offcanvas="true"]:not([data-show-mobile-logo="true"]) .brxe-toggle[aria-label="Close Menu"] { opacity: 0; } html:not(.dwc-mobile) [data-show-mobile-logo="true"] .dwc-nav-wrapper{ z-index: 9999 } html:not(.dwc-mobile) [data-offcanvas="true"].dwc-nest-menu .brxe-toggle { display: flex; } /* STRIPE STYLE */ html:not(.dwc-mobile) .dwc-stripe-style .brxe-dropdown.brx-has-megamenu .brx-dropdown-content:not([data-offcanvas="true"] .brx-has-megamenu .brx-dropdown-content, .brx-header-left .brx-has-megamenu .brx-dropdown-content, .brx-header-right .brx-has-megamenu .brx-dropdown-content) { background: transparent !important; } html:not(.dwc-mobile) .dwc-stripe-style .brx-has-megamenu > .brx-submenu-toggle:not([data-offcanvas="true"] .brx-submenu-toggle, .brx-header-left .brx-submenu-toggle, .brx-header-right .brx-submenu-toggle), html:not(.dwc-mobile) .dwc-stripe-style .brx-has-megamenu > .brx-submenu-toggle:not([data-offcanvas="true"] .brx-submenu-toggle, .brx-header-left .brx-submenu-toggle, .brx-header-right .brx-submenu-toggle) > a, html:not(.dwc-mobile) .dwc-stripe-style .brx-has-megamenu > .brx-submenu-toggle:not([data-offcanvas="true"] .brx-submenu-toggle, .brx-header-left .brx-submenu-toggle, .brx-header-right .brx-submenu-toggle) > button { cursor: default; } /* handles translate and opacity animation for stripe style on desktop - NEW */ html:not(.dwc-mobile) .dwc-stripe-style .brx-has-megamenu.open .brx-dropdown-content:not([data-offcanvas="true"] .brx-has-megamenu .brx-dropdown-content, .brx-header-left .brx-has-megamenu .brx-dropdown-content, .brx-header-right .brx-has-megamenu .brx-dropdown-content) > * > *{ transform: translateX(0); } html:not(.dwc-mobile) .dwc-stripe-style .brx-has-megamenu .brx-dropdown-content:not([data-offcanvas="true"] .brx-has-megamenu .brx-dropdown-content, .brx-header-left .brx-has-megamenu .brx-dropdown-content, .brx-header-right .brx-has-megamenu .brx-dropdown-content) > * > *{ transition: transform 0.4s; } html:not(.dwc-mobile) .dwc-stripe-style .brx-has-megamenu.open + .brx-has-megamenu .brx-dropdown-content:not([data-offcanvas="true"] .brx-has-megamenu .brx-dropdown-content, .brx-header-left .brx-has-megamenu .brx-dropdown-content, .brx-header-right .brx-has-megamenu .brx-dropdown-content) > * > *{ transform: translateX(50px); } html:not(.dwc-mobile) .dwc-stripe-style .brx-has-megamenu:has(+ .brx-has-megamenu.open) .brx-dropdown-content:not([data-offcanvas="true"] .brx-has-megamenu .brx-dropdown-content, .brx-header-left .brx-has-megamenu .brx-dropdown-content, .brx-header-right .brx-has-megamenu .brx-dropdown-content) > * > *{ transform: translateX(-50px); } html:not(.dwc-mobile) .dwc-stripe-style .brx-has-megamenu.open .brx-dropdown-content:not([data-offcanvas="true"] .brx-has-megamenu .brx-dropdown-content, .brx-header-left .brx-has-megamenu .brx-dropdown-content, .brx-header-right .brx-has-megamenu .brx-dropdown-content) > * { overflow-x: hidden; } /* mobile logo */ html:not(.dwc-mobile) .dwc-nest-menu__mobile-logo:not([data-offcanvas="true"]:not(.brx-header-left *, .brx-header-right *) .dwc-nest-menu__mobile-logo) { display: none; } /* prevent fouc when offcanvas is enabled and anime height */ body.bricks-is-frontend:has([data-offcanvas="true"]) .dwc-nav-wrapper:not(.sidebar-ready .dwc-nav-wrapper){ display: none; } .dwc-mobile [data-hide-close-bar = 'true'] .dwc-nav-wrapper{ inset-block-start: var(--dwc-nest-header-height) } :is(.brx-header-left, .brx-header-right) .dwc-nest-header::before{ display: none; } /* mobile menu from top behind header */ /* .dwc-mobile :is([data-slide-in-direction="top"], [data-slide-in-direction="top left"]) .dwc-nav-wrapper { z-index: -1; } */ .dwc-mobile :is([data-slide-in-direction="top"], [data-slide-in-direction="top left"]) .dwc-nav-wrapper:not(:has(.brxe-dropdown.open)), .dwc-mobile [data-overlay-header-mobile="true"] :is([data-slide-in-direction="top"], [data-slide-in-direction="top left"]) .dwc-nav-wrapper{ z-index: -1; } .dwc-mobile .bricks-is-frontend #brx-header > .dwc-nest-header[data-overlay-header-mobile="true"]:not(:has([data-offcanvas="true"]))::before { backdrop-filter: blur(var(--overlay-header-blur)); content: ''; position: absolute; inset: 0; z-index: -1; border-radius: var(--overlay-header-radius); } .dwc-mobile :is([data-slide-in-direction="top"], [data-slide-in-direction="top left"]):not([data-match-overlay-header-width="true"], [data-submenu-reveal="expand"]) .dwc-nav-wrapper:has(.brxe-dropdown.open.active) { z-index: unset !important; } .dwc-mobile .dwc-nest-header:not([data-allow-overlay-mobile-opacity="true"]) .dwc-nest-header__container:has(:is([data-slide-in-direction="top"], [data-slide-in-direction="top left"])) { background-color: var(--header-bg) } /************************************ MENU HEIGHT/ STRIPE STYLE ************************************/ :is([data-builder-mode], .brx-header-right, .brx-header-left) .dwc-nest-header::after, body:has([data-offcanvas="true"]) .dwc-nest-header::after { display: none; } .dwc-nest-header:not(:is(.dwc-adaptive-height, .dwc-stripe-style) .dwc-nest-header)::after{ display: none; } html:not(.dwc-mobile) .dwc-nest-header::after { display: none; content: ''; min-block-size: 0; inset-inline-start: 0; inline-size: 100%; transition-delay: 0.1s !important; pointer-events: none; transition: inline-size 0.2s, block-size 0.2s, opacity 0.2s, inset-inline-start 0.2s, transform 0.2s !important; will-change: block-size, inline-size, inset-inline-start, transform, opacity; contain: layout paint; z-index: -1; } html:not(.dwc-mobile) .dwc-nest-header[data-overlay-header="true"][data-overlay-header-optimize-adaptive-height="true"]::after { position: fixed; } html:not(.dwc-mobile) .dwc-adaptive-height:not(.dwc-stripe-style) .dwc-nest-header[data-overlay-header="true"][data-overlay-header-optimize-adaptive-height="true"]::after { inset-block-start: 0; } html:not(.dwc-mobile) .dwc-nest-header:not([data-overlay-header="true"][data-overlay-header-optimize-adaptive-height="true"])::after { position: absolute; inset-block-end: calc(100% - var(--dwc-nest-header-height)); block-size: 1000px; transform: translateY(calc(var(--dropdown-menu-height) * 1.01)) translateZ(0); } html:not(.dwc-mobile) .adaptive-height-active:is(.dwc-stripe-style, .dwc-adaptive-height) .dwc-nest-header::after { display: block; } .dwc-nest-menu .brx-has-megamenu .brx-dropdown-content:not(.show-nav .brx-dropdown-content, [data-builder-mode] .brx-dropdown-content){ display:none } html:not(.dwc-mobile) body:has(.brx-has-megamenu.open) .dwc-nest-header::after { transition-delay: 0s !important; } /* STRIPE STYLE */ html:not(.dwc-mobile) .dwc-stripe-style.bricks-is-frontend .brx-has-megamenu .brx-dropdown-content:not([data-offcanvas="true"] .brx-dropdown-content), html:not(.dwc-mobile) .dwc-adaptive-height.bricks-is-frontend .brx-has-megamenu .brx-dropdown-content:not([data-offcanvas="true"] .brx-dropdown-content) { transition-delay: 0s; box-shadow: none !important; transition-duration: 0s; } html:not(.dwc-mobile) .dwc-stripe-style.bricks-is-frontend .brx-has-megamenu .brx-dropdown-content:not([data-offcanvas="true"] .brx-dropdown-content) { overflow-x: hidden; } html:not(.dwc-mobile) .dwc-stripe-style .open.brx-has-megamenu .brx-dropdown-content:not([data-offcanvas="true"] .brx-dropdown-content), html:not(.dwc-mobile) .dwc-adaptive-height .open.brx-has-megamenu .brx-dropdown-content:not([data-offcanvas="true"] .brx-dropdown-content) { transition-delay: 0.1s; transition-duration: .2s; } html:not(.dwc-mobile) .dwc-stripe-style .open.brx-has-megamenu:not([data-offcanvas="true"] .brx-has-megamenu)::before { content: ''; position: absolute; inset-block-start: 100%; block-size: calc(var(--dwc-nest-header-height)* 0.5); inline-size: min(var(--dropdown-menu-width), 40vw); transform: translateX(-50%); inset-inline-start: 0; } html:not(.dwc-mobile) .dwc-stripe-style .brx-nav-nested-items>.brxe-dropdown.brx-has-megamenu>.brx-dropdown-content:not([data-offcanvas="true"] .brx-dropdown-content) { overflow-x: hidden; border-radius: var(--stripe-border-radius); } html:not(.dwc-mobile) .dwc-nest-header { position: relative; } html:not(.dwc-mobile) .dwc-stripe-style .dwc-nest-header::before { content: ''; inline-size: calc(max(var(--dropdown-content-gap) + 2.5px, 16px) * 1.1); block-size: calc(max(var(--dropdown-content-gap) + 2.5px, 16px) * 1.1); background-color: var(--adaptive-height-bg); position: absolute; inset-block-start: 100%; transition: 0s; transition-property: inset-inline-start, transform, opacity; inset-inline-start: var(--navlink-midpoint); transform: translateX(0%) rotate(45deg) translateY(calc(50% + 1px)); pointer-events: none; border-top: var(--adaptive-height-border); border-left: var(--adaptive-height-border); z-index: 999; } html:not(.dwc-mobile) .dwc-stripe-style .dwc-nest-header:has(.brxe-dropdown.brx-has-megamenu.open:hover)::before { transition: opacity 0.2s 0.1s, transform 0.2s 0s, inset-inline-start 0.2s 0s; } html:not(.dwc-mobile) .dwc-nest-header::before{ opacity: 0 ; } html:not(.dwc-mobile) .dwc-nest-header.hide-menu-animation::after { opacity: 0 !important; } html:not(.dwc-mobile) .dwc-stripe-style .dwc-nest-header.show-menu-animation:has(.brx-has-megamenu:hover)::before, html:not(.dwc-mobile) .dwc-nest-header.show-menu-animation::after, html:not(.dwc-mobile) #brx-header.show-menu-animation .dwc-nest-header::after { opacity: 1; } html:not(.dwc-mobile) .dwc-nest-header.show-menu-animation::after, html:not(.dwc-mobile) #brx-header.show-menu-animation .dwc-nest-header::after { box-shadow: var(--adaptive-height-shadow) } html:not(.dwc-mobile) .dwc-stripe-style .dwc-nest-header::after { border: var(--adaptive-height-border); } html:not(.dwc-mobile) .dwc-stripe-style .dwc-nest-header::after { inset-inline-start: calc(var(--dropdown-menu-x) - 2.5rem); inline-size: calc(var(--dropdown-menu-width) + 5rem); transform: unset; inset-block-start: calc(var(--dwc-header-div-height) + max(var(--dropdown-content-gap), 16px)); block-size: var(--dropdown-menu-height); z-index: 1; opacity: 0; } html:not(.dwc-mobile) .dwc-stripe-style:has(.brx-has-megamenu.open):not(:has([data-optimize-stripe=true])) .dwc-nest-header::after { block-size: calc(var(--dropdown-menu-height) + 0rem) !important; opacity: 1; } /* hide nav content until js is ready*/ html:not(.dwc-mobile) .dwc-stripe-style .brx-has-megamenu>.brx-dropdown-content:not(.show-nav .brx-dropdown-content, [data-offcanvas="true"] .brx-dropdown-content) { opacity: 0; } body:has(.brx-has-megamenu.open) .sticky .dwc-nest-header::after { background-color: var(--adaptive-height-bg) !important; } body:has(.brx-has-megamenu.open) .brx-sticky .dwc-nest-header::after { background-color: var(--adaptive-height-bg) !important; } .dwc-nest-header::after { background-color: var(--adaptive-height-bg) !important; /* opacity: 0; */ } html:not(.dwc-mobile) .dwc-stripe-style:has([data-optimize-stripe=true]) .dwc-nest-header::after { inset-inline-start: calc(var(--dropdown-menu-x) - 1.5px); inline-size: calc(var(--dropdown-menu-width) + 2.5px); /*transform: unset;*/ block-size: calc(var(--dropdown-menu-height) + 3px) !important; z-index: 1; border-radius: var(--stripe-border-radius); transform: translateZ(0); opacity: 1 } html:not(.dwc-mobile) .dwc-stripe-style:has([data-optimize-stripe=true]) .dwc-nest-header::after { border: var(--adaptive-height-border); } html:not(.dwc-mobile) :not(.brx-header-left, .brx-header-right).dwc-stripe-style:has([data-optimize-stripe=true]) .brx-nav-nested-items>.brxe-dropdown.brx-has-megamenu>.brx-dropdown-content:not([data-offcanvas="true"] .brx-dropdown-content) { transform: translateY(16px) !important; inset-block-start: 100%; } .dwc-nest-header:not(.show-nav .dwc-nest-header)::after { display: none; } /* STRIP FIX FOR DYNAMIC NAV */ html:not(.dwc-mobile) :not(.brx-header-left, .brx-header-right).dwc-stripe-style:has([data-optimize-stripe=true]) .brx-nav-nested-items> li > .brxe-dropdown.brx-has-megamenu>.brx-dropdown-content:not([data-offcanvas="true"] .brx-dropdown-content) { transform: translateY(max(calc(var(--dropdown-content-gap) + 2.5px), 17px)) !important; inset-block-start: 100%; } html:not(.dwc-mobile) .dwc-stripe-style .show-menu-animation .dwc-nest-header:has(.brx-has-megamenu:hover)::before, html:not(.dwc-mobile) .show-menu-animation::after, html:not(.dwc-mobile) .show-menu-animation .dwc-nest-header::after { opacity: 1; } html:not(.dwc-mobile) .hide-menu-animation .dwc-nest-header::after { opacity: 0 !important; } html:not(.dwc-mobile) .dwc-stripe-style:has([data-optimize-stripe=true]) .dwc-nest-header::after { block-size: calc(var(--dropdown-menu-height) + 6px) !important; } /**************** MENU OVERLAY ***************/ .dwc-nest-menu-overlay { position: fixed; inline-size: 100%; block-size: 100%; inset-inline-start: 0; inset-block-end: 0; background: var(--nav-overlay-backdrop-clr) !important; z-index: 2; opacity: 0; transition: 0.4s; backdrop-filter: blur(var(--nav-overlay-backdrop-blur)); } html:not(.dwc-mobile) .dwc-nest-header:has(.dwc-nest-menu-overlay) .brxe-nav-nested{ z-index: 3 } [data-overlay-header=true].dwc-nest-header .dwc-nest-menu-overlay{ display: none; } body:not(:has([data-overlay-header-optimize-adaptive-height="true"][data-overlay-header="true"])) .dwc-nest-menu-overlay { inset-block-start: var(--dwc-nest-header-height); } .logged-in:not(:has([data-overlay-header-optimize-adaptive-height="true"][data-overlay-header="true"])) .dwc-nest-menu-overlay:not(:has(+ .x-header)) { inset-block-start: calc(var(--dwc-nest-header-height) + var(--wp-admin--admin-bar--height, 0px)); } body:has([data-overlay-header-optimize-adaptive-height="true"][data-overlay-header="true"], [data-overlay-on-header="true"]) .dwc-nest-menu-overlay { inset-block-start: 0 !important; } .dwc-nest-menu-overlay { pointer-events: none; } .no-scroll .dwc-nest-menu-overlay { opacity: 1; } :is(.brx-header-right, .brx-header-left) .dwc-nest-header__container { padding-inline: 0 } /*fade in back button*/ @-webkit-keyframes dwc-nest-fade-in { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes slide-in-right { 0% { opacity: 0; } 100% { opacity: 1; } } /* configurable menu and submenu slide out speed */ .dwc-mobile .bricks-is-frontend [data-submenu-reveal="slide"].dwc-nest-menu :is(.brx-dropdown-content, .dwc-nav-wrapper), .bricks-is-frontend :is([data-submenu-reveal="slide"][data-offcanvas="true"]).dwc-nest-menu :is(.brx-dropdown-content, .dwc-nav-wrapper), :is(.bricks-is-frontend.brx-header-right, .bricks-is-frontend.brx-header-left) :is([data-submenu-reveal="slide"]).dwc-nest-menu :is(.brx-dropdown-content, .dwc-nav-wrapper){ transition-duration: calc(0.5s / var(--slide-out-speed)) !important; } #brx-header{ --content-gap: 0; --at-container-gap: 0; } /* overlay header */ html:not(.dwc-mobile) .bricks-is-frontend #brx-header:has([data-overlay-header = "true"]) { padding: var(--overlay-header-inset); } html:not(.dwc-mobile) .bricks-is-frontend #brx-header:has([data-overlay-header = "true"]):not(.sticky, .brx-sticky) { position: absolute; inset-block-start: 0; inset-inline: 0; } html:not(.dwc-mobile) .bricks-is-frontend #brx-header > .dwc-nest-header[data-overlay-header = "true"]{ border-radius: var(--overlay-header-radius); background-color: var(--overlay-header-bg); box-shadow: var(--overlay-header-shadow); max-inline-size: var(--overlay-header-width); } html:not(.dwc-mobile) .bricks-is-frontend #brx-header > .dwc-nest-header[data-overlay-header = "true"]:not(:has([data-offcanvas="true"])){ backdrop-filter: blur(var(--overlay-header-blur)); } html:not(.dwc-mobile) .bricks-is-frontend #brx-header:has(.open) > .dwc-nest-header[data-overlay-header = "true"]{ background-color: var(--overlay-header-bg-active) !important; } /* overlay on mobile */ .dwc-mobile .bricks-is-frontend #brx-header:has([data-overlay-header-mobile = "true"]) { padding: var(--overlay-header-inset); } .dwc-mobile .bricks-is-frontend #brx-header:has([data-overlay-header-mobile = "true"]):not(.sticky, .brx-sticky) { position: absolute; inset-block-start: 0; inset-inline: 0; } .dwc-mobile .bricks-is-frontend #brx-header > .dwc-nest-header[data-overlay-header-mobile = "true"]{ border-radius: var(--overlay-header-radius); background-color: var(--overlay-header-bg); box-shadow: var(--overlay-header-shadow); max-inline-size: var(--overlay-header-width); } /*offset hero top padding when overlay header is active */ #brx-header:has([data-offset-section-padding="true"]) + main > :is(section:first-child, div:first-child) { padding-block-start: var(--overlay-offset-padding); } /* menu height anime on overlay header */ html:not(.dwc-mobile) .bricks-is-frontend.dwc-adaptive-height:not(.dwc-stripe-style) #brx-header:has([data-overlay-header = "true"]) .dwc-nest-header::after { border-radius: min(var(--overlay-header-radius), 2em); inset-block-end: calc(100% + var(--overlay-header-inset)); opacity: 1; } html:not(.dwc-mobile) .bricks-is-frontend:is(.dwc-adaptive-height):not(.dwc-stripe-style) #brx-header:has([data-overlay-header = "true"]:not([data-overlay-header-optimize-adaptive-height="true"])) .dwc-nest-header.show-menu-animation::after, html:not(.dwc-mobile) .bricks-is-frontend:is(.dwc-adaptive-height):not(.dwc-stripe-style) #brx-header.show-menu-animation:has([data-overlay-header = "true"]:not([data-overlay-header-optimize-adaptive-height="true"])) .dwc-nest-header::after { transform: translateY( calc((var(--dropdown-menu-height) + (var(--dwc-nest-header-height) * 1.5)))) translateZ(0) } html:not(.dwc-mobile) .bricks-is-frontend:is(.dwc-adaptive-height):not(.dwc-stripe-style) #brx-header:has([data-overlay-header="true"][data-overlay-header-optimize-adaptive-height="true"]) .dwc-nest-header.show-menu-animation::after, html:not(.dwc-mobile) .bricks-is-frontend:is(.dwc-adaptive-height):not(.dwc-stripe-style) #brx-header.show-menu-animation:has([data-overlay-header="true"][data-overlay-header-optimize-adaptive-height="true"]) .dwc-nest-header::after { block-size: calc((var(--dropdown-menu-height) + (var(--dwc-nest-header-height) * 1.5))); } /* we need to reposition the overlay outside the header */ html:not(.dwc-mobile) .bricks-is-frontend:has( .dwc-nest-menu .open):not(:has([data-offcanvas="true"])) .dwc-nest-menu-overlay{ opacity: 1; } /*menu items border radius desktop only*/ html:not(.dwc-mobile) .dwc-nest-menu .brx-nav-nested-items > li > :is(a:not([data-last-item-is-button="true"] .brx-nav-nested-items > .menu-item:last-of-type a, [data-last-item-is-button="true-2"] .brx-nav-nested-items > .menu-item:nth-last-of-type(-n+2) a, [data-last-item-is-button="true-3"] .brx-nav-nested-items > .menu-item:nth-last-of-type(-n+3) a, .dwc-nest-menu__logo ), .brx-submenu-toggle){ border-radius: var(--menu-item-radius); } html:not(.dwc-mobile) .dwc-nest-menu .brx-nav-nested-items { gap: var(--menu-items-gap); } /* dynamic dropdown conten width and position */ html:not(.dwc-mobile) :is(:not(.brx-header-left, .brx-header-right)).bricks-is-frontend .dwc-nest-menu:not([data-offcanvas="true"]) .brx-has-megamenu .brx-dropdown-content:not([data-use-selector="true"]) { min-inline-size: var(--dropdown-content-width, var(--dropdown-content-default-width)) !important; inset-inline-start: var(--left-position)!important; } html:not(.dwc-mobile) :is(:not(.brx-header-left, .brx-header-right)).bricks-is-frontend .dwc-nest-menu:not([data-offcanvas="true"]) .brx-dropdown-content { border-radius: var(--dropdown-content-border-radius); } .dwc-nest-header{ position: relative; z-index: 999; } /* optimize multi row header*/ .dwc-mobile .dwc-nest-header[data-fullscreen-mobile-menu="true"]{ --dwc-nest-header-height:var(--dwc-header-div-height) !important } .dwc-mobile .dwc-nest-header[data-fullscreen-mobile-menu="true"] .dwc-nest-menu-top:not([data-below-header="true"] *) { background-color: var(--mobile-menu-topbar-bg) !important; align-items: center !important; animation: none !important; } .dwc-mobile .dwc-nest-header[data-fullscreen-mobile-menu="true"] .dwc-nav-wrapper{ z-index: 99999 } .dwc-mobile .dwc-nest-header[data-fullscreen-mobile-menu="true"] .dwc-nest-menu-top .brxe-toggle { display: block; } .dwc-mobile .dwc-nest-header[data-fullscreen-mobile-menu="true"]:not([data-hide-mobile-logo="true"]) .dwc-nest-menu__mobile-logo { display: flex; } /* overlay header on multirow*/ html:not(.dwc-mobile) .dwc-nest-header[data-fullscreen-mobile-menu="true"][data-overlay-header="true"] > div:first-child{ border-top-left-radius: var(--overlay-header-radius); border-top-right-radius: var(--overlay-header-radius); } /* BricksExtras support*/ html:not(.dwc-mobile) #brx-header .brxe-xheaderrow:has(.dwc-nest-header){ position: relative; z-index:1; } html:not(.dwc-mobile) #brx-header .brxe-xheaderrow:first-child{ position: relative; z-index: 99991; } [data-x-overlay]:not([data-x-overlay="none"]) .dwc-nest-header{ background: var(--x-overlay-header-background)!important; } html:not(.dwc-mobile) .brxe-xheaderrow .dwc-nest-header::after { block-size: 1000px; } /* in builder */ [data-builder-mode] .brx-open.dwc-nest-menu[data-offcanvas="true"] .brx-nav-nested-items { inline-size: var(--mobile-menu-width); } [data-builder-mode] [data-offcanvas="true"] .dwc-nest-toggle--open{ display: none !important; } [data-builder-mode] [data-offcanvas="true"] .dwc-nest-menu-top{ display: none; } :is(.brx-header-left, .brx-header-right) [data-builder-mode] .brx-nav-nested-items, [data-builder-mode] .brx-open.dwc-nest-menu[data-offcanvas="true"] .brx-nav-nested-items { overflow-y: auto; scrollbar-width: thin !important; justify-content: flex-start !important; box-shadow: var(--sidebar-shadow); } :is(.brx-header-left, .brx-header-right) [data-builder-mode] .dwc-nav-wrapper, [data-builder-mode] [data-offcanvas="true"] .dwc-nav-wrapper { inset-inline-end: auto ; inset-inline-start: 0; } /* preview dropdown content width in builder*/ [data-builder-mode]:not(.brx-header-left, .brx-header-right) .dwc-nest-menu:not(.brx-open) .brx-has-megamenu .brx-dropdown-content:not([data-offcanvas="true"] .brx-dropdown-content, .brx-open .brx-dropdown-content){ min-inline-size:var(--dropdown-content-width, var(--dropdown-content-default-width)) !important; transform: translatex(50px); border: dotted #00b0f4 2px } [data-builder-mode]:not(.brx-header-left, .brx-header-right) .dwc-nest-menu .brx-has-megamenu .brx-dropdown-content:not([data-offcanvas="true"] .brx-dropdown-content, .brx-open .brx-dropdown-content):not([data-hide-instruction="true"])::after{ content: 'Set dropdown Content width value in dropdown Content ATTRIBUTES > data-content-width, do not add a unit e.g. px. Leave empty to use global content width, set in Nav Nestable ATTRIBUTES > data-global-content-width. | Set alignment in ATTRIBUTES > data-content-align, values: left, right, center. This aligns the dropdown content to the dropdown button, leave empty to align center to the header. aligments are applied on frontend only. | TIP: click here to select dropdown Content'; position: absolute; inset-block-start: 102%; color: #e1e1e1; font-size: 12px; letter-spacing: 0.5px; line-height: 1.5; background: #2b2b2b; min-block-size: fit-content; padding: 1em; } /*set alignment for sidebar edit on desktop*/ :is(.brx-header-left, .brx-header-right)[data-builder-mode] .dwc-nest-menu.brxe-nav-nested .brx-nav-nested-items, [data-builder-mode] .dwc-nest-menu.brxe-nav-nested[data-offcanvas="true"] .brx-nav-nested-items { justify-content: flex-start !important; } [data-builder-mode]:is(.brx-header-left, .brx-header-right)::before { content: 'To view sidebar, go to the MENU Styles/Options code block CSS, scroll to the end, and replace all the postid-xxxx in the CSS rules with this template post id'; } :is(.brx-header-left, .brx-header-right)[data-builder-window] #brx-header .dwc-nest-menu:not(.brx-open)::after { content: 'To edit Sidebar, select the Nav (Nestable), go to the CONTENT tab > MOBILE MENU, enable "Keep open while styling" | TIP: click here to select Nav (Nestable)'; position: absolute; padding-inline-start: 20px; color: #e1e1e1; font-size: 12px; line-height: 1.5; background: #2b2b2b; min-block-size: fit-content; padding: 1em; inline-size: 250px; } .brx-header-left[data-builder-window] #brx-header .dwc-nest-menu:not(.brx-open)::after { inset-inline-start: 100%; } .brx-header-right[data-builder-window] #brx-header .dwc-nest-menu:not(.brx-open)::after { inset-inline-end: 100%; } [data-builder-window] #brx-header .dwc-nest-menu[data-offcanvas="true"]:not(.brx-open)::after{ content: 'To edit in Offcanvas mode, select the Nav (Nestable), go to the CONTENT tab > MOBILE MENU, enable "Keep open while styling" | TIP: click here to select Nav (Nestable)'; position: absolute; inset-block-start: 100%; padding-block-start: 20px; color: #e1e1e1; font-size: 12px; line-height: 1.5; background: #2b2b2b; min-block-size: fit-content; padding: 1em; inline-size: 250px; } @media (max-width: 1200px){ [data-builder-window] #brx-header .dwc-nest-menu[data-offcanvas="true"]:not(.brx-open)::after{ content: 'To edit in Offcanvas mode, select the Nav (Nestable), go to the CONTENT tab > MOBILE MENU, enable "Keep open while styling" '; position: absolute; inset-inline-start: var(--mobile-menu-width); padding-inline-start: 20px; } } [data-builder-mode] [data-offcanvas="true"]:not(.brx-open) .dwc-nav-wrapper { transform: translateX(0); visibility: visible; } [data-builder-window] [data-last-item-is-button="true"][data-offcanvas="true"].dwc-nest-menu .brx-nav-nested-items > .menu-item:last-of-type { padding-inline: var(--menu-item-inline-padding) !important; padding-block: var(--menu-item-block-padding) !important; } /* === */ :is(.brx-header-left, .brx-header-right)[data-builder-window] .brxe-nav-nested .brxe-dropdown .brx-dropdown-content:not(.brx-open .brx-dropdown-content) { display: none; } :is(.brx-header-left, .brx-header-right)[data-builder-window] #brx-header .dwc-nest-menu.brxe-nav-nested .brx-nav-nested-items { scrollbar-width: none; } /* stripe style fix*/ html:not(.dwc-mobile) .dwc-stripe-style:not(.brx-header-left, .brx-header-right) .dwc-nest-header__container:not(:has([data-offcanvas="true"])) { align-items: stretch !important; } html:not(.dwc-mobile) .dwc-stripe-style:not(.brx-header-left, .brx-header-right) .dwc-nest-menu:not([data-offcanvas="true"]) .dwc-nav-wrapper, html:not(.dwc-mobile) .dwc-stripe-style:not(.brx-header-left, .brx-header-right) .dwc-nest-menu:not([data-offcanvas="true"]) .brx-nav-nested-items, html:not(.dwc-mobile) .dwc-stripe-style:not(.brx-header-left, .brx-header-right) .dwc-nest-menu:not([data-offcanvas="true"]) .brx-nav-nested-items > .brxe-dropdown, html:not(.dwc-mobile) .dwc-stripe-style:not(.brx-header-left, .brx-header-right) .dwc-nest-menu:not([data-offcanvas="true"]) .brx-nav-nested-items > .brxe-dropdown > .brx-submenu-toggle, html:not(.dwc-mobile) .dwc-stripe-style:not(.brx-header-left, .brx-header-right) .dwc-nest-menu:not([data-offcanvas="true"]) .brx-nav-nested-items > li > a:not([data-last-item-is-button="true"] .menu-item:last-of-type a, [data-last-item-is-button="true-2"] .menu-item:nth-last-of-type(-n+2) a, [data-last-item-is-button="true-3"] .menu-item:nth-last-of-type(-n+3) a, .dwc-nest-menu__logo) /* a:not(:is([data-last-item-is-button="true"], [data-last-item-is-button="true-2"], [data-last-item-is-button="true-3"]).dwc-nest-menu .brx-nav-nested-items>:is(.menu-item:last-of-type, .menu-item:nth-last-of-type(-n+2), .menu-item:nth-last-of-type(-n+3)) a) */ { height: 100%; } html:not(.dwc-mobile) .dwc-stripe-style:not(.brx-header-left, .brx-header-right) .dwc-nest-menu:not([data-offcanvas="true"]) .brx-nav-nested-items > li.menu-item { height: 100%; display: flex; align-items: center; } /*fix overlay in boxed mode*/ .brx-boxed .dwc-nest-menu-overlay { inline-size: var(--boxed-width, 100%); inset-inline-start: 50%; transform: translateX(-50%); } /*wait for stripe style to load before active */ body:is(.dwc-stripe-style, .dwc-adaptive-height):not(.adaptive-height-active, .brx-header-right, .brx-header-left) .dwc-nest-menu:not([data-offcanvas="true"]) .brx-has-megamenu{ pointer-events: none; } /* LAST CTA BUTTONS */ /* Button styling for FRIST BUTTON*/ :is([data-last-item-is-button="true"], [data-last-item-is-button="true-2"], [data-last-item-is-button="true-3"]).dwc-nest-menu .brx-nav-nested-items > .menu-item:last-of-type a { color: var(--menu-cta-clr); background-color: var(--menu-cta-bg); border-radius: var(--menu-cta-radius) !important; padding-inline: var(--menu-cta-inline-padding) !important; padding-block: var(--menu-cta-block-padding) !important; border: var(--menu-cta-border); } :is([data-last-item-is-button="true"], [data-last-item-is-button="true-2"], [data-last-item-is-button="true-3"]).dwc-nest-menu .brx-nav-nested-items > .menu-item:nth-last-of-type(1) a:hover { color: var(--menu-cta-hover-clr); background-color: var(--menu-cta-hover-bg); } /* Button styling for second button*/ :is([data-last-item-is-button="true-2"], [data-last-item-is-button="true-3"]).dwc-nest-menu .brx-nav-nested-items > .menu-item:nth-last-of-type(2) a { color: var(--menu-cta-2-clr); background-color: var(--menu-cta-2-bg); border-radius: var(--menu-cta-2-radius) !important; padding-inline: var(--menu-cta-2-inline-padding) !important; padding-block: var(--menu-cta-2-block-padding) !important; border: var(--menu-cta-2-border); } :is([data-last-item-is-button="true-2"], [data-last-item-is-button="true-3"]).dwc-nest-menu .brx-nav-nested-items > .menu-item:nth-last-of-type(2) a:hover { color: var(--menu-cta-2-hover-clr); background-color: var(--menu-cta-2-hover-bg); } /* Button styling for third button */ [data-last-item-is-button="true-3"].dwc-nest-menu .brx-nav-nested-items > .menu-item:nth-last-of-type(3) a { color: var(--menu-cta-3-clr); background-color: var(--menu-cta-3-bg); border-radius: var(--menu-cta-3-radius) !important; padding-inline: var(--menu-cta-3-inline-padding) !important; padding-block: var(--menu-cta-3-block-padding) !important; border: var(--menu-cta-3-border); } [data-last-item-is-button="true-3"].dwc-nest-menu .brx-nav-nested-items > .menu-item:nth-last-of-type(3) a:hover { color: var(--menu-cta-3-hover-clr); background-color: var(--menu-cta-3-hover-bg); } /* Adjust padding for all variants in desktop mode */ html:not(.dwc-mobile) [data-last-item-is-button="true"].dwc-nest-menu .brx-nav-nested-items > .menu-item:last-of-type, html:not(.dwc-mobile) [data-last-item-is-button="true-2"].dwc-nest-menu .brx-nav-nested-items > .menu-item:nth-last-of-type(-n+2), html:not(.dwc-mobile) [data-last-item-is-button="true-3"].dwc-nest-menu .brx-nav-nested-items > .menu-item:nth-last-of-type(-n+3) { padding-inline-start: var(--menu-item-inline-padding); } /* Center alignment for single button case */ html:not(.dwc-mobile) [data-last-item-is-button-alignment="center"][data-last-item-is-button="true"].dwc-nest-menu:not(.brx-open) .dwc-nest-nav-items > li:is(:last-of-type, :first-of-type) { margin-inline-start: auto; } /* Center alignment for two buttons case */ html:not(.dwc-mobile) [data-last-item-is-button-alignment="center"][data-last-item-is-button="true-2"].dwc-nest-menu:not(.brx-open) .dwc-nest-nav-items > li:is(:nth-last-of-type(2), :first-of-type) { margin-inline-start: auto; } /* Center alignment for three buttons case */ html:not(.dwc-mobile) [data-last-item-is-button-alignment="center"][data-last-item-is-button="true-3"].dwc-nest-menu:not(.brx-open) .dwc-nest-nav-items > li:is(:nth-last-of-type(3), :first-of-type) { margin-inline-start: auto; } /* Left alignment for single button case */ html:not(.dwc-mobile) [data-last-item-is-button-alignment="left"][data-last-item-is-button="true"].dwc-nest-menu:not(.brx-open) .dwc-nest-nav-items > li:last-of-type { margin-inline-start: auto; } /* Left alignment for two buttons case */ html:not(.dwc-mobile) [data-last-item-is-button-alignment="left"][data-last-item-is-button="true-2"].dwc-nest-menu:not(.brx-open) .dwc-nest-nav-items > li:nth-last-of-type(2) { margin-inline-start: auto; } /* Left alignment for three buttons case */ html:not(.dwc-mobile) [data-last-item-is-button-alignment="left"][data-last-item-is-button="true-3"].dwc-nest-menu:not(.brx-open) .dwc-nest-nav-items > li:nth-last-of-type(3) { margin-inline-start: auto; } /* General width rule for all button cases and alignments */ html:not(.dwc-mobile):has(:is([data-last-item-is-button-alignment="center"], [data-last-item-is-button-alignment="left"]):is([data-last-item-is-button="true"], [data-last-item-is-button="true-2"], [data-last-item-is-button="true-3"])) :is(.dwc-menu-wrap, .dwc-nest-menu) { inline-size: 100%; } /* align dropdown content to bottom */ html:not(.dwc-mobile) .bricks-is-frontend:not(.brx-header-left, .brx-header-right) .dwc-nest-header__container:has([data-align-content-bottom="true"]):not(:has([data-offcanvas="true"])) { align-items: stretch !important; } html:not(.dwc-mobile) .bricks-is-frontend:not(.brx-header-left, .brx-header-right) .dwc-nest-menu[data-align-content-bottom="true"]:not([data-offcanvas="true"]) .dwc-nav-wrapper, html:not(.dwc-mobile) .bricks-is-frontend:not(.brx-header-left, .brx-header-right) .dwc-nest-menu[data-align-content-bottom="true"]:not([data-offcanvas="true"]) .brx-nav-nested-items, html:not(.dwc-mobile) .bricks-is-frontend:not(.brx-header-left, .brx-header-right) .dwc-nest-menu[data-align-content-bottom="true"]:not([data-offcanvas="true"]) .brx-nav-nested-items > .brxe-dropdown, html:not(.dwc-mobile) .bricks-is-frontend:not(.brx-header-left, .brx-header-right) .dwc-nest-menu[data-align-content-bottom="true"]:not([data-offcanvas="true"]) .brx-nav-nested-items > .brxe-dropdown > .brx-submenu-toggle, html:not(.dwc-mobile) .bricks-is-frontend:not(.brx-header-left, .brx-header-right) .dwc-nest-menu[data-align-content-bottom="true"]:not([data-offcanvas="true"]) .brx-nav-nested-items > li > a:not([data-last-item-is-button="true"] .menu-item:last-of-type a, [data-last-item-is-button="true-2"] .menu-item:nth-last-of-type(-n+2) a, [data-last-item-is-button="true-3"] .menu-item:nth-last-of-type(-n+3) a, .dwc-nest-menu__logo) /* a:not(:is([data-last-item-is-button="true"], [data-last-item-is-button="true-2"], [data-last-item-is-button="true-3"]).dwc-nest-menu .brx-nav-nested-items>:is(.menu-item:last-of-type, .menu-item:nth-last-of-type(-n+2), .menu-item:nth-last-of-type(-n+3)) a, .dwc-nest-menu__logo)*/ { height: 100%; } html:not(.dwc-mobile) .bricks-is-frontend:not(.brx-header-left, .brx-header-right) .dwc-nest-menu[data-align-content-bottom="true"]:not([data-offcanvas="true"]) .brx-nav-nested-items > li.menu-item { height: 100%; display: flex; align-items: center; } /* dropdown content gap */ html:not(.dwc-mobile) body:not(.brx-header-left, .brx-header-right) .dwc-nest-menu:not([data-offcanvas="true"]) .brxe-dropdown.open > .brx-dropdown-content:not(.brx-dropdown-content .brx-dropdown-content) { transform: translateY(calc(var(--caret-size) - var(--dropdown-content-border-size))) scaleX(1) scaleY(1); } html:not(.dwc-mobile) body:not(.brx-header-left, .brx-header-right) .dwc-nest-menu:not([data-offcanvas="true"]) .brxe-dropdown.open > .brx-dropdown-content .brx-dropdown-content{ transform: translateY(0) scaleX(1) scaleY(1); } html:not(.dwc-mobile) .brx-dropdown-content:not(.open .brx-dropdown-content){ --dropdown-content-border: solid transparent var(--dropdown-content-border-size); } html:not(.dwc-mobile) body:not(.brx-header-right, .brx-header-left) .dwc-nest-menu[data-align-content-bottom="true"][data-caret="true"]:not([data-offcanvas="true"]) .brx-nav-nested-items > .brxe-dropdown.open:not(.dwc-stripe-style .brx-has-megamenu)::after { inline-size: calc((var(--dropdown-content-gap) * 1.414) - var(--dropdown-content-border-size)); aspect-ratio: 1; opacity: 1; transition: opacity 0.2s 0.1s; } html:not(.dwc-mobile) body:not(.brx-header-right, .brx-header-left) .dwc-nest-menu[data-align-content-bottom="true"][data-caret="true"]:not([data-offcanvas="true"]) .brx-nav-nested-items > .brxe-dropdown:not(.dwc-stripe-style .brx-has-megamenu)::after { content: ''; position: absolute; background-color: var(--dropdown-content-bg); transform: rotate(45deg); inset-block-end: calc((-1 * var(--dropdown-content-gap) - (var(--dropdown-content-gap) * 1.414 / 2.0)) + var(--dropdown-content-border-size)); inset-inline-start: calc(50% - var( --dropdown-content-gap)); opacity: 0; } html:not(.dwc-mobile) body:not(.brx-header-right, .brx-header-left) .dwc-nest-menu:not([data-offcanvas="true"]) .brx-nav-nested-items > .brxe-dropdown:not(.dwc-stripe-style .brx-has-megamenu)::after { border-top: var(--dropdown-content-border); border-left: var(--dropdown-content-border); z-index: 9999; inset-block-end: calc(var(--dropdown-content-gap) * -1.55); } html:not(.dwc-mobile) body:not(.brx-header-left, .brx-header-right) .dwc-nest-menu:not([data-offcanvas="true"]) .brx-nav-nested-items > .brxe-dropdown:not(.dwc-stripe-style .brx-has-megamenu) .brx-dropdown-content{ outline: var(--dropdown-content-border); } /* === ends == */ body:not(.adaptive-height-active) .brxe-dropdown::after{ display: none; } /* multi-level dropdwon arrow > */ html:not(.dwc-mobile) body:not(.brx-header-left, .brx-header-right) .dwc-nest-menu:not([data-offcanvas="true"]) .brxe-dropdown:not(.brx-has-megamenu) .brxe-dropdown .brx-submenu-toggle button svg { transform: rotate(270deg); } /* align dropwdown in builder */ [data-builder-mode]:not(.brx-header-left, .brx-header-right) .brx-has-megamenu .brx-dropdown-content[data-content-align="left"][preview-alignment="true"]{ left: 0 !important; right: auto !important; } [data-builder-mode]:not(.brx-header-left, .brx-header-right) .brx-has-megamenu .brx-dropdown-content[data-content-align="right"][preview-alignment="true"]{ left: auto !important; right: 0 !important; } [data-builder-mode]:not(.brx-header-left, .brx-header-right) .dwc-nest-menu:not(.brx-open) .brx-has-megamenu .brx-dropdown-content[data-content-align="center"][preview-alignment="true"]{ left: 50% !important; transform: translatex(-50%) !important; } /* BREAKOUT ITEM */ .dwc-nest-menu > [data-breakout-link]:not(.dwc-nest-menu__logo){ color: var(--menu-cta-clr); background-color: var(--menu-cta-bg); border-radius: var(--menu-cta-radius) !important; padding-inline: var(--menu-cta-inline-padding) !important; padding-block: var(--menu-cta-block-padding) !important; border: var(--menu-cta-border); } .dwc-nest-menu > [data-breakout-link="before"], .dwc-nest-menu > [data-breakout-link]:not([data-breakout-link="after"], .dwc-nest-menu__logo){ margin-inline-end: var(--cta-breakout-gap); margin-inline-start: auto; } .dwc-nest-menu > [data-breakout-link="after"]{ margin-inline-start: var(--cta-breakout-gap); order: 1; } .dwc-menu-wrap:has(.dwc-nest-menu__logo[data-breakout-link]), .brxe-nav-nested:has(.dwc-nest-menu__logo[data-breakout-link]){ inline-size: 100% !important; } .dwc-stripe-style .dwc-menu-wrap:has(.dwc-nest-menu__logo[data-breakout-link]), .dwc-stripe-style .brxe-nav-nested:has(.dwc-nest-menu__logo[data-breakout-link]) { min-height: var(--header-min-height); } .dwc-nest-header__container:has(.brx-nav-nested-items .dwc-nest-menu__logo[data-breakout-link]) { flex-direction: column !important; justify-content: center !important; } .dwc-nest-menu > [data-breakout-link="after"] + .brxe-toggle[aria-label="Open Menu"]{ margin-inline-start: auto; } /* BREAKIN ITEM */ .dwc-mobile .dwc-nav-wrapper:has([data-breakin]) { background: linear-gradient(to top, var(--mobile-menu-bg) 0%, var(--mobile-menu-bg) calc(100% - var(--dwc-nest-header-height)), transparent calc(100% - var(--dwc-nest-header-height)), transparent 100%); } .dwc-mobile .dwc-nav-wrapper:has([data-breakin]) .breakin-container{ inline-size: 100%; } .dwc-mobile .dwc-nav-wrapper:has([data-breakin="end"]) .breakin-container{ margin-block-start: auto; } html:not(.dwc-mobile) .breakin-container{ visibility: hidden !important; order: 0 !important; } /* ==== DYNAMIC NAV CUSTOM CSS ==== */ [data-builder-mode] .dwc-nest-menu .brx-nav-nested-items > a:not(.dwc-nest-menu__logo){ font-weight: var(--menu-item-font-weight); font-size: var(--menu-item-font-size); color: var(--menu-item-clr); background-color: var(--menu-item-bg); padding-block: var(--menu-item-block-padding); padding-inline: var(--menu-item-inline-padding) !important; } [data-builder-mode] .dwc-nest-menu .brx-dropdown-content > a:not(.brx-has-megamenu a) { background-color: var(--dropdown-item-bg); padding-block: var(--dropdown-item-block-padding); padding-inline: var(--dropdown-item-inline-padding) !important; font-weight: var(--menu-item-font-weight); font-size: var(--menu-item-font-size); color: var(--menu-item-clr); inline-size: 100%; } [data-builder-mode] .dwc-nest-menu .brx-dropdown-content > a:hover:not(.brx-has-megamenu a) { background-color: var(--dropdown-item-hover-bg); color: var(--dropdown-item-hover-clr); } body:not([data-builder-mode]) .dwc-nest-menu .brx-nav-nested-items > li:empty{ visibility: hidden; } .dwc-nest-menu .brx-nav-nested-items > * > .brxe-dropdown:not(.brx-has-megamenu) li .brx-submenu-toggle { padding-block: var(--dropdown-item-block-padding); padding-inline: var(--dropdown-item-inline-padding) !important; } /* ==== END DYNAMIC NAV CUSTOM CSS ==== */ /* CARET FIX FOR DYNAMIC MENU STRUCTURE*/ .dwc-nest-menu .brx-nav-nested-items > li> .brx-has-megamenu.open > .brx-dropdown-content { opacity: 1; visibility: visible; } html:not(.dwc-mobile) body:not(.brx-header-right, .brx-header-left) .dwc-nest-menu[data-align-content-bottom="true"][data-caret="true"]:not([data-offcanvas="true"]) .brx-nav-nested-items > li:has(.brx-has-megamenu.open):not(.dwc-stripe-style .brx-nav-nested-items > li)::after { inline-size: calc((var(--dropdown-content-gap) * 1.414) - var(--dropdown-content-border-size)); aspect-ratio: 1; opacity: 1; transition: opacity 0.2s 0.1s; } html:not(.dwc-mobile) body:not(.brx-header-right, .brx-header-left) .dwc-nest-menu[data-align-content-bottom="true"][data-caret="true"]:not([data-offcanvas="true"]) .brx-nav-nested-items > li:has(.brx-has-megamenu):not(.dwc-stripe-style .brx-nav-nested-items > li)::after { content: ''; position: absolute; background-color: var(--dropdown-content-bg); transform: rotate(45deg); inset-block-end: calc((-1 * var(--dropdown-content-gap) - (var(--dropdown-content-gap) * 1.414 / 2.0)) + var(--dropdown-content-border-size)); inset-inline-start: calc(50% - var( --dropdown-content-gap)); opacity: 0; } html:not(.dwc-mobile) .bricks-is-frontend:not(.brx-header-left, .brx-header-right) .dwc-nest-menu[data-align-content-bottom="true"]:not([data-offcanvas="true"]) .brx-nav-nested-items > li { height: 100%; display: flex; align-items: center; } html:not(.dwc-mobile) .bricks-is-frontend:not(.brx-header-left, .brx-header-right) .dwc-nest-menu[data-align-content-bottom="true"]:not([data-offcanvas="true"]) .brx-nav-nested-items > li > .brxe-dropdown > .brx-submenu-toggle, html:not(.dwc-mobile) .bricks-is-frontend:not(.brx-header-left, .brx-header-right) .dwc-nest-menu[data-align-content-bottom="true"]:not([data-offcanvas="true"]) .brx-nav-nested-items > li > .brxe-dropdown{ height: 100% } .brx-nav-nested-items > li:has(> a), .brx-nav-nested-items > li:has(> .brx-submenu-toggle) { position: relative; } /* END CARET FIX FOR DYNAMIC MENU STRUCTURE*/ /* SPECIAL MOBILE STYLES TABLET ONLY */ @media (min-width: 640px) and (max-width: 1200px) { /* mega menu */ .dwc-mobile .bricks-is-frontend [data-mobile-special-style="slide-split"] .dwc-nav-wrapper { --mobile-menu-width: min(720px, 100%); align-items: flex-end; } .dwc-mobile .bricks-is-frontend [data-mobile-special-style="slide-split"] [data-submenu-reveal="slide"].dwc-nest-menu.brxe-nav-nested .brx-has-megamenu.brxe-dropdown .brx-dropdown-content:not([data-hide-close-bar="true"] ul, [data-submenu-reveal="expand"].brx-has-megamenu ul) { inline-size: min(400px, 100%); box-shadow: 0px 0px 15px -10px #000000b3 } .dwc-mobile .bricks-is-frontend [data-mobile-special-style="slide-split"] [data-submenu-reveal="slide"].dwc-nest-menu.brxe-nav-nested .brx-has-megamenu.brxe-dropdown .brx-dropdown-content:not([data-submenu-reveal="expand"].brx-has-megamenu ul) { inset-inline-end: 0 !important; inset-inline-start: auto !important; inset-block-start: 0 !important; } /*dropdown*/ .dwc-mobile .bricks-is-frontend [data-mobile-special-style="slide-split"] [data-submenu-reveal="slide"].dwc-nest-menu.brxe-nav-nested .brxe-dropdown:not(:is([data-submenu-reveal="expand"], .brx-has-megamenu)) .brx-dropdown-content:not([data-submenu-reveal="expand"] *), .dwc-mobile .bricks-is-frontend [data-mobile-special-style="slide-split"] [data-submenu-reveal="slide"].brxe-dropdown:not(.brx-has-megamenu) .brx-dropdown-content { transition-property: inset-inline-start, inset-inline-end, visibility, opacity !important; inset-inline-start: auto !important; width: 400px; box-shadow: 0px 0px 15px -10px #000000b3; inset-block-start: 0 !important; inset-inline-end: -100% !important; } .dwc-mobile .bricks-is-frontend [data-mobile-special-style="slide-split"] [data-submenu-reveal="slide"].brxe-nav-nested.brx-open .brxe-dropdown.open:not(.brx-has-megamenu, [data-submenu-reveal="expand"])>.brx-dropdown-content, .dwc-mobile .bricks-is-frontend [data-mobile-special-style="slide-split"] .brx-open [data-submenu-reveal="slide"].brxe-dropdown.open>.brx-dropdown-content, .dwc-mobile .bricks-is-frontend [data-mobile-special-style="slide-split"] .brx-open [data-submenu-reveal="slide"].brxe-dropdown.open>.brx-dropdown-content .open>.brx-dropdown-content { inset-inline-end: 0% !important; inset-inline-start: auto !important; } /*active styles*/ .dwc-mobile body:not(.brx-header-right, .brx-header-left) [data-mobile-special-style="slide-split"] .brx-nav-nested-items > li > .brx-has-megamenu.open > .brx-submenu-toggle{ background-color: var(--menu-item-active-bg); } .dwc-mobile body:not(.brx-header-right, .brx-header-left) [data-mobile-special-style="slide-split"] .brx-nav-nested-items > li.open > .brx-submenu-toggle{ background-color: var(--menu-item-active-bg); } } /* END SPECIAL MOBILE STYLES TABLET ONLY */ /* OVERLAY HEADER NO TOP GAP */ .bricks-is-frontend [data-overlay-header-no-top-gap="true"] .dwc-nest-menu[data-slide-in-direction="top"][data-match-overlay-header-width="true"] .dwc-nav-wrapper { inset-block-start: 0 !important; } /* .bricks-is-frontend [data-overlay-header-no-top-gap="true"] .dwc-nest-menu[data-slide-in-direction="top"][data-match-overlay-header-width="true"] .brx-nav-nested-items { inset-block-start: calc((var(--dwc-nest-header-height) * 1.2) * -1) !important; } */ .bricks-is-frontend [data-overlay-header-no-top-gap="true"] .dwc-nest-menu[data-submenu-reveal="slide"][data-slide-in-direction="top"][data-match-overlay-header-width="true"] .open.active>.brx-submenu-toggle > button:not([data-hide-close-bar="true"] button, [data-submenu-reveal="expand"] button, .open.active:has(.open.active)>.brx-submenu-toggle > button) { inset-block-start: calc(var(--dwc-nest-header-height) / 2); } .bricks-is-frontend #brx-header > .dwc-nest-header[data-overlay-header-no-top-gap="true"] { border-top-left-radius: 0 !important; border-top-right-radius: 0 !important; } .bricks-is-frontend #brx-header:has([data-overlay-header-no-top-gap="true"]) { padding-block-start: 0 !important; } /* END OVERLAY HEADER NO TOP GAP */ /* DROPDOWN ITEM IS BUTTON OR ICON */ /* IS ICON */ .brxe-dropdown[data-is-icon]{ padding-inline: var(--menu-item-inline-padding); } /* remove the underline */ .brxe-dropdown[data-is-icon] > .brx-submenu-toggle::before{ display: none; } /* general styling */ .dwc-nest-menu .brx-nav-nested-items > .brxe-dropdown[data-is-icon] > .brx-submenu-toggle{ height: auto !important; width: auto; min-width: var(--button-max-diameter); aspect-ratio: 1; border-radius: var(--menu-item-radius) !important; padding: 0 !important; margin-inline-start: auto; margin-block: auto; transition: 0.4s; border: var(--menu-item-border) } .dwc-nest-menu .brx-nav-nested-items > .brxe-dropdown[data-is-icon]:hover > .brx-submenu-toggle{ border: var(--menu-item-hover-border) } .dwc-mobile .dwc-nest-menu .brx-nav-nested-items > .brxe-dropdown[data-is-icon] > .brx-submenu-toggle{ max-width: var(--button-max-diameter); } /* centralize */ .brxe-dropdown[data-is-icon] > .brx-submenu-toggle > button{ margin: auto; color: var(--icon-clr); font-size: var(--icon-size); } .brxe-dropdown[data-is-icon]:hover > .brx-submenu-toggle > button{ color: var(--icon-hover-clr); } /* reset rotation on icon when hovered */ .brxe-dropdown[data-is-icon] > .brx-submenu-toggle button[aria-expanded="true"] > * { transform: rotateZ(0deg); } /* reset margin left on mobile*/ .dwc-mobile .dwc-nest-menu .brx-nav-nested-items > .brxe-dropdown[data-is-icon] > .brx-submenu-toggle{ margin-inline-start: initial; } /* remove inner span from document flow and hide visually*/ .brxe-dropdown[data-is-icon] > .brx-submenu-toggle > span{ clip: rect(1px,1px,1px,1px); word-wrap: normal!important; border: 0; clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; overflow-wrap: normal!important; padding: 0; position: absolute!important; width: 1px; } /* IS ICON ENDS */ /* IS BUTTON */ .brxe-dropdown[data-is-button] > .brx-submenu-toggle{ height: auto !important; margin-block: auto; border-radius: var(--menu-item-radius) !important; max-width: var(--menu-item-width); border: var(--menu-item-border); } .brxe-dropdown[data-is-button]:hover > .brx-submenu-toggle { border: var(--menu-item-hover-border); } /* centralize text in span */ .brxe-dropdown[data-is-button] > .brx-submenu-toggle > span{ margin-inline: auto; } /* remove button from document flow to allow text to centralize, but keep accessible*/ .brxe-dropdown[data-is-button="no-chevron"] > .brx-submenu-toggle > button{ clip: rect(1px,1px,1px,1px); word-wrap: normal!important; border: 0; clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; overflow-wrap: normal!important; padding: 0; position: absolute!important; width: 1px; } /* block padding on mobile */ .dwc-mobile .brxe-dropdown:is([data-is-icon], [data-is-button]){ padding-block: var(--menu-item-block-padding); padding-inline: var(--menu-item-inline-padding); } /* IS BUTTON ENDS */ /* DROPDWON ITEM IS BUTTON OR ICON ENDS */ /* RTL */ html:not(.dwc-mobile) :is(:not(.brx-header-left, .brx-header-right)).bricks-is-frontend .dwc-nest-menu:not([data-offcanvas="true"]) .brx-has-megamenu .brx-dropdown-content:not([data-use-selector="true"]) { inset-inline-end: var(--right-position)!important; } html:not(.dwc-mobile)[dir=rtl] .dwc-stripe-style .open.brx-has-megamenu:not([data-offcanvas="true"] .brx-has-megamenu)::before { transform: translateX(50%); } html:not(.dwc-mobile)[dir=rtl] body:not(.brx-header-left, .brx-header-right) .dwc-nest-menu:not([data-offcanvas="true"]) .brxe-dropdown:not(.brx-has-megamenu) .brxe-dropdown .brx-submenu-toggle button svg { transform: rotate(-270deg); } /*RTL ENDS */ /* FIXES */ .dwc-nest-nav-items > li { width: auto; } li { -webkit-tap-highlight-color: transparent; } html:not(.dwc-mobile) .dwc-adaptive-height #brx-header > *:not(.dwc-nest-header, .dwc-nest-header + *){ z-index: 9999; position: relative; } /* dropdown within a dropdown color/chevron */ li:not(.brx-has-megamenu) .brx-submenu-toggle:not( .brx-nav-nested-items > li > *, li:hover > *) { color: var(--dropdown-item-clr); } .dwc-nest-menu .brxe-dropdown:not(.brx-has-megamenu) li .brx-submenu-toggle svg{ --chevron-clr: var(--dropdown-item-clr); --chevron-hover-clr: var(--dropdown-item-hover-clr); } /* account for admn bar on mobile menu */ .dwc-mobile .dwc-nav-wrapper { inset-block-start: var(--wp-admin--admin-bar--height, 0px); } .dwc-mobile .brxe-nav-nested.brx-open .brx-nav-nested-items { top:0; } /* fix safari issue on fixed element inside scrollable container */ .dwc-mobile .dwc-nest-menu.brxe-nav-nested:not([data-submenu-reveal="expand"]) .brx-nav-nested-items:has(.brxe-dropdown.open.active:not([data-submenu-reveal="expand"])){ overflow-y: hidden; } /* Only apply to browsers that support attr() with units */ @supports (width: attr(data-format px)) { [data-builder-mode] .dwc-nest-menu { --global-width: attr(builder-preview-content-width px); } } /* Only apply to browsers that DON'T support attr() with units (Firefox) */ @supports not (width: attr(data-format px)) { [data-builder-mode] .brx-dropdown-content { --dropdown-content-width: var(--dropdown-content-default-width) !important; } } body:has(.brx-sticky) [id] { scroll-margin-top: var(--dwc-nest-header-height); } /* phone landscape */ @media (height < 480px){ .dwc-mobile .bricks-is-frontend .dwc-nest-menu[data-slide-in-direction="top"][data-match-overlay-header-width="true"] .dwc-nav-wrapper { block-size: 100dvb !important; } .dwc-mobile .dwc-nest-menu[data-slide-in-direction="top"][data-match-overlay-header-width="true"] .brx-nav-nested-items { min-block-size: 100dvb !important; overflow-y: auto !important; } .dwc-mobile [data-overlay-header-mobile="true"] [data-slide-in-direction="top"][data-match-overlay-header-width="true"] .dwc-nest-menu-top { z-index: 9999; border-radius: var(--overlay-header-radius); background-color: var(--overlay-header-bg) !important; backdrop-filter: blur(var(--overlay-header-blur)); } .dwc-mobile .bricks-is-frontend [data-submenu-reveal="slide"].dwc-nest-menu .brx-dropdown-content { overscroll-behavior: contain; } } /* match mega menu content width to tabbed nav width when tabbed hero is enabled*/ html:not(.dwc-mobile) .dwc-nest-menu .brx-has-megamenu > .brx-dropdown-content:has([data-tabbed-hero="true"]):not(:has(.active:hover)) { clip-path: inset(0 calc(100% - var(--tab-list-width)) 0 0); } /* automatically remove padding from header div when a block is added to it*/ .dwc-nest-header:has(>.brxe-block){ padding-inline: 0px; } /* add inline padding to a block when it is a direct child of the header div*/ .dwc-nest-header > .brxe-block{ padding-inline: var(--header-inline-padding) } /* if a block wraps the header container, inherit the header background color*/ .brxe-block:has(.dwc-nest-header__container){ background-color:var(--header-bg) } /*fix for menu item text color with <font> tag */ .dwc-mobile .dwc-nest-menu[data-submenu-reveal="expand"] .brxe-dropdown.open>.brx-submenu-toggle font, .dwc-mobile .dwc-nest-menu [data-submenu-reveal="expand"].brxe-dropdown.open>.brx-submenu-toggle font{ color: var(--dropdown-expanded-clr) !important; } /* when using special mobile style, allow menu to close when clicking outside the menu*/ .dwc-mobile .bricks-is-frontend [data-overlay-header-mobile="true"] .dwc-nest-menu[data-slide-in-direction="top"][data-match-overlay-header-width="true"] :is(.dwc-nav-wrapper):not(:has(.brxe-dropdown.open)) { block-size: fit-content !important; }

//document.body.classList.add('adaptive-height-active'); document.body.classList.add('show-nav'); function updateMobileClass(minWidth = MegaMenuCONFIG.minWidth) { const classList = document.documentElement.classList; const viewportWidth = document.documentElement.clientWidth; const isMobile = viewportWidth < minWidth; if (isMobile) { classList.add('dwc-mobile'); } else { classList.remove('dwc-mobile'); } } updateMobileClass(); // Centered Logo functionality class CenteredLogoController { constructor(config = {}) { this.config = { enable: config.enable ?? CenteredLogoCONFIG.enable, allowOddItems: config.allowOddItems ?? CenteredLogoCONFIG.allowOddItems, forceCenteredLogo: config.forceCenteredLogo ?? CenteredLogoCONFIG.forceCenteredLogo, centerNudge: config.centerNudge ?? CenteredLogoCONFIG.centerNudge, roundOffFactor: config.roundOffFactor || CenteredLogoCONFIG.roundOffFactor, headerSelector: config.headerSelector || MegaMenuCONFIG.headerSelector }; this.logoListItem = null; this.listItems = []; this.resizedFinished = null; this.isInitialized = false; } // Method to check if DOM elements are ready checkDOMReady() { const headerLogo = document.querySelector(`${this.config.headerSelector} .dwc-nest-menu__logo`); const headerInner = document.querySelector(`${this.config.headerSelector} .dwc-nest-header__container`); const menu = document.querySelector(`${this.config.headerSelector} .dwc-nest-menu`); const listParent = document.querySelector(`${this.config.headerSelector} .brx-nav-nested-items`); return headerLogo && headerInner && menu && listParent; } // Early initialization attempt initializeEarly() { if (!this.config.enable || this.isInitialized) return; // Try immediate initialization if elements are ready if (this.checkDOMReady()) { document.body.classList.add('dom-ready') this.setupElements(); this.initialize(); return; } // If not ready, use polling with shorter intervals for faster response const pollForElements = () => { if (this.checkDOMReady()) { this.setupElements(); this.initialize(); return; } // Poll every 10ms for very fast response setTimeout(pollForElements, 10); }; pollForElements(); } setupElements() { this.elements = { headerLogo: document.querySelector(`${this.config.headerSelector} .dwc-nest-menu__logo`), headerInner: document.querySelector(`${this.config.headerSelector} .dwc-nest-header__container`), menu: document.querySelector(`${this.config.headerSelector} .dwc-nest-menu`), listParent: document.querySelector(`${this.config.headerSelector} .brx-nav-nested-items`) }; } initialize() { if (!this.config.enable || this.isInitialized) { return; } // Ensure elements are set up before proceeding if (!this.elements) { this.setupElements(); } // Check if all required elements exist if (!this.elements.headerLogo || !this.elements.headerInner || !this.elements.menu || !this.elements.listParent) { return; } this.isInitialized = true; // Create logo list item this.logoListItem = document.createElement('li'); this.logoListItem.classList.add('dwc-header-logo-item'); // Get list items excluding those with toggle divs, and exclude empty li this.listItems = Array.from(this.elements.listParent.children).filter(item => { const hasToggleDiv = item.querySelector('.brx-toggle-div'); const isEmpty = item.matches('li:empty'); const hasExclude = item.querySelector('.dwc-exclude') return !hasToggleDiv && !isEmpty && !hasExclude; }); // Calculate position const halfIndex = this.listItems.length / 2; const logoOrder = this.roundHalfIndex(halfIndex, this.config.roundOffFactor); this.logoListItem.style.order = logoOrder; // Apply centering immediately this.centerLogo(logoOrder); // Add resize listener window.addEventListener('resize', this.centerLogo.bind(this, logoOrder)); } roundHalfIndex(halfIndex, roundOffFactor) { if (roundOffFactor === 'before') { return Math.floor(halfIndex + 1); } else { return Math.ceil(halfIndex + 1); } } centerLogo(logoOrder) { if (!this.config.allowOddItems && this.listItems.length % 2 !== 0) { return; } clearTimeout(this.resizedFinished); this.resizedFinished = setTimeout(() => { const isDesktop = window.innerWidth >= MegaMenuCONFIG.minWidth; if (isDesktop) { document.body.classList.add('desktop-centered') let listID = 1; // Set order for list items this.listItems.forEach(listItem => { if (!listItem.dataset.id) { listItem.dataset.id = listID++; } this.logoListItem.style.order = logoOrder; listItem.style.order = listItem.getAttribute('data-id'); }); if (!this.elements.listParent.contains(this.logoListItem) || !this.elements.listParent.contains(this.elements.headerLogo)) { this.elements.listParent.prepend(this.logoListItem); this.logoListItem.append(this.elements.headerLogo); this.elements.headerInner.classList.add('dwc-logo-is-centered'); const logoBounds = this.elements.headerLogo.getBoundingClientRect(); const viewportWidth = document.documentElement.clientWidth; const logoWidth = this.elements.headerLogo.offsetWidth; const distanceRight = logoBounds.x; // Force center if needed if (this.config.forceCenteredLogo) { const rightOffset = ((distanceRight + (logoWidth / 2)) + this.config.centerNudge) - (viewportWidth / 2); const offsetMargin = rightOffset * 2; this.elements.menu.style.marginRight = offsetMargin + 'px'; } if (CenteredLogoCONFIG.centerGuide) { if (document.body.classList.contains('logged-in')) { // Check if the indicator already exists if (!document.querySelector('.dwc-center-guide')) { const indicatorEl = document.createElement('div') indicatorEl.classList.add('dwc-center-guide') indicatorEl.style.width = this.elements.headerLogo.offsetWidth + 'px'; document.body.appendChild(indicatorEl) } } } } } else { document.body.classList.remove('desktop-centered'); this.elements.headerInner.classList.add('dwc-logo-is-centered'); this.elements.menu.style.marginRight = null; this.elements.headerInner.prepend(this.elements.headerLogo); this.logoListItem.style.order = null; this.listItems.forEach(listItem => { listItem.style.order = null; }); } }, 500); } } class MenuAnimationController { constructor(config = {}) { this.config = { minWidthThreshold: config.minWidthThreshold || MegaMenuCONFIG.minWidth, stripeStyle: config.stripeStyle ?? MegaMenuCONFIG.stripeStyle, adaptiveHeight: config.adaptiveHeight ?? MegaMenuCONFIG.adaptiveHeight, toolTip: config.toolTip ?? MegaMenuCONFIG.toolTip, menuAutoExpansion: config.menuAutoExpansion ?? MegaMenuCONFIG.menuAutoExpansion, headerSelector: config.headerSelector || MegaMenuCONFIG.headerSelector, megaMenuLinksSelector: `${config.headerSelector || MegaMenuCONFIG.headerSelector} .brx-has-megamenu`, offCanvasSelector: `${config.headerSelector || MegaMenuCONFIG.headerSelector} .dwc-nest-menu[data-offcanvas="true"]`, shiftFactor: config.shiftFactor ?? MegaMenuCONFIG.shiftFactor, // Added shiftFactor minOverflow: config.minOverflow ?? MegaMenuCONFIG.minOverflow // Added minOverflow }; this.megaMenuLinks = document.querySelectorAll(this.config.megaMenuLinksSelector); this.header = document.querySelector(this.config.headerSelector); this.headerDiv = document.querySelector('.dwc-nest-header'); this.maxMenuWidth = 0; this.maxMenuHeight = 0; this.headerTimeoutId = null; this.mobileMenuTimeoutId = null; this.applyConfigClasses(); } applyConfigClasses() { if (MegaMenuCONFIG.stripeStyle) { document.body.classList.add('dwc-stripe-style'); } if (MegaMenuCONFIG.adaptiveHeight) { document.body.classList.add('dwc-adaptive-height'); } if (this.header) { this.header.style.setProperty('--stripe-style-enabled', this.config.stripeStyle ? '1' : '0'); this.header.style.setProperty('--height-animation-enabled', this.config.adaptiveHeight ? '1' : '0'); } } /* isAboveMinWidth() { return window.innerWidth >= this.config.minWidthThreshold; } */ getViewportWidth() { // Check if window exists (for SSR/Node environments) if (typeof window === 'undefined') return 0; return window.innerWidth || document.documentElement?.clientWidth || document.body?.clientWidth || 0; } isAboveMinWidth() { return this.getViewportWidth() >= this.config.minWidthThreshold; } isOffCanvas() { return !!document.querySelector(this.config.offCanvasSelector); } hasHeaderClass() { return document.body.classList.contains('brx-header-left') || document.body.classList.contains('brx-header-right'); } updateMenuVariables() { if (!this.isAboveMinWidth() || !this.header) return; // Cache RTL detection for performance - only check once per method call const isRTLLayout = this.isRTL ? this.isRTL() : false; let menuOpened = false; let menuWidth = 0; let menuHeight = 0; let menuOffset = 0; // Renamed for direction-agnostic naming this.megaMenuLinks.forEach(link => { if (link.classList.contains('open')) { requestAnimationFrame(() => { let dropdownMenu = link.querySelector('.brx-dropdown-content'); let nestHeader = link.closest(this.config.headerSelector); if (dropdownMenu) { // Get dimensions (direction-agnostic) menuWidth = dropdownMenu.offsetWidth; menuHeight = dropdownMenu.offsetHeight; // RTL-aware offset calculation if (isRTLLayout) { // RTL: Calculate offset from right edges // Formula: distance from header's right edge to menu's right edge const headerRect = nestHeader.getBoundingClientRect(); const menuRect = dropdownMenu.getBoundingClientRect(); menuOffset = (headerRect.right - menuRect.right) + window.scrollX; } else { // LTR: Original left-based calculation (unchanged for backwards compatibility) menuOffset = Number(dropdownMenu.getBoundingClientRect().left) - Number(nestHeader.getBoundingClientRect().left) + window.scrollX; } // Update maximum dimensions (direction-agnostic) this.maxMenuWidth = Math.max(this.maxMenuWidth, menuWidth); this.maxMenuHeight = Math.max(this.maxMenuHeight, menuHeight); // Calculate scaling factors (direction-agnostic) let scaleX = menuWidth / this.maxMenuWidth; let scaleY = menuHeight / this.maxMenuHeight; // Set adaptive height if enabled (direction-agnostic) if (this.config.adaptiveHeight || this.config.stripeStyle) { this.header.style.setProperty('--dropdown-menu-height', `${menuHeight}px`); } // Set stripe-style variables with RTL awareness if (this.config.stripeStyle) { // Position variable - RTL-aware naming and calculation if (isRTLLayout) { // Set RTL-specific position variable this.header.style.setProperty('--dropdown-menu-x-rtl', `${menuOffset}px`); // Also set the standard variable for CSS that expects it this.header.style.setProperty('--dropdown-menu-x', `${menuOffset}px`); } else { // LTR: Use standard left-based positioning this.header.style.setProperty('--dropdown-menu-x', `${menuOffset}px`); // Clear any RTL variable that might exist this.header.style.removeProperty('--dropdown-menu-x-rtl'); } // Set dimension and scaling variables (direction-agnostic) this.header.style.setProperty('--dropdown-menu-width', `${menuWidth}px`); this.header.style.setProperty('--dropdown-menu-max-width', `${this.maxMenuWidth}px`); this.header.style.setProperty('--dropdown-menu-max-height', `${this.maxMenuHeight}px`); this.header.style.setProperty('--dropdown-menu-scale-x', scaleX.toString()); this.header.style.setProperty('--dropdown-menu-scale-y', scaleY.toString()); // Set direction indicator for CSS usage this.header.style.setProperty('--dropdown-menu-direction', isRTLLayout ? 'rtl' : 'ltr'); } } }); menuOpened = true; this.header.classList.add('show-menu-animation'); this.header.classList.remove('hide-menu-animation'); } }); // Handle menu closing (unchanged logic, direction-agnostic) if (!menuOpened) { const hasAdaptiveHeight = document.body.classList.contains('dwc-adaptive-height'); const hasStripeStyle = document.body.classList.contains('dwc-stripe-style'); if (hasAdaptiveHeight && !hasStripeStyle) { this.header.style.setProperty('--dropdown-menu-height', '0px'); } this.header.style.setProperty('--dropdown-menu-scale-y', '0'); if (this.header) { this.header.classList.add('hide-menu-animation'); this.header.classList.remove('show-menu-animation'); } } } updateDropdownPositions() { const viewportWidth = document.documentElement.clientWidth; if (viewportWidth < this.config.minWidthThreshold) return; // Run only on desktop const dropdowns = document.querySelectorAll(`${this.config.headerSelector} .dwc-nest-menu .brx-has-megamenu .brx-dropdown-content`); const defaultElement = document.querySelector('#brx-header'); const defaultRect = defaultElement ? defaultElement.getBoundingClientRect() : null; const isRTL = this.isRTL(); requestAnimationFrame(() => { // Handle vertical positioning (global top or stripe style) this.handleVerticalPositioning(); // Handle width and horizontal alignment positioning dropdowns.forEach((dropdown) => { this.setDropdownWidth(dropdown); this.positionDropdownHorizontally(dropdown, defaultRect, viewportWidth, isRTL); }); }); } /** * Detect if the document is using RTL (Right-to-Left) layout */ isRTL() { const htmlDir = document.documentElement.dir?.toLowerCase(); if (htmlDir) return htmlDir === 'rtl'; const computedDirection = getComputedStyle(document.documentElement).direction; return computedDirection === 'rtl'; } /** * Handle vertical positioning for dropdowns (global top positioning or stripe style) */ handleVerticalPositioning() { const nestMenu = document.querySelector('.dwc-nest-menu'); const globalTopSelector = nestMenu ? nestMenu.getAttribute('data-global-content-vertical') : null; if (globalTopSelector) { this.positionDropdownsRelativeToElement(globalTopSelector, 'global top element'); } else if (this.config.stripeStyle) { this.positionDropdownsRelativeToElement('#brx-header', '#brx-header bottom (stripe style)'); } } /** * Position dropdowns relative to a specified element */ positionDropdownsRelativeToElement(selector, description) { const targetElement = document.querySelector(selector); if (!targetElement) return; const positioningDropdowns = document.querySelectorAll(`${this.config.headerSelector} .dwc-nest-menu .brx-dropdown-content:not(.brx-dropdown-content .brx-dropdown-content)`); const targetRect = targetElement.getBoundingClientRect(); positioningDropdowns.forEach(dropdown => { const menuItem = dropdown.closest('.menu-item') || dropdown.parentElement; const menuItemRect = menuItem.getBoundingClientRect(); const topPosition = menuItemRect.height + targetRect.bottom - menuItemRect.bottom; dropdown.style.top = `${topPosition}px`; }); // console.log(`Positioned dropdowns relative to ${description}`); } /** * Set dropdown width based on data attributes or global settings */ setDropdownWidth(dropdown) { // Check for individual data-content-width attribute first const localSelector = dropdown.getAttribute('data-content-width'); if (localSelector) { this.applyWidthFromSelector(dropdown, localSelector); return; } // Fall back to global data-global-content-width setting const nestMenu = document.querySelector('.dwc-nest-menu'); const globalSelector = nestMenu ? nestMenu.getAttribute('data-global-content-width') : null; if (globalSelector) { this.applyWidthFromSelector(dropdown, globalSelector); } } /** * Apply width to dropdown based on selector (number, CSS value, CSS variable, or element selector) */ applyWidthFromSelector(dropdown, selector) { // Check if it's a number or value with CSS units if (/^\d+(\.\d+)?(px|rem|em|%|vh|vw|ch|ex|cm|mm|in|pt|pc)?$/i.test(selector)) { const hasUnit = /\d+(px|rem|em|%|vh|vw|ch|ex|cm|mm|in|pt|pc)$/i.test(selector); const widthValue = hasUnit ? selector : `${selector}px`; dropdown.style.setProperty('--dropdown-content-width', widthValue); } // Check if it's a CSS variable (starts with var( and ends with )) else if (/^var$--[\w-]+$$/.test(selector)) { this.applyWidthFromCSSVariable(dropdown, selector); } // Treat as element selector else { this.applyWidthFromElement(dropdown, selector); } } /** * Apply width from CSS variable */ applyWidthFromCSSVariable(dropdown, variableSelector) { const variableName = variableSelector.match(/^var$(--[\w-]+)$$/)[1]; const computedValue = getComputedStyle(document.documentElement).getPropertyValue(variableName).trim(); if (computedValue) { const hasUnit = /\d+(px|rem|em|%|vh|vw|ch|ex|cm|mm|in|pt|pc)$/i.test(computedValue); const widthValue = hasUnit ? computedValue : `${computedValue}px`; dropdown.style.setProperty('--dropdown-content-width', widthValue); } } /** * Apply width from target element */ applyWidthFromElement(dropdown, selector) { const targetElement = document.querySelector(selector); if (targetElement) { const targetWidth = targetElement.getBoundingClientRect().width; dropdown.style.setProperty('--dropdown-content-width', `${targetWidth}px`); } } /** * Handle horizontal positioning of dropdown with RTL support and overflow management * FIXED VERSION - Properly handles RTL overflow prevention */ positionDropdownHorizontally(dropdown, defaultRect, viewportWidth, isRTL) { const parentLi = dropdown.closest('.brx-has-megamenu.brxe-dropdown'); if (!parentLi) return; const contentAlign = dropdown.getAttribute('data-content-align'); let actualDropdownWidth = this.getActualDropdownWidth(dropdown); const liRect = parentLi.getBoundingClientRect(); // Constrain width to viewport if dropdown is wider if (actualDropdownWidth > viewportWidth) { dropdown.style.setProperty('--dropdown-content-width', `${viewportWidth}px`); actualDropdownWidth = viewportWidth; } // Calculate initial position based on alignment and RTL let position = this.calculateInitialPosition(dropdown, parentLi, contentAlign, actualDropdownWidth, defaultRect, isRTL); // Apply overflow corrections with proper RTL support position = this.handleOverflowAdjustments(position, liRect, actualDropdownWidth, viewportWidth, isRTL); // Set final position using appropriate CSS property if (isRTL) { // In RTL, we need to calculate right-based positioning const rightPosition = liRect.width - position - actualDropdownWidth; dropdown.style.setProperty('--right-position', `${rightPosition}px`); dropdown.style.removeProperty('--left-position'); } else { // LTR uses left-based positioning (existing behavior) dropdown.style.setProperty('--left-position', `${position}px`); dropdown.style.removeProperty('--right-position'); // Fallback for existing CSS that expects --left-position if (!dropdown.style.getPropertyValue('--left-position')) { dropdown.style.setProperty('--left-position', '0px'); } } } /** * Get actual dropdown width accounting for CSS transforms */ getActualDropdownWidth(dropdown) { const computedStyle = getComputedStyle(dropdown); const dropdownRect = dropdown.getBoundingClientRect(); // Extract scale factor from transform const transform = computedStyle.transform || computedStyle.webkitTransform; let scaleX = 1; if (transform && transform !== 'none') { const matrix = transform.match(/^matrix$(.+)$$/); if (matrix) { const values = matrix[1].split(', '); scaleX = parseFloat(values[0]); } } return dropdownRect.width / scaleX; } /** * Calculate initial dropdown position based on alignment and RTL settings * ENHANCED VERSION with improved RTL positioning */ calculateInitialPosition(dropdown, parentLi, contentAlign, actualDropdownWidth, defaultRect, isRTL) { const validAlignments = ['left', 'center', 'right']; const hasValidAlignment = contentAlign && validAlignments.includes(contentAlign); const liRect = parentLi.getBoundingClientRect(); if (!hasValidAlignment) { // Default centering behavior return this.calculateCenteredPosition(actualDropdownWidth, defaultRect, liRect, isRTL); } // Apply RTL-aware alignment mapping const effectiveAlignment = this.getEffectiveAlignment(contentAlign, isRTL); // Calculate position relative to parent element switch (effectiveAlignment) { case 'left': return isRTL ? liRect.width : 0; case 'right': return isRTL ? 0 : (liRect.width - actualDropdownWidth); case 'center': return (liRect.width - actualDropdownWidth) / 2; default: return isRTL ? liRect.width : 0; } } /** * Map alignment values for RTL layouts */ getEffectiveAlignment(contentAlign, isRTL) { if (!isRTL) return contentAlign; // RTL alignment mapping switch (contentAlign) { case 'left': return 'right'; case 'right': return 'left'; case 'center': return 'center'; default: return contentAlign; } } /** * Calculate centered position for default alignment * ENHANCED VERSION with better RTL support */ calculateCenteredPosition(actualDropdownWidth, defaultRect, liRect, isRTL) { if (!defaultRect) return isRTL ? liRect.width / 2 : 0; const defaultElement = document.querySelector('#brx-header'); const headerRect = defaultElement ? defaultElement.getBoundingClientRect() : null; if (headerRect) { const centerOffset = (defaultRect.width - actualDropdownWidth) / 2; if (isRTL) { // RTL: Calculate position relative to parent's right edge const headerRightOffset = headerRect.right; const liRightOffset = liRect.right; return centerOffset - (headerRightOffset - liRightOffset); } else { // LTR: Calculate position relative to parent's left edge (existing logic) const headerLeftOffset = headerRect.left + window.scrollX; return centerOffset - (liRect.left - headerLeftOffset); } } return isRTL ? liRect.width / 2 : 0; } /** * Handle viewport overflow adjustments with proper RTL support * COMPLETELY REWRITTEN for accurate RTL edge calculations */ handleOverflowAdjustments(position, liRect, actualDropdownWidth, viewportWidth, isRTL) { // Calculate edges based on layout direction let leftEdge, rightEdge; if (isRTL) { // RTL: position is relative to parent's right edge, calculate absolute edges const parentRight = liRect.right; rightEdge = parentRight - position; leftEdge = rightEdge - actualDropdownWidth; } else { // LTR: position is relative to parent's left edge (existing logic) leftEdge = liRect.left + position; rightEdge = leftEdge + actualDropdownWidth; } let adjustedPosition = position; const isViewportConstrained = actualDropdownWidth >= viewportWidth; // Check for left viewport overflow if (leftEdge < 0) { const leftOverflow = Math.abs(leftEdge); if (isViewportConstrained) { // For viewport-constrained dropdowns, use exact positioning if (isRTL) { // RTL: adjust position to align left edge with viewport adjustedPosition = position - leftOverflow; } else { // LTR: adjust position to align left edge with viewport adjustedPosition += leftOverflow; } } else { // For normal dropdowns, use configured shift behavior const adjustedOverflow = leftOverflow < this.config.minOverflow ? this.config.minOverflow : leftOverflow; if (isRTL) { adjustedPosition -= adjustedOverflow * this.config.shiftFactor; } else { adjustedPosition += adjustedOverflow * this.config.shiftFactor; } } } // Recalculate right edge after left adjustments let adjustedRightEdge; if (isRTL) { const parentRight = liRect.right; adjustedRightEdge = parentRight - adjustedPosition; } else { adjustedRightEdge = liRect.left + adjustedPosition + actualDropdownWidth; } // Check for right viewport overflow if (adjustedRightEdge > viewportWidth) { const rightOverflow = adjustedRightEdge - viewportWidth; if (isViewportConstrained) { // For viewport-constrained dropdowns, position exactly at viewport edge if (isRTL) { // RTL: adjust position to align right edge with viewport adjustedPosition += rightOverflow; } else { // LTR: adjust position to align right edge with viewport adjustedPosition -= rightOverflow; } // Double-check: if this causes opposite overflow, prioritize based on RTL let finalLeftEdge, finalRightEdge; if (isRTL) { const parentRight = liRect.right; finalRightEdge = parentRight - adjustedPosition; finalLeftEdge = finalRightEdge - actualDropdownWidth; } else { finalLeftEdge = liRect.left + adjustedPosition; finalRightEdge = finalLeftEdge + actualDropdownWidth; } if (finalLeftEdge < 0) { if (isRTL) { // In RTL, prioritize right edge - align dropdown to right edge of viewport adjustedPosition = liRect.right - viewportWidth; } else { // In LTR, prioritize left edge - align dropdown to left edge of viewport adjustedPosition = -liRect.left; } } } else { // For normal dropdowns, use configured shift behavior const adjustedOverflow = rightOverflow < this.config.minOverflow ? this.config.minOverflow : rightOverflow; if (isRTL) { adjustedPosition += adjustedOverflow * this.config.shiftFactor; } else { adjustedPosition -= adjustedOverflow * this.config.shiftFactor; } } } return adjustedPosition; } /** * Handle dropdowns that are wider than the viewport */ handleWideDropdownOverflow(liRect, actualDropdownWidth, viewportWidth, isRTL) { // For dropdowns wider than viewport, prioritize showing the start of content // In RTL, this means showing the right side; in LTR, the left side if (isRTL) { // Align to right edge of viewport return viewportWidth - liRect.left - actualDropdownWidth; } else { // Align to left edge of viewport return -liRect.left; } } setCurrentPageDropdownActive() { if (!this.config.menuAutoExpansion) return; const isDesktop = window.innerWidth >= this.config.minWidthThreshold; const hasSpecialHeader = document.body.classList.contains('brx-header-left') || document.body.classList.contains('brx-header-right'); const isOffCanvas = !!document.querySelector(this.config.offCanvasSelector); if (isDesktop && !hasSpecialHeader && !isOffCanvas) return; const currentPageLink = document.querySelector('[aria-current="page"]'); if (currentPageLink) { const parentDropdown = currentPageLink.closest('.brxe-dropdown'); let tabbedParentDropdown = currentPageLink.closest('.dwc-tabbed-nav-list__li'); // If tabbedParentDropdown has currentPageLink as a direct child, ignore it if (tabbedParentDropdown) { const directPageLink = tabbedParentDropdown.querySelector(':scope > a[aria-current="page"]'); if (directPageLink) { tabbedParentDropdown = null; // Ignore tabbedParentDropdown } } if (parentDropdown) { setTimeout(() => { // console.log(tabbedParentDropdown); parentDropdown.classList.add('open', 'active'); // Only add 'active' class if tabbedParentDropdown exists if (tabbedParentDropdown) { tabbedParentDropdown.classList.add('active'); } const submenuToggle = parentDropdown.querySelector('.brx-submenu-toggle'); let button = submenuToggle ? submenuToggle.querySelector('button') : null; const menuToggle = document.querySelector('.dwc-nest-menu .brxe-toggle'); if (button) { menuToggle.addEventListener('click', () => { setTimeout(() => { const submenuIsOpen = parentDropdown.classList.contains('open', 'active'); if (submenuIsOpen) { button.setAttribute('aria-expanded', 'true'); currentPageLink.scrollIntoView({ behavior: 'smooth', block: 'nearest' }); } }, 600); }); } }, 700); } } } updateChevronPosition(targetLink) { if (!this.config.stripeStyle) return; requestAnimationFrame(() => { let headerElement = document.querySelector(this.config.headerSelector); if (!headerElement) { console.error('Chevron parent element not found.'); return; } // Cache RTL detection for performance within this animation frame const isRTLLayout = this.isRTL ? this.isRTL() : false; // Get element dimensions and positions let linkRect = targetLink.getBoundingClientRect(); let headerRect = headerElement.getBoundingClientRect(); // Calculate link midpoint (geometric center - always the same regardless of direction) let linkMidpoint = linkRect.left + linkRect.width / 2; // RTL-aware reference point calculation let headerReferenceOffset, navlinkMidpointOffset, navlinkEdgeOffset; if (isRTLLayout) { // RTL: Use right edge as reference point let headerRightOffset = headerRect.right + window.scrollX; // Calculate offsets relative to header's right edge navlinkMidpointOffset = headerRightOffset - linkMidpoint; navlinkEdgeOffset = headerRightOffset - linkRect.right; headerReferenceOffset = headerRightOffset; // Set RTL-specific CSS variables headerElement.style.setProperty('--chevron-parent-right', `${headerReferenceOffset}px`); headerElement.style.setProperty('--navlink-midpoint-rtl', `${navlinkMidpointOffset}px`); headerElement.style.setProperty('--navlink-right', `${navlinkEdgeOffset}px`); // Set unified variables for CSS that expects them (RTL context) headerElement.style.setProperty('--navlink-midpoint', `${navlinkMidpointOffset}px`); headerElement.style.setProperty('--navlink-edge', `${navlinkEdgeOffset}px`); } else { // LTR: Original left-based calculation (unchanged for perfect backwards compatibility) let headerLeftOffset = headerRect.left + window.scrollX; // Calculate offsets relative to header's left edge (original logic) navlinkMidpointOffset = linkMidpoint - headerLeftOffset; navlinkEdgeOffset = linkRect.left - headerLeftOffset; headerReferenceOffset = headerLeftOffset; // Set standard LTR CSS variables (original behavior) headerElement.style.setProperty('--chevron-parent-left', `${headerReferenceOffset}px`); headerElement.style.setProperty('--navlink-midpoint', `${navlinkMidpointOffset}px`); headerElement.style.setProperty('--navlink-left', `${navlinkEdgeOffset}px`); // Set unified edge variable for consistency headerElement.style.setProperty('--navlink-edge', `${navlinkEdgeOffset}px`); // Clean up any RTL variables that might exist from previous state headerElement.style.removeProperty('--chevron-parent-right'); headerElement.style.removeProperty('--navlink-midpoint-rtl'); headerElement.style.removeProperty('--navlink-right'); } // Set direction-agnostic variables (same for both LTR and RTL) headerElement.style.setProperty('--chevron-parent-width', `${headerRect.width}px`); headerElement.style.setProperty('--navlink-width', `${linkRect.width}px`); // Set direction indicator for CSS conditional logic headerElement.style.setProperty('--chevron-direction', isRTLLayout ? 'rtl' : 'ltr'); // Set boolean flags for easier CSS targeting if (isRTLLayout) { headerElement.style.setProperty('--is-rtl', '1'); headerElement.style.removeProperty('--is-ltr'); } else { headerElement.style.setProperty('--is-ltr', '1'); headerElement.style.removeProperty('--is-rtl'); } }); } updateHeaderHeight() { if (this.headerTimeoutId) { clearTimeout(this.headerTimeoutId); } requestAnimationFrame(() => { if (this.header) { this.headerTimeoutId = setTimeout(() => { let headerHeight = this.header.offsetHeight; let headerDivHeight = this.headerDiv.offsetHeight; document.body.style.setProperty('--dwc-nest-header-height', `${headerHeight}px`); document.body.style.setProperty('--dwc-header-div-height', `${headerDivHeight}px`); }, 300); } }); } setMobileMenuTopHeight() { if (this.mobileMenuTimeoutId) { clearTimeout(this.mobileMenuTimeoutId); } let mobileMenuTop = document.querySelector('.dwc-nest-menu-top'); if (!mobileMenuTop) { console.error('Mobile menu top element not found'); return; } this.mobileMenuTimeoutId = setTimeout(() => { let menuTopHeight = mobileMenuTop.offsetHeight; document.body.style.setProperty('--mobile-menu-top-height', `${menuTopHeight}px`); }, 1000); } updateMobileLogo() { let mobileLogo = document.querySelector('.dwc-nest-menu__mobile-logo'); let desktopLogo = document.querySelector('.dwc-nest-menu__logo'); if (!mobileLogo) { console.error('Mobile logo container not found'); return; } if (!desktopLogo) { console.error('Desktop logo container not found'); return; } // Updated to check for either img or svg in desktop logo let desktopLogoElement = desktopLogo.querySelector('img, svg'); if (!desktopLogoElement) return; // Check if mobile logo has an image or SVG const currentMobileLogo = mobileLogo.querySelector('img, svg'); // Store original logo data if not already stored if (!mobileLogo.hasAttribute('data-original-logo-type') && currentMobileLogo) { // Get logo type (img or svg) const logoType = currentMobileLogo.tagName.toLowerCase(); mobileLogo.setAttribute('data-original-logo-type', logoType); if (logoType === 'img') { mobileLogo.setAttribute('data-original-logo-src', currentMobileLogo.src); mobileLogo.setAttribute('data-original-logo-alt', currentMobileLogo.alt || ''); mobileLogo.setAttribute('data-original-logo-class', currentMobileLogo.className || ''); } else if (logoType === 'svg') { // Store SVG content as a string mobileLogo.setAttribute('data-original-logo-content', currentMobileLogo.outerHTML); mobileLogo.setAttribute('data-original-logo-class', currentMobileLogo.getAttribute('class') || ''); } } if (this.isAboveMinWidth()) { if (currentMobileLogo) { mobileLogo.removeChild(currentMobileLogo); } // Clone desktop logo (either img or svg) let newLogo = desktopLogoElement.cloneNode(true); newLogo.removeAttribute('id'); // mobileLogo.appendChild(newLogo); } else { // For mobile view const originalLogoType = mobileLogo.getAttribute('data-original-logo-type'); if (!currentMobileLogo) { // If no current logo, clone desktop logo let mobileLogoElement = desktopLogoElement.cloneNode(true); mobileLogoElement.removeAttribute('id'); mobileLogo.appendChild(mobileLogoElement); } else if (originalLogoType) { mobileLogo.removeChild(currentMobileLogo); if (originalLogoType === 'img') { // Restore original img let mobileLogoImage = document.createElement('img'); mobileLogoImage.src = mobileLogo.getAttribute('data-original-logo-src'); mobileLogoImage.alt = mobileLogo.getAttribute('data-original-logo-alt') || ''; mobileLogoImage.className = mobileLogo.getAttribute('data-original-logo-class') || ''; mobileLogo.appendChild(mobileLogoImage); } else if (originalLogoType === 'svg') { // Restore original SVG const svgContent = mobileLogo.getAttribute('data-original-logo-content'); if (svgContent) { const tempContainer = document.createElement('div'); tempContainer.innerHTML = svgContent; const svgElement = tempContainer.querySelector('svg'); if (svgElement) { mobileLogo.appendChild(svgElement.cloneNode(true)); } } } } } } initDesktopNav() { if (this.isOffCanvas() || !this.header || this.hasHeaderClass()) return; let menuElement = this.header.querySelector('.dwc-nest-menu'); if (menuElement) { menuElement.classList.remove('brx-open'); menuElement.querySelectorAll('.brxe-dropdown').forEach(dropdown => { dropdown.classList.remove('active', 'open'); }); } } initializeMaxDimensions() { if (!this.isAboveMinWidth()) return; this.megaMenuLinks.forEach(link => { let dropdown = link.querySelector('.brx-dropdown-content'); if (dropdown) { this.maxMenuWidth = Math.max(this.maxMenuWidth, dropdown.offsetWidth); this.maxMenuHeight = Math.max(this.maxMenuHeight, dropdown.offsetHeight + 10); } }); this.header.style.setProperty('--dropdown-menu-max-width', `${this.maxMenuWidth}px`); this.header.style.setProperty('--dropdown-menu-max-height', `${this.maxMenuHeight}px`); this.header.style.setProperty('--dropdown-menu-scale-x', '0'); this.header.style.setProperty('--dropdown-menu-scale-y', '0'); } resetForMobile() { this.header.style.setProperty('--dropdown-menu-scale-x', '0'); this.header.style.setProperty('--dropdown-menu-scale-y', '0'); this.header.style.setProperty('--dropdown-menu-width', '0'); if (this.header) { this.header.classList.remove('show-menu-animation', 'hide-menu-animation'); } } setBoxedWidthVariable() { // Check if body has the brx-boxed class if (document.body.classList.contains('brx-boxed')) { // Get computed style for the body const computedStyle = window.getComputedStyle(document.body); // Get the max-width value const maxWidth = computedStyle.getPropertyValue('max-width'); // Set the max-width as a CSS variable on the body document.body.style.setProperty('--boxed-width', maxWidth); return maxWidth; } else { return null; } } closeDesktopMenu(link) { // Start from the link itself to find parent li.brxe-dropdown elements let currentElement = link; while (currentElement) { // Find the closest parent li.brxe-dropdown from current position const parentLi = currentElement.closest('li.brxe-dropdown'); if (!parentLi) break; // No more parent li.brxe-dropdown elements // Check if this li has open or active class if (parentLi.classList.contains('open') || parentLi.classList.contains('active')) { // Remove open and active classes parentLi.classList.remove('open', 'active'); // Find the toggle button to update aria-expanded const toggleButton = parentLi.querySelector(':scope > .brx-submenu-toggle > button'); if (toggleButton) { // Set aria-expanded to false toggleButton.setAttribute('aria-expanded', 'false'); } } // Move up: go to parent li's parent element to continue traversing upward only currentElement = parentLi.parentElement; } } closeNavOnClick() { if (MegaMenuCONFIG.closeNavOnClick) { const allLinks = document.querySelectorAll('.dwc-nest-menu a'); const menuContainer = document.querySelector('.dwc-nest-menu'); const menuItemLinks = Array.from(allLinks).filter(link => { return link.parentElement !== menuContainer; }); const menuToggle = document.querySelector('.dwc-nest-menu .brxe-toggle'); // Always remove existing event listeners first menuItemLinks.forEach(link => { const storedHandler = link._clickHandler; if (storedHandler) { link.removeEventListener('click', storedHandler); delete link._clickHandler; } }); // Check if we should skip desktop behavior const isMobile = !this.isAboveMinWidth(); const shouldSkipDesktop = MegaMenuCONFIG.closeOnMobileOnly && !isMobile; if (shouldSkipDesktop) return; // Helper function to check if element has excluded selector const hasExcludedSelector = (element) => { if (!MegaMenuCONFIG.closeNavOnClickExclude) return false; const excludedSelectors = MegaMenuCONFIG.closeNavOnClickExclude .split(',') .map(selector => selector.trim()); return excludedSelectors.some(selector => { try { return element.matches(selector); } catch (error) { // Fallback for invalid selectors - log warning and skip console.warn(`Invalid selector: "${selector}"`, error); return false; } }); }; // Helper function to check if link has a hash const hasHashLink = (link) => { const href = link.getAttribute('href'); return href && href.includes('#'); }; // Add event listeners based on mobile/desktop context menuItemLinks.forEach(link => { // Skip this link if it has any excluded classes if (hasExcludedSelector(link)) return; // If closeOnHashClickOnly is true, skip links without hash if (MegaMenuCONFIG.closeOnHashClickOnly && !hasHashLink(link)) return; const clickHandler = () => { if (isMobile) { // Mobile: close entire menu via toggle if (menuToggle) { menuToggle.click(); } } else { // Desktop: close parent dropdowns this.closeDesktopMenu(link); } }; link._clickHandler = clickHandler; link.addEventListener('click', clickHandler); }); } } } class TooltipManager { constructor(config) { this.config = { toolTip: config.toolTip || false }; this.targetButton = null; this.tooltipProcessed = false; } setBackText() { let menuElement = document.querySelector('.dwc-nest-menu'); let forcedBackText = menuElement.getAttribute('data-back-text') document.querySelectorAll('.brx-submenu-toggle').forEach(submenu => { const textContent = submenu.textContent.trim(); const button = submenu.querySelector('.brx-submenu-toggle > button'); if (button) { button.setAttribute('data-text', textContent); button.setAttribute('data-back-text', forcedBackText); } }); } updateTooltipDataText(button) { if (!this.config.toolTip) return; let menuElement = document.querySelector('.dwc-nest-menu'); let toolTipBackText = menuElement.getAttribute('data-tooltip-back-text') const closestUl = button.closest('.dwc-nav-wrapper, .dwc-tabbed-nav__list-wrapper'); if (closestUl) { const tooltip = closestUl.querySelector('.dwc-nest-tooltip'); if (tooltip) { const buttonText = button.getAttribute('data-text') || button.querySelector('i')?.getAttribute('data-text'); tooltip.setAttribute('data-text', buttonText); tooltip.innerText = toolTipBackText + ' ' + buttonText; } // console.log('button: ', button) // console.log('closet ul: ', closestUl) } } addTooltip(button) { if (!this.config.toolTip) return; let menuElement = document.querySelector('.dwc-nest-menu'); let toolTipBackText = menuElement.getAttribute('data-tooltip-back-text') const closestUl = button.closest('.dwc-nav-wrapper, .dwc-tabbed-nav__list-wrapper'); if (!closestUl) return; this.removeTooltipFrom(closestUl); const tooltip = document.createElement('div'); tooltip.className = 'dwc-nest-tooltip'; tooltip.innerText = toolTipBackText; tooltip.style.position = 'fixed'; tooltip.style.bottom = '12px'; tooltip.style.left = '12px'; tooltip.style.background = 'rgb(0 0 0 / 30%)'; tooltip.style.color = 'white'; tooltip.style.padding = '5px 10px'; tooltip.style.borderRadius = '5px'; tooltip.style.fontSize = '12px'; tooltip.style.zIndex = '9999'; tooltip.style.opacity = '0'; tooltip.style.transition = 'opacity 1.5s'; tooltip.style.pointerEvents = 'none'; closestUl.appendChild(tooltip); requestAnimationFrame(() => { tooltip.style.opacity = '1'; }); } removeAllTooltips() { document.querySelectorAll('.dwc-nest-tooltip').forEach(tooltip => tooltip.remove()); } removeTooltipFrom(ulElement) { const existingTooltip = ulElement.querySelector('.dwc-nest-tooltip'); if (existingTooltip) existingTooltip.remove(); } setupTooltipObserver() { const tooltipObserver = new MutationObserver((mutationsList) => { if (this.tooltipProcessed) return; for (const mutation of mutationsList) { if (mutation.type === 'childList') { for (const node of mutation.addedNodes) { if (node.nodeType === Node.ELEMENT_NODE && node.classList.contains('dwc-nest-tooltip') && !this.tooltipProcessed) { const button = document.querySelector('.open.active > .brx-submenu-toggle > button:not(.open .open button)'); if (button) { this.updateTooltipDataText(button); this.tooltipProcessed = true; return; } } } } } }); tooltipObserver.observe(document.body, { childList: true, subtree: true }); } } class SwipeGestureHandler { constructor(config) { this.config = { swipeToClose: config.swipeToClose || false }; this.targetButton = null; this.startX = 0; this.startY = 0; this.endX = 0; this.endY = 0; // Cache RTL detection for performance during touch events this.isRTLLayout = null; this.cacheRTLStatus(); } /** * Cache RTL status and set up listener for direction changes */ cacheRTLStatus() { this.isRTLLayout = this.isRTL(); // Listen for potential direction changes (rare but possible) const observer = new MutationObserver(() => { const newRTLStatus = this.isRTL(); if (newRTLStatus !== this.isRTLLayout) { this.isRTLLayout = newRTLStatus; } }); observer.observe(document.documentElement, { attributes: true, attributeFilter: ['dir', 'class', 'style'] }); } /** * Detect if the document is using RTL (Right-to-Left) layout * Follows the same pattern as MenuAnimationController */ isRTL() { const htmlDir = document.documentElement.dir?.toLowerCase(); if (htmlDir) return htmlDir === 'rtl'; const computedDirection = getComputedStyle(document.documentElement).direction; return computedDirection === 'rtl'; } initialize() { if (!this.config.swipeToClose) return; document.addEventListener('touchstart', this.handleTouchStart.bind(this)); document.addEventListener('touchend', this.handleTouchEnd.bind(this)); } handleTouchStart(event) { if (!this.isMobileMenuOpen()) return; this.startX = event.touches[0].clientX; this.startY = event.touches[0].clientY; } handleTouchEnd(event) { if (!this.isMobileMenuOpen()) return; this.endX = event.changedTouches[0].clientX; this.endY = event.changedTouches[0].clientY; const diffX = this.endX - this.startX; const diffY = Math.abs(this.endY - this.startY); // RTL-aware swipe detection const isValidSwipe = this.isValidSwipeGesture(diffX, diffY); if (isValidSwipe && this.targetButton) { this.targetButton.click(); this.targetButton = null; } } /** * Determine if the swipe gesture is valid based on layout direction * @param {number} diffX - Horizontal distance (positive = right, negative = left) * @param {number} diffY - Vertical distance (absolute value) * @returns {boolean} True if the swipe should trigger menu close */ isValidSwipeGesture(diffX, diffY) { const swipeThreshold = 50; const verticalTolerance = 30; // Vertical movement must be within tolerance if (diffY >= verticalTolerance) return false; if (this.isRTLLayout) { // RTL: Accept right-to-left swipes (negative diffX) return diffX < -swipeThreshold; } else { // LTR: Accept left-to-right swipes (positive diffX) - existing behavior return diffX > swipeThreshold; } } isMobileMenuOpen() { return document.querySelector('.dwc-nest-menu')?.classList.contains('brx-open'); } setTargetButton(button) { this.targetButton = button; } /** * Get current layout direction (for debugging) * @returns {string} 'rtl' or 'ltr' */ getLayoutDirection() { return this.isRTLLayout ? 'rtl' : 'ltr'; } } class OffcanvasMenuHandler { constructor(config) { this.config = config || {}; } applyMobileStyles() { let offcanvasMenu = document.querySelector(this.config.offCanvasSelector); let hasHeaderPosition = ['brx-header-left', 'brx-header-right'].some(cls => document.body.classList.contains(cls) ); if (!offcanvasMenu && !hasHeaderPosition) return; let styleSheet = document.querySelector('[data-stylesheet]'); if (!styleSheet) return; let styleElement = styleSheet.querySelector('style'); if (!styleElement) return; let originalStyles = styleElement.textContent || styleElement.innerText; let modifiedStyles = originalStyles.replace(/$max-width:\s*\d+px$/g, '(max-width: 5000px)'); let newStyleElement = document.createElement('style'); newStyleElement.id = 'dwc-offcanvas-styles'; newStyleElement.textContent = modifiedStyles; document.head.appendChild(newStyleElement); setTimeout(() => { document.body.classList.add('show-nav'); document.body.classList.add('sidebar-ready'); }, 100); styleSheet.remove(); } } class MobileMenuScrollReset { constructor(config = {}) { this.config = { minWidthThreshold: config.minWidthThreshold || MegaMenuCONFIG.minWidth, headerSelector: config.headerSelector || MegaMenuCONFIG.headerSelector, scrollResetDelay: config.scrollResetDelay || 300 }; this.menuElement = null; this.nestedItemsElement = null; this.scrollResetTimeout = null; this.isInitialized = false; } initialize() { if (this.isInitialized) return; this.menuElement = document.querySelector(`${this.config.headerSelector} .dwc-nest-menu`); this.nestedItemsElement = document.querySelector(`${this.config.headerSelector} .brx-nav-nested-items`); if (!this.menuElement || !this.nestedItemsElement) { console.warn('Mobile menu scroll reset: Required elements not found'); return; } this.setupMutationObserver(); this.isInitialized = true; } setupMutationObserver() { const observer = new MutationObserver((mutations) => { mutations.forEach((mutation) => { if (mutation.type === 'attributes' && mutation.attributeName === 'class') { this.handleMenuClassChange(); } }); }); observer.observe(this.menuElement, { attributes: true, attributeFilter: ['class'] }); } handleMenuClassChange() { // Only run on mobile if (!this.isMobile()) return; const isMenuOpen = this.menuElement.classList.contains('brx-open'); // If menu is now closed, set timeout to reset scroll if (!isMenuOpen) { this.scheduleScrollReset(); } else { // If menu is opened, cancel any pending scroll reset this.cancelScrollReset(); } } scheduleScrollReset() { // Clear any existing timeout this.cancelScrollReset(); // Set new timeout this.scrollResetTimeout = setTimeout(() => { this.resetScroll(); }, this.config.scrollResetDelay); } cancelScrollReset() { if (this.scrollResetTimeout) { clearTimeout(this.scrollResetTimeout); this.scrollResetTimeout = null; } } resetScroll() { if (this.nestedItemsElement && this.isMobile()) { this.nestedItemsElement.scrollTop = 0; } } isMobile() { return window.innerWidth < this.config.minWidthThreshold; } // Method to reinitialize (useful for your reinitialize functionality) reinitialize() { this.cancelScrollReset(); this.isInitialized = false; this.initialize(); } } class MenuSystem { constructor(config = {}) { this.config = { minWidthThreshold: config.minWidthThreshold || MegaMenuCONFIG.minWidth, stripeStyle: config.stripeStyle ?? MegaMenuCONFIG.stripeStyle, adaptiveHeight: config.adaptiveHeight ?? MegaMenuCONFIG.adaptiveHeight, toolTip: config.toolTip ?? MegaMenuCONFIG.toolTip, swipeToClose: config.swipeToClose ?? MegaMenuCONFIG.swipeToClose, headerSelector: config.headerSelector || MegaMenuCONFIG.headerSelector, megaMenuLinksSelector: `${config.headerSelector || MegaMenuCONFIG.headerSelector} .brx-has-megamenu`, offCanvasSelector: `${config.headerSelector || MegaMenuCONFIG.headerSelector} .dwc-nest-menu[data-offcanvas="true"]`, shiftFactor: config.shiftFactor ?? MegaMenuCONFIG.shiftFactor, minOverflow: config.minOverflow ?? MegaMenuCONFIG.minOverflow }; this.animationController = new MenuAnimationController(this.config); this.tooltipManager = new TooltipManager(this.config); this.swipeHandler = new SwipeGestureHandler(this.config); this.offcanvasHandler = new OffcanvasMenuHandler(this.config); this.centeredLogoController = new CenteredLogoController(this.config); this.mobileScrollReset = new MobileMenuScrollReset(this.config); // Flag to track if updateDropdownPositions has been called via user interaction this.hasUpdatedDropdowns = false; this.centeredLogoController.initializeEarly(); } // New method to handle the DOMContentLoaded logic, replaces former menuSystem.initialize() setupMenu() { let overlay = document.querySelector('.dwc-nest-menu-overlay'); if (!overlay) { overlay = document.createElement('nav-overlay'); overlay.className = 'dwc-nest-menu-overlay'; const overlayParent = document.querySelector('.dwc-nest-header__container'); const header = document.querySelector('#brx-header'); if (overlayParent && MegaMenuCONFIG.overlayInsideHeader) { overlayParent.parentNode.prepend(overlay, overlayParent); } else if (header) { header.parentNode.insertBefore(overlay, header); } } this.offcanvasHandler.applyMobileStyles(); this.animationController.updateHeaderHeight(); this.animationController.initializeMaxDimensions(); this.animationController.setMobileMenuTopHeight(); this.animationController.updateMobileLogo(); this.animationController.setCurrentPageDropdownActive(); this.tooltipManager.setBackText(); this.tooltipManager.setupTooltipObserver(); this.animationController.closeNavOnClick(); this.centeredLogoController.initialize(); this.mobileScrollReset.initialize(); if (this.animationController.isAboveMinWidth()) { this.setupDesktopBehavior(); } else { this.swipeHandler.initialize(); } this.setupEventListeners(); if (!this.animationController.isAboveMinWidth()) { this.animationController.resetForMobile(); } setTimeout(() => { document.body.classList.add('show-nav'); this.animationController.updateHeaderHeight(); }, 0); setTimeout(() => { document.body.classList.add('adaptive-height-active'); if (this.animationController.isAboveMinWidth()) { this.animationController.updateDropdownPositions(); this.animationController.setBoxedWidthVariable(); } }, 500); } // Original initialize method (unchanged) now calls the setupMenu() initialize() { updateMobileClass(this.config.minWidthThreshold); document.addEventListener('DOMContentLoaded', () => { this.setupMenu(); }); return this; } // Updated reinitialize method - to call: mainMenu.reinitialize(); reinitialize() { // Reset critical states this.centeredLogoController.isInitialized = false; this.animationController.maxMenuWidth = 0; this.animationController.maxMenuHeight = 0; this.tooltipManager.tooltipProcessed = false; // Clear breakinto states ← ADD THIS const breakintoElements = document.querySelectorAll('[data-breakinto]'); breakintoElements.forEach(element => { breakintoOriginalParents.delete(element); breakintoOriginalIndexes.delete(element); breakintoItemStates.delete(element); element.removeAttribute('data-breakinto-moved'); }); // Clear existing timeouts if (this.animationController.headerTimeoutId) { clearTimeout(this.animationController.headerTimeoutId); } if (this.animationController.mobileMenuTimeoutId) { clearTimeout(this.animationController.mobileMenuTimeoutId); } if (this.centeredLogoController.resizedFinished) { clearTimeout(this.centeredLogoController.resizedFinished); } // Remove added DOM elements and classes const overlay = document.querySelector('.dwc-nest-menu-overlay'); if (overlay) overlay.remove(); document.body.classList.remove('show-nav', 'adaptive-height-active', 'desktop-centered', 'dom-ready'); this.tooltipManager.removeAllTooltips(); const offcanvasStyles = document.querySelector('#dwc-offcanvas-styles'); if (offcanvasStyles) offcanvasStyles.remove(); // Reset mobile logo const mobileLogo = document.querySelector('.dwc-nest-menu__mobile-logo'); if (mobileLogo) { const currentMobileLogo = mobileLogo.querySelector('img, svg'); if (currentMobileLogo) currentMobileLogo.remove(); } // Re-run setup updateMobileClass(this.config.minWidthThreshold); this.setupMenu(); this.mobileScrollReset.reinitialize(); // console.log('Mega Menu Pro reinitialized...') } setupDesktopBehavior() { this.animationController.megaMenuLinks.forEach(link => { link.removeEventListener('mouseenter', this.handleMouseEnter); link.addEventListener('mouseenter', this.handleMouseEnter); }); } handleMouseEnter = (event) => { this.animationController.updateChevronPosition(event.target); // Call updateDropdownPositions on mouseenter if not already called via interaction if (this.animationController.isAboveMinWidth() && !this.hasUpdatedDropdowns) { this.animationController.updateDropdownPositions(); this.animationController.updateMenuVariables(); this.hasUpdatedDropdowns = true; } }; setupEventListeners() { let observer = new MutationObserver(mutations => { mutations.forEach(mutation => { if (mutation.type === 'attributes' && mutation.attributeName === 'class') { this.animationController.updateMenuVariables(); } }); }); this.animationController.megaMenuLinks.forEach(link => observer.observe(link, { attributes: true }) ); document.addEventListener('click', event => { let submenuToggle = event.target.closest('.brx-submenu-toggle, .dwc-tabbed-nav-list__li'); if (submenuToggle) { setTimeout(() => { let openButtons = document.querySelectorAll('.brxe-dropdown.open.active button, .dwc-tabbed-nav-list__li.active button'); let targetButton = Array.from(openButtons).find(button => { let parentDropdown = button.closest('.brxe-dropdown.open.active, .dwc-tabbed-nav-list__li.active'); return parentDropdown && parentDropdown.tagName.toLowerCase() === 'li' && !parentDropdown.querySelector('.brxe-dropdown.open.active:not(:scope), .dwc-tabbed-nav-list__li.active:not(:scope)'); }); if (targetButton) { this.swipeHandler.setTargetButton(targetButton); if (this.config.toolTip) { this.tooltipManager.removeAllTooltips(); this.tooltipManager.addTooltip(targetButton); this.tooltipManager.updateTooltipDataText(targetButton); } } }, 50); } }); window.addEventListener('resize', this.debounce(() => { updateMobileClass(this.config.minWidthThreshold); this.animationController.updateHeaderHeight(); this.animationController.initializeMaxDimensions(); this.animationController.setMobileMenuTopHeight(); this.animationController.updateMobileLogo(); this.animationController.closeNavOnClick(); if (this.animationController.isAboveMinWidth()) { this.animationController.updateMenuVariables(); this.animationController.initDesktopNav(); this.setupDesktopBehavior(); // Reset flag on resize to desktop and call updateDropdownPositions this.hasUpdatedDropdowns = false; this.animationController.updateDropdownPositions(); } else { this.animationController.resetForMobile(); this.swipeHandler.initialize(); // Reset flag on resize to mobile this.hasUpdatedDropdowns = false; } }, 300)); } debounce(func, delay) { let timeoutId; return function (...args) { clearTimeout(timeoutId); timeoutId = setTimeout(() => func.apply(this, args), delay); }; } } const mainMenu = new MenuSystem().initialize(); // RECALCULATE DROPDOWN POSITION ON LAYOUT SHIFTS const debouncedUpdate = mainMenu.debounce(() => { // console.log('updated') mainMenu.animationController.updateDropdownPositions(); mainMenu.animationController.updateMenuVariables(); if (!mainMenu.animationController.menuOpened) { mainMenu.animationController.header.style.setProperty('--dropdown-menu-width', '100px'); // console.log('less') } }, 300); if (window.visualViewport) { window.visualViewport.addEventListener('resize', debouncedUpdate); } /* BREAKOUT LINK & BREAKIN FUNCTIONALITY */ // WeakMaps for breakinto feature state management const breakintoOriginalParents = new WeakMap(); // Track original parents for breakinto items const breakintoOriginalIndexes = new WeakMap(); // Track original child indexes for breakinto items const breakintoItemStates = new WeakMap(); // Track individual breakinto item states // Use WeakMap for better garbage collection const originalParents = new WeakMap(); const itemStates = new WeakMap(); // Track individual item states const breakinOriginalParents = new WeakMap(); // Track original parents for breakin items const breakinOriginalIndexes = new WeakMap(); // Track original child indexes for breakin items const breakinItemStates = new WeakMap(); // Track individual breakin item states let isMobileView = null; let resizeTimer; let breakinContainer = null; function ensureBreakInContainer() { // Check if any breakin elements exist in the header first const hasBreakInElements = document.querySelector('#brx-header [data-breakin]'); if (!hasBreakInElements) return null; // Select nav wrapper based on config const navWrapperSelector = MegaMenuCONFIG.breakinToNavList ? '.dwc-nest-menu .brx-nav-nested-items' : '.dwc-nav-wrapper'; const navWrapper = document.querySelector(navWrapperSelector); if (!navWrapper) return null; if (!breakinContainer) { breakinContainer = navWrapper.querySelector('.breakin-container'); if (!breakinContainer) { // Create element based on config breakinContainer = MegaMenuCONFIG.breakinToNavList ? document.createElement('li') : document.createElement('div'); breakinContainer.className = 'breakin-container'; // Prepend to nav list, append elsewhere if (MegaMenuCONFIG.breakinToNavList) { navWrapper.prepend(breakinContainer); breakinContainer.style.order = '100'; } else { navWrapper.appendChild(breakinContainer); } } } return breakinContainer; } function handleBreakInItems() { const currentWidth = window.innerWidth; const container = ensureBreakInContainer(); if (!container) return; // Get all breakin items from both original locations and breakin container const breakinItemsInOriginal = document.querySelectorAll('#brx-header [data-breakin]:not(.breakin-container [data-breakin])'); const breakinItemsInContainer = container.querySelectorAll('[data-breakin]'); // Combine both nodelets into a single array const breakinItems = [...breakinItemsInOriginal, ...breakinItemsInContainer]; breakinItems.forEach(item => { const breakpointAttr = item.getAttribute('data-breakin'); // Set default breakpoint if not defined or invalid let breakpoint; if (!breakpointAttr || breakpointAttr.trim() === '') { breakpoint = MegaMenuCONFIG.minWidth - 1; } else { breakpoint = parseInt(breakpointAttr, 10); if (isNaN(breakpoint)) { breakpoint = MegaMenuCONFIG.minWidth - 1; } } // Continue with your logic using the breakpoint value... // Determine if item should be in mobile state (moved into container) const shouldBeInContainer = currentWidth <= breakpoint; // Get current state of this breakin item const currentItemState = breakinItemStates.get(item); // Only process if this item's state changed if (currentItemState !== shouldBeInContainer) { breakinItemStates.set(item, shouldBeInContainer); if (shouldBeInContainer) { // Move to breakin container // Store original parent and index if not already stored if (!breakinOriginalParents.has(item)) { const originalParent = item.parentElement; const originalIndex = Array.from(originalParent.children).indexOf(item); breakinOriginalParents.set(item, originalParent); breakinOriginalIndexes.set(item, originalIndex); } // Move item to breakin container container.appendChild(item); } else { // Move back to original parent at original position const originalParent = breakinOriginalParents.get(item); const originalIndex = breakinOriginalIndexes.get(item); if (originalParent && originalIndex !== undefined) { const children = originalParent.children; if (originalIndex >= children.length) { // Insert at the end if original index is beyond current children originalParent.appendChild(item); } else { // Insert at the original position originalParent.insertBefore(item, children[originalIndex]); } } } } }); } function handleBreakIntoItems() { const currentWidth = window.innerWidth; // Get all breakinto items from both original locations and target containers const breakintoItemsInOriginal = document.querySelectorAll('[data-breakinto]:not([data-breakinto=""])'); const breakintoItemsInContainers = document.querySelectorAll('[data-breakinto-moved="true"]'); // Combine both nodelets into a single array const breakintoItems = [...breakintoItemsInOriginal, ...breakintoItemsInContainers]; breakintoItems.forEach(item => { const breakintoAttr = item.getAttribute('data-breakinto'); // Skip if no breakinto attribute or empty value if (!breakintoAttr || breakintoAttr.trim() === '') { return; } // Parse the attribute value for container selector and optional breakpoint let containerSelector, customBreakpoint; if (breakintoAttr.includes('|')) { // Format: '.class | 767' or '#id | 1024' const parts = breakintoAttr.split('|').map(part => part.trim()); containerSelector = parts[0]; customBreakpoint = parseInt(parts[1], 10); // Validate custom breakpoint if (isNaN(customBreakpoint)) { console.warn(`Invalid breakpoint in data-breakinto="${breakintoAttr}". Using global breakpoint.`); customBreakpoint = null; } } else { // Format: '.class' or '#id' containerSelector = breakintoAttr.trim(); customBreakpoint = null; } // Find the target container let targetContainer; try { targetContainer = document.querySelector(containerSelector); } catch (error) { console.error(`Invalid selector in data-breakinto="${breakintoAttr}":`, error); return; } if (!targetContainer) { console.warn(`Target container "${containerSelector}" not found for data-breakinto element.`); return; } // Determine breakpoint to use (custom or global) const breakpoint = customBreakpoint !== null ? customBreakpoint : MegaMenuCONFIG.minWidth; // Determine if item should be in target container (moved state) const shouldBeInContainer = currentWidth <= breakpoint; // Get current state of this breakinto item const currentItemState = breakintoItemStates.get(item); // Only process if this item's state changed if (currentItemState !== shouldBeInContainer) { breakintoItemStates.set(item, shouldBeInContainer); if (shouldBeInContainer) { // Move to target container // Store original parent and index if not already stored if (!breakintoOriginalParents.has(item)) { const originalParent = item.parentElement; const originalIndex = Array.from(originalParent.children).indexOf(item); breakintoOriginalParents.set(item, originalParent); breakintoOriginalIndexes.set(item, originalIndex); } // Mark item as moved and move to target container item.setAttribute('data-breakinto-moved', 'true'); targetContainer.appendChild(item); } else { // Move back to original parent at original position const originalParent = breakintoOriginalParents.get(item); const originalIndex = breakintoOriginalIndexes.get(item); if (originalParent && originalIndex !== undefined) { const children = originalParent.children; // Remove the moved marker item.removeAttribute('data-breakinto-moved'); if (originalIndex >= children.length) { // Insert at the end if original index is beyond current children originalParent.appendChild(item); } else { // Insert at the original position originalParent.insertBefore(item, children[originalIndex]); } } } } }); } function handleResponsiveMenu() { const currentIsMobile = window.innerWidth < MegaMenuCONFIG.minWidth; const currentWidth = window.innerWidth; const nestMenu = document.querySelector('.dwc-nest-menu'); if (!nestMenu) return; // Get all target items from both original locations and nest menu const targetItemsInOriginal = document.querySelectorAll('.brx-nav-nested-items > .menu-item > [data-breakout-link]'); const targetItemsInNest = nestMenu.querySelectorAll('[data-breakout-link]'); // Combine both nodelets into a single array const targetItems = [...targetItemsInOriginal, ...targetItemsInNest]; let hasStateChange = false; targetItems.forEach(item => { if (item.closest('.dwc-header-logo-item')) return; // don't interfere with centerd logo item const parent = item.parentElement; const breakpointAttr = item.getAttribute('data-breakout-link'); // Determine if item should be in mobile state let shouldBeMobile; if (!breakpointAttr || breakpointAttr.trim() === '') { // No custom breakpoint - use global mobile view logic shouldBeMobile = currentIsMobile; } else { // Custom breakpoint - check if within range const customBreakpoint = parseInt(breakpointAttr, 10); if (isNaN(customBreakpoint)) { // Invalid breakpoint value - fallback to global logic shouldBeMobile = currentIsMobile; } else { // Within custom range: between customBreakpoint and MegaMenuCONFIG.minWidth (exclusive) shouldBeMobile = currentWidth >= customBreakpoint && currentWidth < MegaMenuCONFIG.minWidth; } } // Get current state of this item const currentItemState = itemStates.get(item); // Only process if this item's state changed if (currentItemState !== shouldBeMobile) { hasStateChange = true; itemStates.set(item, shouldBeMobile); if (shouldBeMobile) { // Move to mobile state parent.classList.add('has-breakout-link'); // Store original parent if not already stored if (!originalParents.has(item)) { originalParents.set(item, parent); } // Move item to nest menu nestMenu.insertBefore(item, nestMenu.firstChild); // Hide the original parent parent.style.display = 'none'; } else { // Move to desktop state - restore to original parent const originalParent = originalParents.get(item); if (originalParent) { originalParent.appendChild(item); originalParent.style.display = ''; originalParent.classList.remove('has-breakout-link'); } } } }); // Update global mobile view state only if there was a global state change if (isMobileView !== currentIsMobile) { isMobileView = currentIsMobile; } // Optional: You can add logic here if you need to do something when any state changes if (hasStateChange) { // Any additional logic when items change state } } function handleAllResponsiveElements() { handleResponsiveMenu(); // Handle breakout functionality handleBreakInItems(); // Handle breakin functionality handleBreakIntoItems(); // Handle breakinto functionality ← ADD THIS LINE } // Run on page load handleAllResponsiveElements(); // Debounce resize events window.addEventListener('resize', () => { clearTimeout(resizeTimer); resizeTimer = setTimeout(handleAllResponsiveElements, 150); }); // Optional: Add for better initial load behavior document.addEventListener('DOMContentLoaded', handleAllResponsiveElements); // REINITIALIZE ON URL CHANGE // REINITIALIZE ON URL CHANGE if (MegaMenuCONFIG.reinitializeOnURLchange) { // console.log('🚀 MegaMenu: URL change reinitialization active'); let lastPath = normalizePathForComparison(window.location.pathname); let reinitTimer = null; let lastReinit = 0; const REINIT_COOLDOWN = 1000; let isInitialized = false; let detectionMethod = null; let forceReinitFromSwup = false; function normalizePathForComparison(path) { return path.replace(/\/$/, '') || '/'; } function setAriaCurrentPage() { // console.log('📍 Setting aria-current="page" for current URL'); // First, clear any existing aria-current attributes in the menu document.querySelectorAll('.dwc-nest-menu [aria-current="page"]').forEach(element => { element.removeAttribute('aria-current'); }); const currentPath = window.location.pathname; const navLinks = document.querySelectorAll('.dwc-nest-menu a[href]'); let foundMatch = false; navLinks.forEach(link => { const href = link.getAttribute('href'); if (!href) return; try { // Handle relative URLs let linkPath = href; if (!href.startsWith('http')) { // Create absolute URL from relative path const url = new URL(href, window.location.origin); linkPath = url.pathname; } else { // For absolute URLs, extract just the path const url = new URL(href); linkPath = url.pathname; } // Normalize paths for comparison const normalizedLinkPath = normalizePathForComparison(linkPath); const normalizedCurrentPath = normalizePathForComparison(currentPath); // Check for match if (normalizedLinkPath === normalizedCurrentPath) { link.setAttribute('aria-current', 'page'); // console.log(`✅ Set aria-current="page" on:`, link); foundMatch = true; } } catch (e) { // Fallback: simple string comparison const normalizedHref = normalizePathForComparison(href); const normalizedCurrent = normalizePathForComparison(currentPath); if (normalizedHref === normalizedCurrent || (normalizedCurrent === '/' && normalizedHref === '') || normalizedHref.endsWith(normalizedCurrent)) { link.setAttribute('aria-current', 'page'); // console.log(`✅ Set aria-current="page" on (fallback):`, link); foundMatch = true; } } }); if (!foundMatch) { // console.log('⚠️ No matching link found for current page:', currentPath); } } function performReinit() { const menuElement = document.querySelector(MegaMenuCONFIG.nestMenuSelector); if (!menuElement) { console.warn('⚠️ MegaMenu: Menu element not found after navigation. Skipping reinit.'); return; } try { // console.log('🔄 MegaMenu: Performing reinitialization...'); // First, set aria-current="page" on the current page link setAriaCurrentPage(); // Then reinitialize the menu mainMenu.reinitialize(); // console.log('✅ MegaMenu reinitialized via', detectionMethod); lastReinit = Date.now(); forceReinitFromSwup = false; } catch (error) { console.error('❌ MegaMenu reinit failed:', error); forceReinitFromSwup = false; } } function shouldReinitialize(force = false) { const now = Date.now(); // Cooldown check if (now - lastReinit < REINIT_COOLDOWN) { // console.log('⏱️ MegaMenu: Reinit cooldown active'); return false; } // If forced by Swup, skip path comparison if (force || forceReinitFromSwup) { // console.log('🎯 MegaMenu: Forced reinit requested (Swup event)'); forceReinitFromSwup = false; return true; } const newPath = normalizePathForComparison(window.location.pathname); // Path comparison if (newPath === lastPath) { // console.log('⏭️ MegaMenu: Path unchanged, skipping'); return false; } // console.log('🔄 MegaMenu: Path changed:', lastPath, '->', newPath); lastPath = newPath; return true; } // ============================================================================ // SWUP INTEGRATION - PRIMARY METHOD // ============================================================================ function setupSwupIntegration() { // console.log('🎯 MegaMenu: Setting up Swup integration'); // Method 1: Direct Swup instance hooks (if available) if (window.swup) { // console.log('✅ MegaMenu: Found Swup instance, using direct hooks'); // Hook into Swup's events swup.hooks.on('content:replace', () => { // console.log('📍 MegaMenu: Swup content replaced'); forceReinitFromSwup = true; handleSwupNavigation(); }); swup.hooks.on('page:view', () => { // console.log('📍 MegaMenu: Swup page viewed'); forceReinitFromSwup = true; handleSwupNavigation(); }); detectionMethod = 'Swup instance hooks'; return true; } // Method 2: Swup custom events (works without instance access) const swupEvents = [ 'swup:content:replace', 'swup:page:view', 'swup:visit:end' ]; let hasSwupEvents = false; swupEvents.forEach(eventName => { document.addEventListener(eventName, (event) => { // console.log(`📡 MegaMenu: Swup event fired: ${eventName}`); forceReinitFromSwup = true; handleSwupNavigation(); }, { once: false }); hasSwupEvents = true; }); if (hasSwupEvents) { detectionMethod = 'Swup events'; // console.log('✅ MegaMenu: Swup event listeners attached'); return true; } return false; } function handleSwupNavigation() { // Clear any existing timer clearTimeout(reinitTimer); // Wait a bit to ensure DOM is fully updated reinitTimer = setTimeout(() => { // Pass true to force reinit for Swup events if (shouldReinitialize(true)) { performReinit(); } }, 300); } // ============================================================================ // FALLBACK: HISTORY API (For non-Swup navigations) // ============================================================================ function setupHistoryAPIFallback() { // console.log('🔧 MegaMenu: Setting up History API fallback'); function handleHistoryNavigation() { // Clear any existing timer clearTimeout(reinitTimer); // Wait longer for History API (might be a full page load) reinitTimer = setTimeout(() => { // Don't force for History API, only check path changes if (shouldReinitialize()) { // console.log('📍 MegaMenu: History API navigation detected'); performReinit(); } }, 1000); } // Override history methods const originalPushState = history.pushState; const originalReplaceState = history.replaceState; history.pushState = function() { const result = originalPushState.apply(history, arguments); // console.log('📍 MegaMenu: pushState called'); handleHistoryNavigation(); return result; }; history.replaceState = function() { const result = originalReplaceState.apply(history, arguments); // console.log('📍 MegaMenu: replaceState called'); handleHistoryNavigation(); return result; }; // Listen for back/forward navigation window.addEventListener('popstate', () => { // console.log('📍 MegaMenu: popstate event'); handleHistoryNavigation(); }); return true; } // ============================================================================ // WATCH FOR SWUP LOAD (For late loading) // ============================================================================ function watchForSwupLoad(timeout = 5000) { // console.log('👀 MegaMenu: Watching for Swup to load...'); // If Swup is already loaded, set it up immediately if (window.swup || typeof window.Swup === 'function') { // console.log('✅ MegaMenu: Swup already loaded'); setupSwupIntegration(); return; } const startTime = Date.now(); let checkCount = 0; const checkInterval = setInterval(() => { checkCount++; // Check for Swup if (window.swup || typeof window.Swup === 'function') { clearInterval(checkInterval); // console.log(`✅ MegaMenu: Swup detected after ${checkCount} checks (${Date.now() - startTime}ms)`); setupSwupIntegration(); return; } // Timeout check if (Date.now() - startTime > timeout) { clearInterval(checkInterval); // console.log(`⏰ MegaMenu: Swup watch timeout after ${timeout}ms`); if (!detectionMethod) { detectionMethod = 'History API fallback'; // console.log('⚠️ MegaMenu: Swup not found, using History API only'); } } }, 100); } // ============================================================================ // INITIALIZATION // ============================================================================ function initialize() { if (isInitialized) { // console.log('⚠️ MegaMenu: Already initialized'); return; } // console.log('🚀 MegaMenu: Initializing reinit detection...'); // Try to set up Swup integration first if (setupSwupIntegration()) { // console.log(`✅ MegaMenu: Using ${detectionMethod} for reinit detection`); isInitialized = true; return; } // Swup not loaded yet, set up fallback and watch for Swup setupHistoryAPIFallback(); watchForSwupLoad(); isInitialized = true; // console.log('✅ MegaMenu: Reinit detection initialized'); } // Run initialization initialize(); // ============================================================================ // DIAGNOSTIC INFO // ============================================================================ // console.log('%c📊 MegaMenu Reinit Diagnostic', 'color: #2196F3; font-weight: bold'); // console.log('Initial path:', lastPath); // console.log('Detection method:', detectionMethod || 'Waiting for Swup...'); // console.log('Reinit cooldown:', REINIT_COOLDOWN + 'ms'); // console.log('Swup forced reinit:', 'Enabled'); // console.log('Aria-current setting:', 'Enabled in reinit only'); } console.log('%c<Mega Menu Pro v1.4.4>', 'color: #b388eb');

/*prevent FOUC on mobile when using sidebar */ .dwc-mobile :is(.bricks-is-frontend.brx-header-left, .bricks-is-frontend.brx-header-right) #brx-header { position: relative; inline-size: 100%; flex-direction: column; } .dwc-mobile .bricks-is-frontend:is(.brx-header-left, .brx-header-right) :is(#brx-content, #brx-footer) { margin-inline-start: 0; } /*prevent FOUC on desktop when using sidebar */ .bricks-is-frontend:is(.brx-header-left, .brx-header-right):not(.show-nav) .dwc-nav-wrapper { display: none; } /*=== sidebar css ===*/ html:not(.dwc-mobile) :is(.brx-header-left, .brx-header-right):not([data-builder-window]) #brx-header { flex-direction: column; box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.7); } html:not(.dwc-mobile) :is(.brx-header-left, .brx-header-right):not([data-builder-window]).no-scroll { overflow: visible; } html:not(.dwc-mobile) :is(.brx-header-left, .brx-header-right):not([data-builder-window]) #brx-header .dwc-nest-menu.brxe-nav-nested .brx-nav-nested-items { max-block-size: 100dvb; padding-block-end: 12rem; overscroll-behavior: contain; } html:not(.dwc-mobile) :is(.brx-header-left, .brx-header-right):not([data-builder-window]) #brx-header .dwc-nav-wrapper { position: relative; overflow: hidden; block-size: 100%; transform: translateX(0%); visibility: visible; } html:not(.dwc-mobile) :is(.brx-header-left, .brx-header-right):not([data-builder-window]) .dwc-nest-menu .brxe-toggle { display: none !important; } html:not(.dwc-mobile) :is(.brx-header-left, .brx-header-right):not([data-builder-window]) #brx-header .dwc-nest-menu { display: flex; flex-direction: column; } html:not(.dwc-mobile) :is(.brx-header-left, .brx-header-right):not([data-builder-window]) #brx-header .dwc-nest-header > div { display: flex; grid-template-columns: 1fr; block-size: 100%; flex-direction: column; justify-content: flex-start; } html:not(.dwc-mobile) :is(.brx-header-left, .brx-header-right):not([data-builder-window]) #brx-header .dwc-menu-wrap { inline-size: 100%; display: grid; grid-template-columns: 1fr; block-size: 100%; } html:not(.dwc-mobile) :is(.brx-header-left, .brx-header-right):not([data-builder-window]) #brx-header :is(.brxe-code, .dwc-nest-menu-overlay) { display: none; } html:not(.dwc-mobile) :is(.brx-header-left, .brx-header-right):not([data-builder-window]) #brx-header .dwc-nest-header { inline-size: 100%; padding-inline: 0; } html:not(.dwc-mobile) :is(.brx-header-left, .brx-header-right):not([data-builder-window]) #brx-header .dwc-nest-menu-top { min-block-size: var(--top-offset); } html:not(.dwc-mobile) :is(.brx-header-left, .brx-header-right):not([data-builder-window]) #brx-header .dwc-nest-menu:not( [data-hide-close-bar = 'true']) .brx-dropdown-content { inset-block-start: calc(var(--top-offset) + 1px) !important; } html:not(.dwc-mobile) :is(.brx-header-left, .brx-header-right):not([data-builder-window]) #brx-header .dwc-nest-menu:not( [data-submenu-reveal = 'slide']) .brx-dropdown-content:not([data-submenu-reveal = 'slide'] *) { inset-inline-start: 0; inset-block-start: unset !important; overflow: hidden; } html:not(.dwc-mobile) :is(.brx-header-left, .brx-header-right):not([data-builder-window]) #brx-header .dwc-nest-menu:not([data-submenu-reveal = 'slide']) .brxe-dropdown:not(.open.active) > .brx-dropdown-content > .brxe-dropdown:not([data-submenu-reveal = 'slide'] *){ visibility: hidden; } html:not(.dwc-mobile) :is(.brx-header-left, .brx-header-right):not([data-builder-window]) #brx-header .dwc-nest-menu.brxe-nav-nested.brx-open .brxe-dropdown > .brx-dropdown-content { overscroll-behavior: contain; min-inline-size: var(--mobile-menu-width); } html:not(.dwc-mobile) :is(.brx-header-left, .brx-header-right):not([data-builder-window]) #brx-header .dwc-nest-menu .brxe-dropdown.open > .brx-submenu-toggle button:not([data-submenu-reveal = 'expand'] button) { min-block-size: calc(var(--top-offset) - 1px); inset-block-start: 0; } html:not(.dwc-mobile) :is(.brx-header-left, .brx-header-right):not([data-builder-window]) #brx-header .dwc-nest-menu .brxe-dropdown.open[data-submenu-reveal = 'slide'] > .brx-submenu-toggle button { min-block-size: calc(var(--top-offset) - 1px); inset-block-start: 0; } html:not(.dwc-mobile) :is(.brx-header-left, .brx-header-right):not([data-builder-window]) #brx-header .dwc-nest-menu .brxe-dropdown .brx-submenu-toggle button { min-block-size: 0; } /* sidebar css ends*/ /*sidebar in builder*/ /*=== sidebar css ===*/ :is(.brx-header-left, .brx-header-right)[data-builder-window] #brx-header { flex-direction: column; box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.7); --top-offset: 40px; } :is(.brx-header-left, .brx-header-right)[data-builder-window] #brx-header .dwc-nest-menu.brxe-nav-nested .brx-nav-nested-items { max-block-size: 100dvb; padding-block-end: 12rem; overscroll-behavior: contain; } :is(.brx-header-left, .brx-header-right)[data-builder-window] #brx-header .dwc-nav-wrapper { position: relative; overflow: hidden; block-size: 100%; transform: translateX(0%); visibility: visible; } body:is(.brx-header-left, .brx-header-right)[data-builder-window] .dwc-nest-menu .brxe-toggle { display: none !important; } :is(.brx-header-left, .brx-header-right)[data-builder-window] #brx-header .dwc-nest-menu { display: flex; flex-direction: column; } :is(.brx-header-left, .brx-header-right)[data-builder-window] #brx-header .dwc-nest-header > div { display: flex; grid-template-columns: 1fr; block-size: 100%; flex-direction: column; justify-content: flex-start; } :is(.brx-header-left, .brx-header-right)[data-builder-window] #brx-header .dwc-menu-wrap { inline-size: 100%; display: grid; grid-template-columns: 1fr; block-size: 100%; } :is(.brx-header-left, .brx-header-right)[data-builder-window] #brx-header .dwc-nest-header { inline-size: 100%; padding-inline: 0; } :is(.brx-header-left, .brx-header-right)[data-builder-window] #brx-header .dwc-nest-menu-top { min-block-size: var(--top-offset); } :is(.brx-header-left, .brx-header-right)[data-builder-window] #brx-header .dwc-nest-menu .brx-dropdown-content { inset-block-start: calc(var(--top-offset) - 1px) !important; } :is(.brx-header-left, .brx-header-right)[data-builder-window] #brx-header .dwc-nest-menu.brxe-nav-nested.brx-open .brxe-dropdown > .brx-dropdown-content { overscroll-behavior: contain; } :is(.brx-header-left, .brx-header-right)[data-builder-window] #brx-header .dwc-nest-menu .brxe-dropdown.open > .brx-submenu-toggle button { min-block-size: calc(var(--top-offset) - 1px); inset-block-start: 0; } :is(.brx-header-left, .brx-header-right)[data-builder-window] #brx-header .dwc-nest-menu .brxe-dropdown .brx-submenu-toggle button { min-block-size: 0; } :is(.brx-header-left, .brx-header-right)[data-builder-window] .dwc-nest-menu { margin: 0 !important; } :is(.brx-header-left, .brx-header-right)[data-builder-window] .brx-nav-nested-items { flex-direction: column !important; } :is(.brx-header-left, .brx-header-right)[data-builder-window] .dwc-nest-toggle--open.brxe-toggle { display: flex !important; } :is(.brx-header-left, .brx-header-right)[data-builder-window] .dwc-nest-menu .brx-nav-nested-items { position: relative !Important; background: var(--mobile-menu-bg) !important; align-items: stretch; flex: 1; } :where(.brx-header-left, .brx-header-right)[data-builder-mode]:not(:has(.dwc-sidebar)) .dwc-nest-menu-top::before { content: 'this space is the back text bar'; padding: 1rem; background-color: gray; color: white; width: 100%; text-transform: uppercase; font-size: 12px; font-weight: bold; letter-spacing: 1px; } /* MENU CTA (LAST BUTTON) */ :is(.brx-header-left, .brx-header-right)[data-builder-window] [data-last-item-is-button="true"].dwc-nest-menu .brx-nav-nested-items > .menu-item:last-of-type { padding-inline: var(--menu-item-inline-padding) !important; padding-block: var(--menu-item-block-padding) !important; } :is(.brx-header-left, .brx-header-right)[data-builder-window] .dwc-nest-menu-top { min-block-size: 80px !important; } :is(.brx-header-left, .brx-header-right)[data-builder-window] .dwc-nest-nav-items { overflow-y: scroll; } :is(.brx-header-left, .brx-header-right)[data-builder-mode] .brx-dropdown-content { min-inline-size: var(--mobile-menu-width); position: static; } :is(.brx-header-left, .brx-header-right)[data-builder-window] #brx-header .dwc-nest-menu.brxe-nav-nested .brx-nav-nested-items { flex-wrap: nowrap; } :is(.brx-header-left, .brx-header-right)[data-builder-window] #brx-header .dwc-nest-menu .brx-dropdown-content { visibility: visible !important; opacity: 1; } /*OVERLAY SIDEBAR*/ html:not(.dwc-mobile):has([data-overlay-sidebar=true]) { --mobile-menu-bg: rgb(255 255 255 / 0%); --menu-item-border: solid 1px rgb(255 255 255 / 50%); } html:not(.dwc-mobile):has([data-overlay-sidebar=true]) :is(.brx-header-left, .brx-header-right):not([data-builder-modee]) :is(main, footer){ margin: 0 !important } html:not(.dwc-mobile):has([data-overlay-sidebar=true]) :is(.brx-header-left, .brx-header-right):not([data-builder-modee]) :is(main, footer) :where(section):not(section>section) { padding-inline-start: calc(var(--mobile-menu-width) + clamp(1.5rem, calc(0.625vw + 1.375rem), 1.875rem)); max-inline-size: 100% } html:not(.dwc-mobile):has([data-overlay-sidebar=true]) :is(.brx-header-left, .brx-header-right):not([data-builder-modee]) #brx-header { border-radius: var(--overlay-sidebar-radius); overflow: hidden; background: var(--overlay-sidebar-bg); box-shadow: var(--overlay-sidebar-shadow) !important; inset: var(--overlay-sidebar-inset); } html:not(.dwc-mobile):has([data-overlay-sidebar=true]) :is(.brx-header-left, .brx-header-right):not([data-builder-modee]) .dwc-nest-header{ backdrop-filter: blur(13px); background: transparent !important; } html:not(.dwc-mobile):has([data-overlay-sidebar=true]):not([data-builder-modee]) .brx-dropdown-content { background-color: rgb(255 255 255 / 100%); } /*NO BRX-OPEN STYLES*/ html:not(.dwc-mobile) :is(.brx-header-left, .brx-header-right):not([data-builder-window]) #brx-header .dwc-nest-menu.brxe-nav-nested .brx-nav-nested-items { display: flex; flex-wrap: nowrap; flex-direction: column !important; } html:not(.dwc-mobile) :is(.brx-header-left, .brx-header-right):not([data-builder-window]) .dwc-nest-menu.brxe-nav-nested .brxe-dropdown .brx-dropdown-content { visibility: visible; min-inline-size: var(--mobile-menu-width) !important; } html:not(.dwc-mobile) :is(.brx-header-left, .brx-header-right):not([data-builder-window]) .dwc-nest-menu[data-submenu-reveal="expand"] .brxe-dropdown.open>.brx-dropdown-content { position: static; }

class SidebarNavigation { constructor(options = {}) { // Basic configuration properties this.config = { minWidth: options.minWidth || MegaMenuCONFIG.minWidth, // Using external minWidth variable menuSelector: options.menuSelector || '.dwc-nest-menu', openClass: options.openClass || 'brx-open', activeClasses: options.activeClasses || ['open', 'active'], leftHeaderClass: options.leftHeaderClass || 'brx-header-left', rightHeaderClass: options.rightHeaderClass || 'brx-header-right', debounceDelay: options.debounceDelay || 100, menuItemClickDelay: options.menuItemClickDelay || 300 }; // Set dependent selectors const menuSelector = this.config.menuSelector; this.config.submenuToggleSelector = options.submenuToggleSelector || `${menuSelector} .brx-submenu-toggle`; this.config.dropdownSelector = options.dropdownSelector || `${menuSelector} .brxe-dropdown`; this.config.dropdownContentSelector = options.dropdownContentSelector || `${menuSelector} .brx-dropdown-content`; // State this.previousHeaderClass = null; this.dropdownClickHandlers = new Map(); this.menuHoverHandlers = null; this.menuItemClickTimeout = null; this.keyboardNavHandler = null; this.cachedFocusableElements = null; this.cachedElements = { menuElement: null, navElement: null, dropdowns: null, dropdownToggles: null, menuItems: null }; // Bind methods to this instance this.handleResize = this.debounce(this.handleMenu.bind(this), this.config.debounceDelay); this.handleOutsideClick = this.handleOutsideClick.bind(this); } // Initialize everything - called once init() { // Wait for DOM to be fully loaded before attaching events if (document.readyState === 'loading') { document.addEventListener('DOMContentLoaded', () => { this.initAfterDOMLoaded(); }, { once: true }); } else { this.initAfterDOMLoaded(); } return this; } // Separate initialization method to run after DOM is loaded initAfterDOMLoaded() { // Cache DOM elements once this.cacheElements(); // Setup resize event with passive flag window.addEventListener('resize', this.handleResize, { passive: true }); // Setup mutation observer for critical class changes only this.setupMutationObserver(); // Initial setup based on current screen size this.handleMenu(); // Cache focusable elements once if header class is present if (this.hasHeaderClass()) { this.cacheFocusableElements(); this.setupMenuFocusNavigation(); } } // Cache all required DOM elements upfront cacheElements() { this.cachedElements.menuElement = document.querySelector(this.config.menuSelector); if (this.cachedElements.menuElement) { this.cachedElements.navElement = this.cachedElements.menuElement.querySelector('.dwc-nest-nav-items'); this.cachedElements.dropdowns = Array.from(document.querySelectorAll(this.config.dropdownSelector)); this.cachedElements.dropdownToggles = Array.from(document.querySelectorAll(this.config.submenuToggleSelector)); this.cachedElements.menuItems = Array.from(document.querySelectorAll(`${this.config.menuSelector} .menu-item`)); } } // Set up a focused mutation observer only for dropdown state changes setupMutationObserver() { if (!this.cachedElements.dropdowns || this.cachedElements.dropdowns.length === 0) return; const callback = (mutations) => { for (let mutation of mutations) { if (mutation.type === 'attributes' && mutation.attributeName === 'class') { const target = mutation.target; const prevClassList = mutation.oldValue ? mutation.oldValue.split(' ') : []; const hadBothBefore = prevClassList.includes('open') && prevClassList.includes('active'); const hasBothNow = target.classList.contains('open') && target.classList.contains('active'); if (hadBothBefore !== hasBothNow) { this.updateDropdownAccessibility(); break; // Only need to update once per batch } } } }; // Create observer with optimized options this.classObserver = new MutationObserver(callback); // Observe only the dropdown elements this.cachedElements.dropdowns.forEach(dropdown => { this.classObserver.observe(dropdown, { attributes: true, attributeFilter: ['class'], attributeOldValue: true }); }); } // Cache focusable elements for keyboard navigation cacheFocusableElements() { if (!this.cachedElements.navElement) return; // Get direct children of nav const directChildren = Array.from(this.cachedElements.navElement.children); // Find the first focusable element within each direct child this.cachedFocusableElements = directChildren.map(child => { // Check if the child itself is focusable if (child.matches('a, button, input, select, textarea, [tabindex]:not([tabindex="-1"])')) { return child; } // Otherwise, find the first focusable element within this child return child.querySelector('a, button, input, select, textarea, [tabindex]:not([tabindex="-1"])'); }).filter(Boolean); // Remove null/undefined values } // Clean up all event listeners and observers destroy() { // Clean up the mutation observer if (this.classObserver) { this.classObserver.disconnect(); this.classObserver = null; } // Clean up resize listener window.removeEventListener('resize', this.handleResize); // Clean up click handlers if (this.dropdownClickHandlers.size > 0) { this.dropdownClickHandlers.forEach((handler, toggle) => { toggle.removeEventListener('click', handler); }); this.dropdownClickHandlers.clear(); } // Clean up hover handlers this.cleanupMenuHover(); // Clean up menu item click handlers this.cleanupMenuItemClicks(); // Clean up outside click handler document.removeEventListener('click', this.handleOutsideClick); // Clean up keyboard navigation if (this.keyboardNavHandler) { document.removeEventListener('keydown', this.keyboardNavHandler); this.keyboardNavHandler = null; } // Clear any pending timeouts if (this.menuItemClickTimeout) { clearTimeout(this.menuItemClickTimeout); this.menuItemClickTimeout = null; } } // Utility methods hasHeaderClass() { return document.body.classList.contains(this.config.leftHeaderClass) || document.body.classList.contains(this.config.rightHeaderClass); } debounce(func, delay) { let timer; return (...args) => { clearTimeout(timer); timer = setTimeout(() => func(...args), delay); }; } // Check if an element has all the required active classes hasAllActiveClasses(element) { return this.config.activeClasses.every(className => element.classList.contains(className)); } // Toggle all active classes on an element toggleActiveClasses(element) { this.config.activeClasses.forEach(className => { element.classList.toggle(className); }); } // Core functionality methods handleMenu() { if (!this.cachedElements.menuElement) return; if (!this.hasHeaderClass() && !this.previousHeaderClass) return; const screenWidth = window.innerWidth; const isLargeScreen = screenWidth >= this.config.minWidth; const menuElement = this.cachedElements.menuElement; if (!isLargeScreen) { // Save which class was present before removal if (this.hasHeaderClass()) { this.previousHeaderClass = document.body.classList.contains(this.config.leftHeaderClass) ? this.config.leftHeaderClass : this.config.rightHeaderClass; // Remove header classes document.body.classList.remove(this.config.leftHeaderClass, this.config.rightHeaderClass); menuElement.classList.remove(this.config.openClass); // Reset accessibility attributes this.resetAccessibilityAttributes(); } // Clean up event handlers for mobile view this.cleanupMenuHover(); this.cleanupMenuItemClicks(); this.cleanupDropdownHandlers(); document.removeEventListener('click', this.handleOutsideClick); return; } // Large screen behavior if (!this.hasHeaderClass() && this.previousHeaderClass) { document.body.classList.add(this.previousHeaderClass); } if (this.hasHeaderClass()) { if (!menuElement.classList.contains(this.config.openClass)) { menuElement.classList.add(this.config.openClass); } // Setup elements for large screen view this.setupMenuHover(); this.setupMenuItemClicks(); this.setupDropdownHandlers(); this.setupMenuFocusNavigation(); this.updateDropdownAccessibility(); // Ensure outside click handler is set up document.removeEventListener('click', this.handleOutsideClick); document.addEventListener('click', this.handleOutsideClick, { passive: false }); } } // Reset accessibility attributes when switching to mobile resetAccessibilityAttributes() { if (!this.cachedElements.dropdowns) return; // Remove all inert attributes from dropdown contents this.cachedElements.dropdowns.forEach(dropdown => { const content = dropdown.querySelector(this.config.dropdownContentSelector); if (content) { content.removeAttribute('inert'); } const button = dropdown.querySelector('button'); if (button) { button.setAttribute('aria-expanded', 'false'); } }); } setupMenuFocusNavigation() { // Only run if hasHeaderClass() is true and we have focusable elements if (!this.hasHeaderClass() || !this.cachedFocusableElements || this.cachedFocusableElements.length === 0) { return; } // Clean up previous handler if it exists if (this.keyboardNavHandler) { document.removeEventListener('keydown', this.keyboardNavHandler, true); this.keyboardNavHandler = null; } const navMenu = this.cachedElements.menuElement; const focusableElements = this.cachedFocusableElements; const firstFocusableElement = focusableElements[0]; const lastFocusableElement = focusableElements[focusableElements.length - 1]; // Find adjacent focusable elements outside the menu (only once during setup) const headerElement = navMenu.closest('header') || document.querySelector('header'); // Prepare variables to hold adjacent elements let prevFocusableElement = null; let nextFocusableElement = null; let firstElementAfterHeader = null; if (headerElement) { // Get all focusable elements within the header - do this once and cache the result const headerFocusables = Array.from( headerElement.querySelectorAll('a:not([tabindex="-1"]), button:not([tabindex="-1"]), input:not([tabindex="-1"]), select:not([tabindex="-1"]), textarea:not([tabindex="-1"]), [tabindex]:not([tabindex="-1"])') ).filter(el => window.getComputedStyle(el).display !== 'none'); // Find the index of our first and last menu elements in one pass const menuStartIndex = headerFocusables.indexOf(firstFocusableElement); const menuEndIndex = headerFocusables.indexOf(lastFocusableElement); // Cache the adjacent elements if (menuStartIndex > 0) { prevFocusableElement = headerFocusables[menuStartIndex - 1]; } if (menuEndIndex !== -1 && menuEndIndex < headerFocusables.length - 1) { nextFocusableElement = headerFocusables[menuEndIndex + 1]; } // Pre-calculate the first element after header - but only if needed if (!nextFocusableElement) { // Use a more efficient selector that targets immediate children of body that aren't the header const selector = 'body > *:not(header)'; const nonHeaderElements = document.querySelectorAll(selector); // Only process if we have elements if (nonHeaderElements.length > 0) { // Create a function to find the first focusable element (used later if needed) this.findFirstFocusableAfterHeader = () => { for (const element of nonHeaderElements) { const focusable = element.querySelector('a:not([tabindex="-1"]), button:not([tabindex="-1"]), input:not([tabindex="-1"]), select:not([tabindex="-1"]), textarea:not([tabindex="-1"]), [tabindex]:not([tabindex="-1"])'); if (focusable && window.getComputedStyle(focusable).display !== 'none') { return focusable; } } return null; }; } } } // Create keyboard navigation handler with closure over the cached elements this.keyboardNavHandler = (e) => { // Quick check for Tab key first if (e.key !== 'Tab') return; // Then check if focus is inside the menu if (!navMenu.contains(document.activeElement)) return; let targetElement = null; // Handle tab navigation at boundaries only if (!e.shiftKey && document.activeElement === lastFocusableElement) { // Forward tab from last element e.preventDefault(); e.stopPropagation(); if (nextFocusableElement) { targetElement = nextFocusableElement; } else if (this.findFirstFocusableAfterHeader) { // Only search for elements after header if needed and not already found firstElementAfterHeader = this.findFirstFocusableAfterHeader(); targetElement = firstElementAfterHeader; } // Focus on the target or body as fallback setTimeout(() => { if (targetElement) { targetElement.focus(); } else { document.body.setAttribute('tabindex', '-1'); document.body.focus(); document.body.removeAttribute('tabindex'); } }, 10); } else if (e.shiftKey && document.activeElement === firstFocusableElement) { // Backward tab from first element e.preventDefault(); e.stopPropagation(); setTimeout(() => { if (prevFocusableElement) { prevFocusableElement.focus(); } else { document.body.setAttribute('tabindex', '-1'); document.body.focus(); document.body.removeAttribute('tabindex'); } }, 10); } }; // Use capture phase for the event document.addEventListener('keydown', this.keyboardNavHandler, true); } setupMenuHover() { const menuElement = this.cachedElements.menuElement; if (!menuElement) return; // Clean up existing hover handlers first this.cleanupMenuHover(); // Create event handlers const mouseenterHandler = () => { menuElement.classList.add(this.config.openClass); }; const mouseleaveHandler = () => { menuElement.classList.remove(this.config.openClass); }; // Add event listeners with passive flag for better performance menuElement.addEventListener('mouseenter', mouseenterHandler, { passive: true }); menuElement.addEventListener('mouseleave', mouseleaveHandler, { passive: true }); // Store the handlers for cleanup this.menuHoverHandlers = { element: menuElement, mouseenter: mouseenterHandler, mouseleave: mouseleaveHandler }; } cleanupMenuHover() { if (this.menuHoverHandlers) { const { element, mouseenter, mouseleave } = this.menuHoverHandlers; element.removeEventListener('mouseenter', mouseenter); element.removeEventListener('mouseleave', mouseleave); this.menuHoverHandlers = null; } } setupMenuItemClicks() { if (!this.cachedElements.menuItems || this.cachedElements.menuItems.length === 0) return; // Clean up existing handlers first this.cleanupMenuItemClicks(); const menuElement = this.cachedElements.menuElement; const menuItemHandlers = new Map(); this.cachedElements.menuItems.forEach(item => { const clickHandler = () => { if (this.hasHeaderClass()) { // Clear any existing timeout if (this.menuItemClickTimeout) { clearTimeout(this.menuItemClickTimeout); } // Set timeout before adding the class this.menuItemClickTimeout = setTimeout(() => { if (!menuElement.classList.contains(this.config.openClass)) { menuElement.classList.add(this.config.openClass); } }, this.config.menuItemClickDelay); } }; menuItemHandlers.set(item, clickHandler); item.addEventListener('click', clickHandler); }); this.menuItemClickHandlers = menuItemHandlers; } cleanupMenuItemClicks() { if (this.menuItemClickHandlers && this.menuItemClickHandlers instanceof Map) { this.menuItemClickHandlers.forEach((handler, item) => { item.removeEventListener('click', handler); }); this.menuItemClickHandlers.clear(); } if (this.menuItemClickTimeout) { clearTimeout(this.menuItemClickTimeout); this.menuItemClickTimeout = null; } } setupDropdownHandlers() { if (!this.hasHeaderClass() || !this.cachedElements.dropdownToggles) return; // Clean up existing handlers first this.cleanupDropdownHandlers(); this.cachedElements.dropdownToggles.forEach(toggle => { const clickHandler = (event) => { event.stopPropagation(); event.preventDefault(); const dropdown = toggle.closest(this.config.dropdownSelector); if (dropdown) { this.toggleActiveClasses(dropdown); this.updateDropdownAccessibility(); } }; this.dropdownClickHandlers.set(toggle, clickHandler); toggle.addEventListener('click', clickHandler); }); } cleanupDropdownHandlers() { if (this.dropdownClickHandlers.size > 0) { this.dropdownClickHandlers.forEach((handler, toggle) => { toggle.removeEventListener('click', handler); }); this.dropdownClickHandlers.clear(); } } handleOutsideClick(event) { if (event.target.tagName === 'A') return; if (!event.target.closest(this.config.dropdownSelector)) return; if (!event.target.closest(this.config.submenuToggleSelector)) { event.preventDefault(); event.stopPropagation(); } } updateDropdownAccessibility() { // Only run if hasHeaderClass() is true if (!this.hasHeaderClass() || !this.cachedElements.dropdowns) return; this.cachedElements.dropdowns.forEach(dropdown => { const content = dropdown.querySelector(this.config.dropdownContentSelector); const button = dropdown.querySelector('button'); // Check if dropdown has all active classes const isOpen = this.hasAllActiveClasses(dropdown); if (content) { if (isOpen) { content.removeAttribute('inert'); } else { content.setAttribute('inert', ''); } } if (button) { button.setAttribute('aria-expanded', isOpen ? 'true' : 'false'); } }); } } const sidebarNav = new SidebarNavigation().init();

Over 300 products with discounts

Great deals

STARTING AT

R199.99

Start now

Wooden Tool

15%

Off

Make Deal

Apple Items

Starting at R159

Women Clothes

25%

Off

Shop now

T-Shirts

Starting at R199

Buy now

Free Courier

on All Orders Over R1999

100% Money Back

30 Days Return Policy

Secure Payment

We ensure secure payment

Online Support

24/7 Hours Support

Clothings

Black padded jacket

Rated 0 out of 5

Original price was: R799.Current price is: R699.

Clothings, Tshirt

Brown padded jacket

Rated 0 out of 5

Original price was: R799.Current price is: R699.

Watch

Black Watch

Rated 0 out of 5

Original price was: R180.Current price is: R170.

Accessories

Table pen

Rated 0 out of 5

Price range: R189 through R229

Select Options

Watch

Black analogue watch

Rated 0 out of 5

R1,599

Clothings

Black padded jacket

Rated 0 out of 5

Original price was: R799.Current price is: R699.

Clothings, Tshirt

Brown padded jacket

Rated 0 out of 5

Original price was: R799.Current price is: R699.

Watch

Elegant Watch

Rated 0 out of 5

R190

Watch

Elegant Watch Y

Rated 0 out of 5

R190

Watch

Black Watch Z

Rated 0 out of 5

Original price was: R180.Current price is: R170.

Watch

Black Watch

Rated 0 out of 5

Original price was: R180.Current price is: R170.

Clothings, Tshirt

Denim Jacket

Rated 0 out of 5

R1,250

Exclusive offer on Accessories

Flexible financing storewide purchases R1399 and up.

Explore Now

ALL-IN-ONE ECOMMERCE SOLUTION

Sarlie Digital - Your All in One Digital Marketer

As a team striving for perfection and care, we design and develop solutions to solve real-world website business problems.

Urna ullamcorper

Rated 0 out of 5

Accessories, Another Accessory

Table pen 2

Rated 0 out of 5

Select options

Accessories

Table pen

Rated 0 out of 5

Watch

Golden watch W

Rated 0 out of 5

Select options

Watch

Golden watch

Rated 0 out of 5

Clothings, Tshirt

Brown padded jacket

Rated 0 out of 5

Walk into these stores for our products

Shop 1

Shop 2

Shop 3

Shop 4

Shop 5

Shop 6

JOIN OUR NEWSLETTER NOW

Get our daily free tips and tricks newsletter in your inbox.

What is Lorem Ipsum? Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the…
What is Lorem Ipsum? Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the…

Over 300 products with discounts

Great deals

STARTING AT

R199.99

Wooden Tool

15%

Off

Apple Items

Starting at R159

Women Clothes

25%

Off

T-Shirts

Starting at R199

Free Courier

100% Money Back

Secure Payment

Online Support

Hot Deals

Best Selling

Newest Arrivals

Exclusive offer on Accessories

ALL-IN-ONE ECOMMERCE SOLUTION

Sarlie Digital - Your All in One Digital Marketer

Walk into these stores for our products

JOIN OUR NEWSLETTER NOW

Blog Posts