/* ======================================== 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; --slide-out-speed: 1.3; } /* ======================================= GENERAL NAV STYLES ========================================= */ :root { /* ======================== GENERAL COLORS/BACKGROUND ======================== */ --primary-clr: var(--primary-l-2); --header-bg: white; --dropdown-content-bg: white; --mobile-menu-bg: white; --mobile-menu-topbar-bg: white; /* =============================== GENERAL WIDTH | HEIGHT | SPACINGS ================================== */ --mobile-menu-width: min(300px, 100%); /* mobile & offcanvas */ --multilevel-dropdown-width: 200px; --dropdown-content-gap: 50px; /* header -> dropdown gap, 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: 1080px; /* preview width & default width for dropdown content */ /* =========================================== GENERAL BORDERS | SHADOWS | OVERLAY BACKDROP ============================================== */ --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 background & blur */ --nav-overlay-backdrop-blur: 0px; --nav-overlay-backdrop-clr: rgba(0, 0, 0, 0.2); /* ================================ MENU TOGGLE - Hamburger (additional settings at line 195) ================================= */ --menu-toggle-clr: var(--menu-item-clr); --menu-toggle-hover-clr: var(--menu-item-hover-clr); --menu-close-toggle-clr: var(--menu-item-clr); /* ======================== MENU ITEMS ======================== */ /* DEFAULT STATE */ --menu-item-clr: #fff; --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-height: 2px; --menu-item-active-border-bg: var(--primary-clr); /* 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); /* ======================== 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%); /* 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%); /* 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: 1px solid white; --menu-cta-radius: 3px; /* 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-size: 40px; --open-icon-line-height: 4px; --icon-line-gap: 0.7em; /* gap between the lines*/ --open-icon-line-variance: 9px; /* line width variation, e.g. 0 = same width*/ --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 */ /* ======================== TRANSITIONS ======================== */ /* Transition timing function */ --mobile-menu-ttf: cubic-bezier(0.8, 0.07, 0.2, 0.95); /* ================= 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); /* ======== DO NOT EDIT THIS VARIABLES! ======== */ --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); } /* ======================== 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 ===== */ /* 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 .sticky:not(.scrolling) .dwc-nest-header:not(:has(.brxe-dropdown.open)) :is(path, .cls-1):not(:is(.brx-submenu-toggle path)) { fill: 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 .sticky:not(.scrolling) .dwc-nest-header:not(:has(.brxe-dropdown.open)) { --menu-item-clr: white; --chevron-clr: white; --menu-item-hover-clr: white; --menu-item-hover-border-bg: white; --overlay-header-bg: transparent; --overlay-header-shadow: none; } /* STYLES BEFORE SCROLLING */ html:not(.dwc-mobile):has([data-sticky-overlay-special-style="true"]) .bricks-is-frontend .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 .sticky.scrolling { --overlay-header-bg: white; } /* STYLES WHEN SCROLLING :HOVER*/ html:not(.dwc-mobile):has([data-sticky-overlay-special-style="true"]) .bricks-is-frontend .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 .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.sticky .dwc-nest-header { transition: var(--transition); }

const MegaMenuCONFIG = { // Minimum width threshold for desktop, // should be 1px larger than mobile (max-width) breakpoint in the "MENU Styles/Options" CSS code block minWidth: 1201, //IMPORTANT: Also change min-width in the "MEGA MENU Codes" CSS code block headerSelector: '.dwc-nest-header', nestMenuSelector: '.dwc-nest-menu', closeNavOnClick: 1, closeOnHashClickOnly: 0, breakinToNavList: 0, /*do not enable if using last item is button*/ // 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', // Properties for dropdown positioning shiftFactor: 1, // Factor to shift overflow minOverflow: 10, // Minimum overflow threshold reinitializeOnURLchange: false, //useful 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' };

/*MOBILE MENU BREAKPOINT */ @media only screen and (max-width: 1200px) { .desktop-centered header:has([data-fix-centered-logo-fouc="true"]) { opacity: 0; } .dwc-nest-menu__logo[data-breakout-link] { margin-inline-end: auto } /*mobile logo*/ .dwc-nest-menu__mobile-logo > :is(svg, img) { height: 100%; } .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 .dwc-nest-menu[data-slide-in-direction="top"][data-match-overlay-header-width="true"] .brx-nav-nested-items { transform: translateY(-100%); } .dwc-mobile .bricks-is-frontend .dwc-nest-menu[data-slide-in-direction="top"][data-match-overlay-header-width="true"].brx-open .brx-nav-nested-items { transform: translateY(0%); } .dwc-mobile .bricks-is-frontend .dwc-nest-menu[data-slide-in-direction="top"][data-match-overlay-header-width="true"] .brx-nav-nested-items { transition: 0.45s; transition-timing-function: var(--mobile-menu-ttf); inset-block-start: calc(min(var(--overlay-header-radius), 2em) * -1); } .dwc-mobile .bricks-is-frontend .dwc-nest-menu[data-slide-in-direction="top"][data-submenu-reveal="expand"][data-match-overlay-header-width="true"] .brx-nav-nested-items { inset-block-start: calc(var(--dwc-nest-header-height) / -2); } .dwc-mobile .dwc-nest-menu[data-slide-in-direction="top"][data-match-overlay-header-width="true"] .brx-nav-nested-items { --mobile-menu-width: 100% !important; inline-size: var(--mobile-menu-width); border-bottom-left-radius: 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) / 2); overflow-x: hidden; } .dwc-mobile .dwc-nest-menu[data-slide-in-direction="top"][data-match-overlay-header-width="true"][data-submenu-reveal="expand"] .brx-nav-nested-items { max-block-size: fit-content; } .dwc-mobile .bricks-is-frontend .dwc-nest-menu[data-slide-in-direction="top"][data-match-overlay-header-width="true"] .dwc-nav-wrapper { transform: translateY(0%); border-radius: min(var(--overlay-header-radius), 2em); overflow: hidden !important; inset-block-start: var(--overlay-header-inset); } .dwc-mobile .bricks-is-frontend .dwc-nest-menu[data-slide-in-direction="top"][data-match-overlay-header-width="true"].brx-open .dwc-nav-wrapper { transform: translateY(0%); } .dwc-mobile .bricks-is-frontend .dwc-nest-menu[data-slide-in-direction="top"][data-match-overlay-header-width="true"] :is(.dwc-nav-wrapper) { --mobile-menu-width: min(calc(100% - (var(--overlay-header-inset) * 2)), 100%) !important; inline-size: var(--mobile-menu-width) !important; inset-inline-end: var(--overlay-header-inset) !important; block-size: calc(100dvb - (var(--overlay-header-inset) * 2)); } .dwc-mobile .dwc-nest-menu.brxe-nav-nested[data-slide-in-direction="top"][data-match-overlay-header-width="true"] .brxe-dropdown:not(.open) .brx-dropdown-content:not([data-builder-mode] .brx-dropdown-content) { height: 0; } .dwc-mobile .dwc-nest-header:has(.dwc-nest-menu[data-slide-in-direction="top"][data-match-overlay-header-width="true"]) { padding-inline: initial } .dwc-mobile .dwc-nest-menu[data-slide-in-direction="top"][data-match-overlay-header-width="true"] .dwc-nest-menu-top { border-block-end: initial; } /* .dwc-mobile .dwc-nest-header:has(.dwc-nest-menu[data-slide-in-direction="top"][data-match-overlay-header-width="true"]:not([data-submenu-reveal="expand"])) .dwc-nest-nav-items:has(.open.active) .brx-submenu-toggle>button:not(.brxe-dropdown.open.active .brx-submenu-toggle > button) { opacity: 0; } */ .dwc-mobile .dwc-nest-menu[data-slide-in-direction="top"][data-match-overlay-header-width="true"][data-submenu-reveal="slide"] .brx-has-megamenu.brxe-dropdown .brx-dropdown-content:not([data-hide-close-bar="true"] ul, [data-submenu-reveal="expand"].brx-has-megamenu ul) { inset-block-start: min(var(--overlay-header-radius), 2em) !important; padding-block-start: 50px; } .dwc-mobile .dwc-nest-menu[data-slide-in-direction="top"][data-match-overlay-header-width="true"][data-submenu-reveal="slide"] .brxe-dropdown:not(.brx-has-megamenu, [data-submenu-reveal="expand"]) .brx-dropdown-content:not([data-hide-close-bar="true"] ul), .bricks-is-frontend [data-submenu-reveal="slide"].brxe-dropdown .brx-dropdown-content:not([data-hide-close-bar="true"] ul) { inset-block-start: min(var(--overlay-header-radius), 2em) !important; padding-block-start: 50px; } .dwc-mobile .dwc-nest-menu[data-submenu-reveal="slide"][data-slide-in-direction="top"][data-match-overlay-header-width="true"] .open.active>.brx-submenu-toggle>button:not([data-hide-close-bar="true"] button, [data-submenu-reveal="expand"] button, .open.active:has(.open.active)>.brx-submenu-toggle > button) { z-index: 9999; min-inline-size: 100%; min-block-size: 50px; inset-block-start: min(var(--overlay-header-radius), 2em); } .dwc-mobile .dwc-nest-menu[data-slide-in-direction="top"][data-match-overlay-header-width="true"][data-submenu-reveal="slide"] .brxe-dropdown:not(:is([data-submenu-reveal="expand"], .brx-has-megamenu)) .brx-dropdown-content:not([data-submenu-reveal="expand"] *), .bricks-is-frontend [data-submenu-reveal="slide"].brxe-dropdown:not(.brx-has-megamenu) .brx-dropdown-content { min-block-size: 100%; } .dwc-mobile .bricks-is-frontend .dwc-nest-menu[data-slide-in-direction="top"][data-match-overlay-header-width="true"][data-submenu-reveal="slide"] .brxe-dropdown.brx-has-megamenu:not(:is([data-submenu-reveal="expand"])) .brx-dropdown-content:not([data-submenu-reveal="expand"] .brx-dropdown-content)>li { padding-block-end: 40px; } .dwc-mobile .dwc-nest-header[data-overlay-header-mobile="true"]>div { padding-inline: var(--menu-item-inline-padding); border-radius: var(--overlay-header-radius); } /* special style UPDATED ends*/ .dwc-nest-menu .brx-nav-nested-items { 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; 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; flex: 1; } .dwc-nest-menu .brx-nav-nested-items:not(.brx-open .brx-nav-nested-items) { transform: unset } .dwc-nest-nav-top-link:not(.brx-has-megamenu)>.brx-dropdown-content { /* transform: translateZ(0);*/ transform: unset; } .dwc-nest-menu.brxe-nav-nested.brx-closing .brx-nav-nested-items { opacity: unset !important; visibility: unset !important; } .dwc-nest-menu.brxe-nav-nested .brx-nav-nested-items { overflow-y: auto; scrollbar-width: none; justify-content: flex-start !important; } /* set new values */ .dwc-nav-wrapper { position: fixed; inset-block: 0; inset-inline-end: 0; transform: translateX(100%); background-color: var(--mobile-menu-bg); transition: 0.45s; transition-timing-function: var(--mobile-menu-ttf); z-index: 1; flex-wrap: nowrap; inline-size: var(--mobile-menu-width); visibility: hidden; } /* RTL */ [dir="rtl"] .dwc-nav-wrapper { inset-inline-end: initial; inset-inline-start: 0; } .brx-open .dwc-nav-wrapper { transform: translateX(0%); visibility: visible; } .dwc-nest-menu-top { background-color: var(--mobile-menu-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-nav-top-link.brx-has-megamenu, .dwc-nest-dropdown-content>.menu-item>a { border-block-end: var(--menu-item-border); } .dwc-nest-nav-top-link:not(.brx-has-megamenu):not(.open, :has(.open)), .dwc-nest-dropdown-content>.brxe-dropdown:not(.open, :has(.open)) { border-block-end: var(--menu-item-border); } /* MENU CTA (LAST BUTTON */ :is([data-last-item-is-button="true"], [data-last-item-is-button="true-2"], [data-last-item-is-button="true-3"]).dwc-nest-menu .brx-nav-nested-items>.menu-item:last-of-type, :is([data-last-item-is-button="true-2"], [data-last-item-is-button="true-3"]).dwc-nest-menu .brx-nav-nested-items>.menu-item:nth-last-of-type(-n+2), [data-last-item-is-button="true-3"].dwc-nest-menu .brx-nav-nested-items>.menu-item:nth-last-of-type(-n+3) { padding-inline: var(--menu-item-inline-padding) !important; padding-block: var(--menu-item-block-padding) !important; inline-size: 100%; margin-inline: auto; max-inline-size: var(--cta-width); } [data-last-item-is-button="true-2"].dwc-nest-menu .brx-nav-nested-items>.menu-item:nth-last-of-type(-n+2)+li { padding-block-start: var(--cta-gap-offset) !important } [data-last-item-is-button="true-3"].dwc-nest-menu .brx-nav-nested-items>.menu-item:nth-last-of-type(-n+3)+li { padding-block-start: var(--cta-gap-offset) !important } :is([data-last-item-is-button="true"], [data-last-item-is-button="true-2"], [data-last-item-is-button="true-3"]).dwc-nest-menu .brx-nav-nested-items>.menu-item:last-of-type a, :is([data-last-item-is-button="true-2"], [data-last-item-is-button="true-3"]).dwc-nest-menu .brx-nav-nested-items>.menu-item:nth-last-of-type(-n+2) a, [data-last-item-is-button="true-3"].dwc-nest-menu .brx-nav-nested-items>.menu-item:nth-last-of-type(-n+3) a { justify-content: center; } /* MOBILE MENU SLIDE IN DIRECTION */ .bricks-is-frontend [data-slide-in-direction="left"] .dwc-nav-wrapper { transform: translateX(-100%); inset-inline-start: 0; overflow: hidden; } /* RTL */ [dir="rtl"] .bricks-is-frontend [data-slide-in-direction="left"] .dwc-nav-wrapper { inset-inline-start: initial; inset-inline-end: 0; } [dir="rtl"] .bricks-is-frontend [data-submenu-reveal="slide"][data-slide-in-direction="left"] .open.active>.brx-submenu-toggle button:not([data-hide-close-bar="true"] button, [data-submenu-reveal="expand"] button), [dir="rtl"] .bricks-is-frontend .dwc-nest-menu[data-slide-in-direction="left"] [data-submenu-reveal="slide"].open.active>.brx-submenu-toggle button:not([data-hide-close-bar="true"] button, [data-submenu-reveal="expand"] button) { inset-inline-start: initial; inset-inline-end: 0; justify-content: flex-end; } .bricks-is-frontend [data-slide-in-direction="left"].brx-open .dwc-nav-wrapper { transform: translateX(0); } /* SLIDE IN TOP */ .bricks-is-frontend .dwc-nest-menu[data-slide-in-direction="top"].brx-open .dwc-nav-wrapper, .bricks-is-frontend .dwc-nest-menu[data-slide-in-direction="left top"].brx-open .dwc-nav-wrapper { transform: translateY(0%); } .bricks-is-frontend .dwc-nest-menu[data-slide-in-direction="top"] .dwc-nav-wrapper, .bricks-is-frontend .dwc-nest-menu[data-slide-in-direction="left top"] .dwc-nav-wrapper { transform: translateY(-100%); } /* SLIDE IN BOTTOM */ .bricks-is-frontend .dwc-nest-menu[data-slide-in-direction="bottom"].brx-open .dwc-nav-wrapper, .bricks-is-frontend .dwc-nest-menu[data-slide-in-direction="left bottom"].brx-open .dwc-nav-wrapper { transform: translateY(0%); } .bricks-is-frontend .dwc-nest-menu[data-slide-in-direction="bottom"] .dwc-nav-wrapper, .bricks-is-frontend .dwc-nest-menu[data-slide-in-direction="left bottom"] .dwc-nav-wrapper { transform: translateY(100%); } .bricks-is-frontend [data-slide-in-direction="left bottom"] .dwc-nav-wrapper, .bricks-is-frontend [data-slide-in-direction="left top"] .dwc-nav-wrapper { inset-inline-start: 0; overflow: hidden; } .dwc-nest-menu.brxe-nav-nested .brxe-dropdown>.brx-dropdown-content::-webkit-scrollbar-track, .dwc-nest-menu .brx-nav-nested-items::-webkit-scrollbar-track { border-radius: 50vw; background-color: transparent; } .dwc-nest-menu.brxe-nav-nested .brxe-dropdown>.brx-dropdown-content::-webkit-scrollbar, .dwc-nest-menu .brx-nav-nested-items::-webkit-scrollbar { inline-size: 0px; background-color: transparent; } .dwc-nest-menu.brxe-nav-nested .brxe-dropdown>.brx-dropdown-content::-webkit-scrollbar-thumb, .dwc-nest-menu .brx-nav-nested-items::-webkit-scrollbar-thumb { border-radius: 50vw; background-color: #55565d; } /* SCROLLBARS END */ /* SLIDE IN DIRECTION - DROPDOWN ITEMS*/ .bricks-is-frontend [data-submenu-reveal="slide"].dwc-nest-menu.brxe-nav-nested .brxe-dropdown:not(:is([data-submenu-reveal="expand"])) .brx-dropdown-content:not([data-submenu-reveal="expand"] *), .bricks-is-frontend [data-submenu-reveal="slide"].brxe-dropdown .brx-dropdown-content { max-block-size: unset; position: absolute !important; opacity: 1; transition-duration: 0.45s !important; transition-timing-function: var(--mobile-menu-ttf); padding-block-end: 80px; } .bricks-is-frontend .dwc-nest-menu [data-submenu-reveal="expand"].brx-has-megamenu>ul { position: static !important; padding-block-end: 0 !important; transition: 0.3s ease-in-out !important; } .bricks-is-frontend [data-submenu-reveal="slide"].dwc-nest-menu.brxe-nav-nested .brx-has-megamenu.brxe-dropdown .brx-dropdown-content:not([data-submenu-reveal="expand"].brx-has-megamenu ul) { inset: 0 !important; transform: translateX(100%); transition-property: opacity, transform, visibility; min-block-size: calc(100dvb - var(--dwc-nest-header-height)); position: fixed !important; } .bricks-is-frontend [data-submenu-reveal="slide"].dwc-nest-menu.brxe-nav-nested .brx-has-megamenu.brxe-dropdown .brx-dropdown-content:not([data-hide-close-bar="true"] ul, [data-submenu-reveal="expand"].brx-has-megamenu ul) { inset-block-start: var(--dwc-nest-header-height) !important; } .bricks-is-frontend :is([data-slide-in-direction="left"], [data-slide-in-direction="left bottom"], [data-slide-in-direction="left top"])[data-submenu-reveal="slide"].dwc-nest-menu.brxe-nav-nested .brx-has-megamenu.brxe-dropdown .brx-dropdown-content:not([data-submenu-reveal="expand"].brx-has-megamenu ul) { 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; } /* 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) { inset-inline-start: -100% !important; } /* RTL */ [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; } .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; } .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 { min-block-size: var(--dwc-nest-header-height); } /* DROPDOWN INDENT */ .dwc-nest-menu[data-submenu-reveal="expand"] .brxe-dropdown:not(.brx-has-megamenu)>.brx-dropdown-content:not(.brxe-dropdown[data-submenu-reveal="slide"] .brx-dropdown-content), .dwc-nest-menu .brxe-dropdown[data-submenu-reveal="expand"]:not(.brx-has-megamenu) .brx-dropdown-content { padding-inline-start: var(--dropdown-indent) !important; padding-inline-end: calc(var(--dropdown-indent) * 0) !important; border-left: var(--dropdown-indent-line); background-color: var(--dropdown-indent-bg) } .dwc-nest-menu[data-submenu-reveal="expand"] .brxe-dropdown:not(.brx-has-megamenu)>.brx-dropdown-content:not(.brxe-dropdown[data-submenu-reveal="slide"] *)>*> :is(a, .brx-submenu-toggle), .dwc-nest-menu .brxe-dropdown[data-submenu-reveal="expand"]:not(.brx-has-megamenu)>.brx-dropdown-content>*> :is(a, .brx-submenu-toggle) { padding-inline-start: calc(var(--dropdown-item-inline-padding) * var(--dropdown-indent-item-pad-offset)) !important; } .dwc-nest-menu[data-submenu-reveal="expand"] .brxe-dropdown.open>.brx-submenu-toggle, .dwc-nest-menu [data-submenu-reveal="expand"].brxe-dropdown.open>.brx-submenu-toggle { background-color: var(--dropdown-expanded-bg) !important; 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: 70%; position: fixed; inset-block-start: 0; transform: translateY(0%) !important; inset-inline-start: var(--menu-item-inline-padding); color: var(--back-text-clr); text-transform: var(--back-text-transform); letter-spacing: 1px; /* padding-inline: 1rem !important; */ z-index: 1000; font-size: var(--back-text-font-size); font-weight: var(--back-text-font-weight); background-color: var(--back-text-bg); min-block-size: calc(var(--dwc-nest-header-height) - 2px); -webkit-animation: dwc-nest-fade-in 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.3s both; animation: dwc-nest-fade-in 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.3s both; } /* BACK BUTTON TEXT, (ATTR SET BY JS) */ .bricks-is-frontend [data-submenu-reveal="slide"] .open.active>.brx-submenu-toggle button[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); } /* 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"] *) { background-color: transparent !important; } /* 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; } .bricks-is-frontend [data-below-header="true"].dwc-nest-menu.brxe-nav-nested .brxe-dropdown:not(.brx-has-megamenu) .brx-dropdown-content:not([data-hide-close-bar="true"] ul), .bricks-is-frontend [data-submenu-reveal="slide"].brxe-dropdown .brx-dropdown-content:not([data-hide-close-bar="true"] ul) { inset-block-start: calc(var(--top-offset) + 1px) !important; } .bricks-is-frontend [data-below-header="true"].dwc-nest-menu.brxe-nav-nested .brx-has-megamenu.brxe-dropdown .brx-dropdown-content:not([data-hide-close-bar="true"] ul, [data-submenu-reveal="expand"].brx-has-megamenu ul) { inset-block-start: calc(var(--top-offset) + 1px) !important; } .dwc-nest-menu[data-below-header="true"] .dwc-nest-menu__mobile-logo { display: none; } /* tooltip */ .dwc-nest-tooltip:not(.open.active ~ .dwc-nest-tooltip) { opacity: 0 !important; } @keyframes slideIn { 0% { transform: translateX(-100%); opacity: 0; } 100% { transform: translateX(0); opacity: 1; } } @keyframes fadeOut { 0% { transform: translateX(0); opacity: 1; } 100% { transform: translateX(150%); opacity: 0; } } .dwc-nest-tooltip { animation: slideIn 0.4s ease-in-out both, fadeOut 0.4s ease-in-out 2s both; } /* EXPAND DROP DOWN */ /* EXPAND MEGA MENU DROP DOWN */ [data-submenu-reveal="expand"] .brx-has-megamenu .brx-dropdown-content { display: grid !important; grid-template-rows: 0fr; grid-template-columns: 1fr; transition: 0.3s ease-in-out; overflow: hidden; position: static; visibility: visible; opacity: 1; } [data-submenu-reveal="expand"] .brx-has-megamenu.brxe-dropdown.open.active .brx-dropdown-content { grid-template-rows: 1fr; grid-template-columns: 1fr; } [data-submenu-reveal="expand"] .brx-has-megamenu .brx-dropdown-content>.dwc-nest-nav-list__inner-wrap, [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>.dwc-nest-nav-list__inner-wrap, [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>.dwc-nest-nav-list__inner-wrap, [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>.dwc-nest-nav-list__inner-wrap, [data-submenu-reveal="expand"].brx-has-megamenu.brxe-dropdown.open.active .brx-dropdown-content> :is(div, li) { opacity: 1; transition: opacity 0.8s 0.25s ease; } /* HIDE TOP CLOSE BAR */ [data-hide-close-bar='true'] .dwc-nest-menu-top { display: none; } /* hide close button, bring main hamburger to front */ .dwc-nest-menu .brxe-toggle { position: relative; } [data-mobile-top-transparent="true"]:not(:has(.brxe-dropdown.open)) .brxe-toggle[aria-label="Open Menu"] { z-index: 9999; } [data-show-toggle-always="true"] .brxe-toggle[aria-label="Open Menu"] { z-index: 9999; } .dwc-nest-menu:not([data-mobile-top-transparent="true"], [data-below-header="true"]) .brxe-toggle[aria-label="Close Menu"] { display: grid; place-items: center; height: 100%; } .dwc-nest-menu .brx-nav-nested-items>.brxe-dropdown>.brx-dropdown-content { transform: unset; } .dwc-nest-menu .brx-nav-nested-items>.brxe-dropdown.open>.brx-dropdown-content { transform: unset; } .dwc-stripe-style .dwc-nest-header::after, .dwc-stripe-style .dwc-nest-header::before { display: none !important; } /* builder */ [data-builder-mode] .dwc-nest-menu-top { min-block-size: 80px !important; } [data-builder-mode] .dwc-nest-nav-items { overflow-y: scroll; } /* in builder ends*/ /*==========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"] *), .bricks-is-frontend [data-submenu-reveal="slide"].brxe-dropdown:not(.brx-has-megamenu) .brx-dropdown-content { 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"] *), .bricks-is-frontend [data-submenu-reveal="slide"].brxe-dropdown:not(.brx-has-megamenu) .brx-dropdown-content { 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; } .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 ========================== */ } /* EMD MEDIA QUERY*/

@media (min-width: 1201px) { .dwc-mobile header { display: none; } @layer bricks.reset { .brx-dropdown-content:not(.brx-submenu-positioned) { display: flex !important; } } /*sidebar nav fouc fix*/ .dwc-mobile .dwc-header-inner-wrap { max-height: 70px !important; } .dwc-mobile .dwc-header-inner-wrap .dwc-nest-menu { display: none !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.show-content: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*/ html:not(.dwc-mobile) .bricks-is-frontend .dwc-nest-menu .brx-dropdown-content:not(.brx-dropdown-content .brx-dropdown-content, .brx-has-megamenu .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 .dwc-nest-menu .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; } .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-menu .brxa-inner, .dwc-nest-menu .brxa-inner:after, .dwc-nest-menu .brxa-inner:before { background-color: var(--menu-toggle-clr) } .dwc-nest-menu.brxe-nav-nested .brxe-toggle[aria-label="Close Menu"] i { color: var(--menu-close-toggle-clr) } .dwc-nest-menu .brxa-wrap:hover .brxa-inner, .dwc-nest-menu .brxa-wrap:hover .brxa-inner:after, .dwc-nest-menu .brxa-wrap:hover .brxa-inner:before { background-color: var(--menu-toggle-hover-clr) !important } /* icon animation */ .dwc-nest-toggle--open.brxa--vortex .brxa-inner { transition-duration: .3s; transition-timing-function: ease-in-out; } .dwc-nest-toggle--open.brxa--vortex.is-active .brxa-inner { transform: rotate(225deg); transition-timing-function: ease-in-out; } .dwc-nest-toggle--open.brxa--vortex.is-active .brxa-inner:before { opacity: 0; inset-block-start: calc(var(--icon-line-gap) * -1); inline-size: 0px !important; } .dwc-nest-toggle--open .brxa-inner:before { transition-duration: 0.25s; transition-property: inline-size, tansform !important; } /* MENU ITEMS SPACING AND COLOR*/ /* Shared styles for both menu types */ .dwc-nest-menu .brx-nav-nested-items>li>a, .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 > *) { color: var(--dropdown-item-clr) !important; } .dwc-nest-nav-dropdown-link { color: var(--menu-item-clr); } /* DROPDOWN MENU ITEMS BG COLOR */ .dwc-nest-menu .brx-dropdown-content>.menu-item>a:not(.brx-has-megamenu a), li:not(.brx-has-megamenu) .brx-submenu-toggle:not(.brx-nav-nested-items > li > *) { background-color: var(--dropdown-item-bg) } /* DROPDOWN BG COLOR */ .dwc-nest-menu .brxe-dropdown:not(.brx-has-megamenu) .brx-dropdown-content { background-color: var(--dropdown-content-bg); } /* HOVER STYLES */ .dwc-nest-menu .brx-nav-nested-items>li:hover>a, .dwc-nest-menu .brx-nav-nested-items>li:hover>.brx-submenu-toggle, .dwc-nest-menu .brx-dropdown-content>li:hover>.brx-submenu-toggle, .dwc-nest-menu .brx-dropdown-content>.menu-item:hover>a { color: var(--menu-item-hover-clr); background-color: var(--menu-item-hover-bg) } .dwc-nest-nav-dropdown-link:hover { color: var(--menu-item-hover-clr); } .dwc-nest-menu .brx-nav-nested-items>li>a:not(.dwc-nest-menu__logo, [data-last-item-is-button="true"] .menu-item:last-of-type a, [data-last-item-is-button="true-2"] .menu-item:nth-last-of-type(-n+2) a, [data-last-item-is-button="true-3"] .menu-item:nth-last-of-type(-n+3) a):hover::before, .dwc-nest-menu .brx-nav-nested-items>li>a:not(.dwc-nest-menu__logo, [data-last-item-is-button="true"] .menu-item:last-of-type a, [data-last-item-is-button="true-2"] .menu-item:nth-last-of-type(-n+2) a, [data-last-item-is-button="true-3"] .menu-item:nth-last-of-type(-n+3) a):focus-visible::before, .dwc-nest-menu .brx-nav-nested-items>li:hover>.brx-submenu-toggle::before, .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, [data-last-item-is-button="true"] .menu-item:last-of-type a, [data-last-item-is-button="true-2"] .menu-item:nth-last-of-type(-n+2) a, [data-last-item-is-button="true-3"] .menu-item:nth-last-of-type(-n+3) a), .dwc-nest-menu .brx-nav-nested-items>li:has([aria-current="page"]):not(li:hover)>.brx-submenu-toggle { color: var(--menu-item-active-clr); background-color: var(--menu-item-active-bg); } .dwc-nest-menu .brx-nav-nested-items .brx-submenu-toggle>a[aria-current="page"] { background-color: initial !important; } .dwc-nest-menu .brx-nav-nested-items a[aria-current="page"]:not(.brx-submenu-toggle a, .brxe-button, .dwc-exclude, .dwc-exclude a, [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), html:not(.dwc-mobile) .dwc-nest-menu .brx-nav-nested-items>li .brx-submenu-toggle { position: relative; height: 100%; } .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"] .menu-item:last-of-type a, [data-last-item-is-button="true-2"] .menu-item:nth-last-of-type(-n+2) a, [data-last-item-is-button="true-3"] .menu-item:nth-last-of-type(-n+3) a, .dwc-nest-menu__logo, .brx-submenu-toggle > a)::before, .dwc-nest-menu .brx-nav-nested-items>li:has([aria-current="page"])>.brx-submenu-toggle::before { content: ''; background-color: var(--menu-item-active-border-bg); inline-size: 100%; block-size: var(--menu-item-active-border-height); position: absolute; inset-block-start: calc(100% - var(--menu-item-active-border-height)); inset-inline-start: 0; } .dwc-nest-menu .brx-nav-nested-items>li:has([aria-current="page"])>.brx-submenu-toggle> :is(a, svg, button, span) { color: var(--menu-item-active-clr); } /* DROPDOWN HOVER BG */ .dwc-nest-menu .brx-dropdown-content>li:hover>.brx-submenu-toggle:not(.brx-has-megamenu *), .dwc-nest-menu .brx-dropdown-content>.menu-item: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; } /* MENU ITEMS COLOR */ .dwc-nest-menu .brx-nav-nested-items>li .brx-submenu-toggle :where(span, a, svg) { color: inherit; font-weight: inherit; } /* CHEVRON */ .dwc-nest-menu .brx-nav-nested-items>li:not(li:has([aria-current="page"]), li:hover) .brx-submenu-toggle svg { color: var(--chevron-clr); } .dwc-nest-menu .brx-nav-nested-items>li .brx-submenu-toggle svg { font-size: var(--chevron-size); color: var(--chevron-clr); } .dwc-nest-menu .brx-nav-nested-items>li:has([aria-current="page"])>.brx-submenu-toggle svg, .dwc-nest-menu .brx-nav-nested-items li:hover>.brx-submenu-toggle svg { color: var(--chevron-hover-clr); } [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*/ body:has([data-hide-overlay="true"]) .dwc-nest-menu-overlay { display: none; } /* ===========DESKTOP ONLY ============== */ :is(html:not(.dwc-mobile) .dwc-nest-header:not([data-overlay-header="true"]) [data-mobile-top-transparent="true"]) :is(.dwc-nest-menu-top:not([data-below-header="true"] *, :has(.open.active)), .dwc-nav-wrapper:not([data-below-header="true"] *, :has(.open.active))) { background-color: transparent !important; } html:not(.dwc-mobile):has(:is([data-last-item-is-button-alignment="center"], [data-last-item-is-button-alignment="left"])[data-last-item-is-button="true"]) :is(.dwc-menu-wrap, .dwc-nest-menu) { inline-size: 100%; } html:not(.dwc-mobile) [data-last-item-is-button-alignment="center"][data-last-item-is-button="true"].dwc-nest-menu:not(.brx-open) .dwc-nest-nav-items>li:is(:last-of-type, :first-of-type) { margin-inline-start: auto; } html:not(.dwc-mobile) [data-last-item-is-button-alignment="left"][data-last-item-is-button="true"].dwc-nest-menu:not(.brx-open) .dwc-nest-nav-items>li:is(:last-of-type) { margin-inline-start: auto; } html:not(.dwc-mobile) .dwc-nest-tooltip { display: none; } html:not(.dwc-mobile) .open:has(.open) .open:has(.brxe-dropdown:hover) .brx-dropdown-content { box-shadow: 0px 10px 30px -10px rgba(0, 0, 0, 30%); } /* EXTEND DROPDWON BUTTON TO AVOID LOSING FOCUS/CLOSING ON DROPDOWN CONTENT */ html:not(.dwc-mobile) .dwc-nest-menu .open .brx-dropdown-content .brxe-dropdown:has(> .brx-sub-submenu-overflow-right):hover::after { inset-inline-end: 100%; transform: translateX(0%); } html:not(.dwc-mobile) .dwc-nest-menu .open .brx-dropdown-content .brxe-dropdown:not(.brxe-dropdown:has(> .brx-sub-submenu-overflow-right)):hover::after { inset-inline-start: 100%; transform: translateX(0%); } html:not(.dwc-mobile) .dwc-nest-menu .open .brx-dropdown-content .brxe-dropdown:hover::after { content: ""; position: absolute; inset-block-end: 0; block-size: 100%; inline-size: 100%; z-index: -1; } /*DIM DROPDOWN PARENT WHOSE CHILD DROPDOWN CONTENT IS SHOWING */ html:not(.dwc-mobile) .open:has(.open)>.brx-dropdown-content::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) { position: static; } html:not(.dwc-mobile) .open:has(.open)>.brxe-dropdown:not(.open)>ul { opacity: 0; transition: 0s } html:not(.dwc-mobile) .brxe-dropdown.open:not(.brx-has-megamenu) { 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); } html:not(.dwc-mobile) [data-show-mobile-logo="true"] .dwc-nav-wrapper { z-index: 9999 } /* mobile logo */ html:not(.dwc-mobile) .dwc-nest-menu__mobile-logo { display: none; } .dwc-mobile [data-hide-close-bar='true'] .dwc-nav-wrapper { inset-block-start: var(--dwc-nest-header-height) } /* mobile menu from top behind header */ .dwc-mobile :is([data-slide-in-direction="top"], [data-slide-in-direction="top left"]):not([data-match-overlay-header-width="true"]) .dwc-nav-wrapper:has(.brxe-dropdown.open.active) { z-index: unset !important; } .dwc-mobile :is([data-slide-in-direction="top"], [data-slide-in-direction="top left"]) .dwc-nav-wrapper { z-index: -1; } .dwc-mobile .dwc-nest-header__container:has(:is([data-slide-in-direction="top"], [data-slide-in-direction="top left"])) { background-color: var(--header-bg) } html:not(.dwc-mobile) .dwc-nest-header { position: relative; } /**************** MENU OVERLAY ***************/ .dwc-nest-menu-overlay { position: fixed; inset-block-start: var(--dwc-nest-header-height); inline-size: 100%; block-size: 100%; background: var(--nav-overlay-backdrop-clr) !important; z-index: 2; opacity: 0; transition: 0.4s; backdrop-filter: blur(var(--nav-overlay-backdrop-blur)); } .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; } .logged-in .dwc-nest-menu-overlay:not(:has(+ .x-header)) { inset-block-start: calc(var(--dwc-nest-header-height) + var(--wp-admin--admin-bar--height)); } .dwc-nest-menu-overlay { pointer-events: none; } .no-scroll .dwc-nest-menu-overlay { opacity: 1; } /*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) { 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) { 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"] { backdrop-filter: blur(var(--overlay-header-blur)); } html:not(.dwc-mobile) .bricks-is-frontend #brx-header:has(.open)>.dwc-nest-header[data-overlay-header="true"] { background-color: var(--overlay-header-bg-active) !important; } /* overlay on mobile */ .dwc-mobile .bricks-is-frontend #brx-header:has([data-overlay-header-mobile="true"]) { padding: var(--overlay-header-inset); } .dwc-mobile .bricks-is-frontend #brx-header:has([data-overlay-header-mobile="true"]):not(.sticky) { position: absolute; inset-block-start: 0; inset-inline: 0; } .dwc-mobile .bricks-is-frontend #brx-header>.dwc-nest-header[data-overlay-header-mobile="true"] { border-radius: var(--overlay-header-radius); background-color: var(--overlay-header-bg); box-shadow: var(--overlay-header-shadow); max-inline-size: var(--overlay-header-width); } /*offset hero top padding when overlay header is active */ #brx-header:has([data-offset-section-padding="true"])+main> :is(section, div) { padding-block-start: var(--overlay-offset-padding); } html:not(.dwc-mobile) .bricks-is-frontend:has(.dwc-nest-menu .open) .dwc-nest-menu-overlay { opacity: 1; } /*menu items border radius desktop only*/ html:not(.dwc-mobile) .dwc-nest-menu .brx-nav-nested-items>li>:is(a:not([data-last-item-is-button="true"] .menu-item:last-of-type a), .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) .bricks-is-frontend .dwc-nest-menu .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) .dwc-nest-menu .brx-dropdown-content { border-radius: var(--dropdown-content-border-radius); } .dwc-nest-header { position: relative; z-index: 9999; } html:not(.dwc-mobile) .dwc-nest-menu .brx-nav-nested-items>.brxe-dropdown::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) .dwc-nest-menu .brx-nav-nested-items>.brxe-dropdown .brx-dropdown-content { outline: var(--dropdown-content-border); } /* optimize multi row header*/ .dwc-mobile .dwc-nest-header[data-fullscreen-mobile-menu="true"] { --dwc-nest-header-height: var(--fullscreen-mobile-menu-top-height) !important } .dwc-mobile .dwc-nest-header[data-fullscreen-mobile-menu="true"] .dwc-nest-menu-top:not([data-below-header="true"] *) { background-color: var(--mobile-menu-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; } .brx-nav-nested-items>li:has(.brxe-xheadersearch) { position: static !important; } .dwc-mobile .brx-nav-nested-items>li .brxe-xheadersearch { position: relative; width: 100%; } /* preview dropdown content width in builder*/ [data-builder-mode] .dwc-nest-menu:not(.brx-open) .brx-has-megamenu .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] .dwc-nest-menu .brx-has-megamenu .brx-dropdown-content:not(.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; } .dwc-nest-menu .brx-has-megamenu .brx-dropdown-content:not(.show-content .brx-dropdown-content, [data-builder-mode] .brx-dropdown-content) { display: none; } /*fix overlay in boxed mode*/ .brx-boxed .dwc-nest-menu-overlay { inline-size: var(--boxed-width, 100%); } /* 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) .dwc-nest-header__container:has([data-align-content-bottom="true"]) { align-items: stretch !important; } html:not(.dwc-mobile) .dwc-nest-menu[data-align-content-bottom="true"]:not(.brx-open) .dwc-nav-wrapper, html:not(.dwc-mobile) .dwc-nest-menu[data-align-content-bottom="true"]:not(.brx-open) .brx-nav-nested-items, html:not(.dwc-mobile) .dwc-nest-menu[data-align-content-bottom="true"]:not(.brx-open) .brx-nav-nested-items>.brxe-dropdown, html:not(.dwc-mobile) .dwc-nest-menu[data-align-content-bottom="true"]:not(.brx-open) .brx-nav-nested-items>.brxe-dropdown>.brx-submenu-toggle, html:not(.dwc-mobile) .dwc-nest-menu[data-align-content-bottom="true"]:not(.brx-open) .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-nest-menu[data-align-content-bottom="true"]:not(.brx-open) .brx-nav-nested-items>li.menu-item { height: 100%; display: flex; align-items: center; } /* dropdown content gap */ html:not(.dwc-mobile) .dwc-nest-menu:not(.brx-open) .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) .dwc-nest-menu .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 *){ --dropdown-content-border: solid transparent var(--dropdown-content-border-size); } /* caret on dropdown (non stripe) */ html:not(.dwc-mobile) .dwc-nest-menu[data-align-content-bottom="true"][data-caret="true"] .brx-nav-nested-items>.brxe-dropdown::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.2)) + var(--dropdown-content-border-size)); inset-inline-start: calc(50% - var( --dropdown-content-gap)); opacity: 0; } html:not(.dwc-mobile) .dwc-nest-menu[data-align-content-bottom="true"][data-caret="true"] .brx-nav-nested-items>.brxe-dropdown.open::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; } body:not(.show-content) .brxe-dropdown::after { display: none; } /* multi-level dropdwon arrow > */ html:not(.dwc-mobile) .dwc-nest-menu .brxe-dropdown:not(.brx-has-megamenu) .brxe-dropdown .brx-submenu-toggle button svg { transform: rotate(270deg); } /* align dropwdown in builder */ [data-builder-mode] .brx-has-megamenu .brx-dropdown-content[data-content-align="left"][preview-alignment="true"] { left: 0 !important; right: auto !important; } [data-builder-mode] .brx-has-megamenu .brx-dropdown-content[data-content-align="right"][preview-alignment="true"] { left: auto !important; right: 0 !important; } [data-builder-mode] .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-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 { display: none; } /* ==== 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; } /* ==== 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) .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.2); block-size: calc(var(--dropdown-content-gap) * 1.2); opacity: 1; transition: opacity 0.2s 0.1s; } html:not(.dwc-mobile) .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(var(--dropdown-content-gap) * -1.6); inset-inline-start: calc(50% - var(--dropdown-content-gap)); opacity: 0; } html:not(.dwc-mobile) .bricks-is-frontend .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 .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 .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 [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 [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 */ /* 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) .bricks-is-frontend .dwc-nest-menu .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-nest-menu .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) #brx-header>*:not(.dwc-nest-header) { z-index: 99999; position: relative; } /* account for admn bar on mobile menu */ .dwc-mobile .dwc-nav-wrapper { inset-block-start: var(--wp-admin--admin-bar--height, 0); } .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; }

About Morris Legacy Law

Comprehensive legal solutions for families and businesses across the Sacramento Valley.