Hello world!

/* ============= NAV STYLES =========== */ :root{ --primary-clr: orangered; --header-bg: white; --header-min-height:60px; /*when using fullscreen mobile menu*/ --fullscreen-mobile-menu-top-height: 60px; --sidebar-shadow: 0px 0px 2px rgba(0, 0, 0, 0.7); /* default width for mega menu dropdown content */ --dropdown-content-default-width: 1080px; /* mega menu dropdown content border radius*/ --dropdown-content-border-radius: 0; /* space between dropdwon content and header */ --dropdown-content-gap:0; /* mobile/offcanvas menu width */ --mobile-menu-width: min(300px, 100%); /* radius for special mobile style on overlay header*/ --mobile-menu-radius: 20px; /* mobile/offcanvas/sidebar higher value = faster use any value, even decimals */ --slide-out-speed: 1.3; /* Back text bar height for sidebar nav & menu below header */ --top-offset: 40px; /* 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); } /* ======================== MENU ITEMS ======================== */ /* Colors */ --menu-item-clr: #000; --menu-item-hover-clr: var(--primary-clr); --menu-toggle-clr: var(--menu-item-clr); --menu-icon-clr: var(--primary-clr); /* hover colors */ --menu-toggle-hover-clr: var(--menu-item-hover-clr); --menu-item-hover-border-bg: var(--menu-item-active-border-bg); --menu-item-hover-border-height:var(--menu-item-active-border-height); /* active colors */ --menu-item-active-clr: var(--menu-item-hover-clr); --menu-item-active-border-height: 2px; --menu-item-active-border-bg: var(--primary-clr); /* Backgrounds */ --menu-item-bg: white; --menu-item-hover-bg: white; --menu-item-active-bg: #ededed; /* Spacing */ --menu-item-inline-padding: 1.1rem; /*horizontal padding*/ --menu-item-block-padding: 1rem; /* vertical padding*/ --menu-items-gap: 0; /* Typography */ --menu-item-font-weight: 500; --menu-item-font-size: 14px; /* Bottom Border | Radius */ --menu-item-border: 1px solid rgba(0, 0, 0, 0.1); /*mobile only*/ --menu-item-radius: 0; /* ======================== MENU CTA BUTTON (ALL BUTTONS) ======================== */ /* all cta buttons max width on mobile */ --cta-width: 100%; /* gap offset between 2 or 3 cta buttons on mobile/offcanvas/sidebar*/ --cta-gap-offset: 0; /* ======================== MENU CTA BUTTON (LAST BUTTON) ======================== */ /* Colors */ --menu-cta-clr: white; --menu-cta-hover-clr: white; /* Backgrounds */ --menu-cta-bg: black; --menu-cta-hover-bg: var(--primary-clr); /* Spacing */ --menu-cta-inline-padding: calc(var(--menu-item-inline-padding) * 1.3); --menu-cta-block-padding: var(--menu-item-block-padding); /* Borders & Radius */ --menu-cta-border: none; --menu-cta-radius: 0em; /* ======================== MENU CTA BUTTON (SECOND BUTTON) ======================== */ /* Colors */ --menu-cta-2-clr: white; --menu-cta-2-hover-clr: white; /* Backgrounds */ --menu-cta-2-bg: black; --menu-cta-2-hover-bg: var(--primary-clr); /* Spacing */ --menu-cta-2-inline-padding: var(--menu-cta-inline-padding); --menu-cta-2-block-padding: var(--menu-cta-block-padding); /* Borders & Radius */ --menu-cta-2-border: var(--menu-cta-border); --menu-cta-2-radius: var(--menu-cta-radius); /* ======================== MENU CTA BUTTON (THIRD BUTTON) ======================== */ /* Colors */ --menu-cta-3-clr: white; --menu-cta-3-hover-clr: white; /* Backgrounds */ --menu-cta-3-bg: black; --menu-cta-3-hover-bg: var(--primary-clr); /* Spacing */ --menu-cta-3-inline-padding: var(--menu-cta-inline-padding); --menu-cta-3-block-padding: var(--menu-cta-block-padding); /* Borders & Radius */ --menu-cta-3-border: var(--menu-cta-border); --menu-cta-3-radius: var(--menu-cta-radius); /* ======================== DROPDOWN LINKS ======================== */ --dropdown-width: 200px; /* Colors */ --dropdown-item-clr: var(--menu-item-clr); --dropdown-item-hover-clr: var(--menu-item-hover-clr); --dropdown-heading-clr: var(--primary-clr); --dropdown-active-clr: white; /* Backgrounds */ --dropdown-content-bg: var(--mobile-menu-bg); --dropdown-content-inner-bg: var(--mobile-menu-bg); --dropdown-item-hover-bg: white; --dropdown-item-bg: white; --dropdown-indent-bg: rgb(0 0 0 / 5%); --dropdown-active-bg: black; --dropdown-inactive-overlay: rgb(0 0 0 / 10%); /* Spacing */ --dropdown-item-inline-padding: var(--menu-item-inline-padding); --dropdown-item-block-padding: var(--menu-item-block-padding); --dropdown-indent: 0.6rem; --dropdown-indent-item-pad-offset: 0.5; /* Typography */ --dropdown-item-font-size: var(--menu-item-font-size); /* Border & Shadow */ --dropdown-indent-line: solid 1px rgb(0 0 0 / 25%); --dropdown-content-shadow: 0px 5px 15px -10px rgb(0 0 0 / 0%); /* ======================== CHEVRON (Dropdown Arrow) ======================== */ --chevron-size: 14px; --chevron-clr: var(--menu-item-clr); --chevron-hover-clr:var(--menu-item-hover-clr); /* ======================== MENU TOGGLE - Hamburger ======================== */ --open-icon-size: 30px; --open-icon-line-height: 3px; --icon-line-gap: 0.5em; /* gap between the lines*/ --open-icon-line-variance: 9px; /* by how much the lines vary in width, e.g. 0 = same width*/ --open-icon-align: 0; /* when the lines' width varies, 0 = align right, auto = align left*/ --open-icon-horizontal-offset: 0px; /* nudge the icon left or right from edge of screen*/ /* ====================================== ADAPTIVE HEIGHT/ STRIPE BG COLOR/BORDER ========================================= */ --adaptive-height-bg: #fff; --adaptive-height-border: 1px solid #fff; /* ======================== STRIPE - when [data-optimize-stripe="true"] ======================== */ --stripe-border-radius: 10px; /* ======================== MOBILE/OFFCANVAS MENU ======================== */ --mobile-menu-ttf: cubic-bezier(0.8, 0.07, 0.2, 0.95); /* Transition timing function */ --mobile-menu-bg: white; /* mobile menu background color */ --mobile-menu-top-bg: white; /* mobile menu close bar background color */ /* ================= OVERLAY HEADER ================== */ --overlay-header-width: 1400px; --overlay-header-inset: 1rem; --overlay-header-bg: rgb(255 255 255 / 100%); --overlay-header-bg-active: rgb(255 255 255 / 100%); --overlay-header-blur: 10px; --overlay-header-radius: 1rem; --overlay-header-shadow: 0px 2px 20px rgb(0 0 0 / 20%); --overlay-offset-padding: clamp(5rem, 1.875rem + 12.5vw, 11.25rem); /* ======================== BACK TEXT ======================== */ --back-text-clr: var(--menu-item-clr); /* back to previous menu color */ --back-text-font-size: 12px; --back-text-font-weight: 600; --back-text-transform: uppercase; --back-text-bg: var(--mobile-menu-top-bg); /* ======================== SIDEBAR NAV - OVERLAY MODE ======================== */ --overlay-sidebar-radius: 1rem ; --overlay-sidebar-bg: rgb(255 255 255 / 80%); --overlay-sidebar-shadow: 0 0 30px rgb(39 50 59 / 10%); --overlay-sidebar-inset: 12px; /* ======================== PAGE OVERLAY - color/opacity ======================== */ --dwc-overlay-clr: rgba(0, 0, 0, 0.3); /* ======== DON'T YOU DARE! ======== */ --iw: calc(var(--open-icon-size) - var(--open-icon-line-variance)); --aw: calc(var(--iw) - var(--open-icon-line-variance)); } /* ======================================== MOBILE STYLES copy above variables to modify for mobile breakpoint ========================================= */ .dwc-mobile{ --mobile-menu-width: min(450px, 100%); --menu-item-font-size: 18px; --dropdown-item-font-size:var(--menu-item-font-size); --back-text-font-size: 16px; --menu-item-hover-border-bg: initial; } /* ======================== STICKY HEADER STYLES copy variables to modify for sticky header ======================== */ .sticky.scrolling{ /* add your sticky styles variable here */ } /* ========== NAV STYLES END ============== */ /* ======== CHANGE postid-xxxx TO THIS TEMPLATE'S ID ========= */ /*hide sidebar in builder */ :is(.brx-header-left, .brx-header-right)[data-builder-window] #brx-header:not(.postid-21924 *) { display: none !important; } :is(.brx-header-left, .brx-header-right)[data-builder-window] :is(#brx-content, #brx-footer):not(.postid-21924 *) { margin: unset !important; }

const MegaMenuCONFIG = { // Minimum width threshold for desktop behavior, // should be 1px larger than mobile (max-width) breakpoint minWidth: 1201, // automatically open the current menu panel/dropdown (mobile, offcanvas & sidebar) menuAutoExpansion: true, swipeToClose: true, // show or hide swipe to close hint toolTip: true, // adaptive height animation adaptiveHeight: false, // Stripe menu animation stripeStyle: false, headerSelector: '.dwc-nest-header', // New properties for dropdown positioning shiftFactor: 1, // Factor to shift overflow minOverflow: 10 // Minimum overflow threshold };

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

@media (min-width: 1201px){ .dwc-mobile header{ display: none; } } .dwc-adaptive-height:not(.dwc-stripe-style){ --dropdown-content-gap: 0 } html:not(.dwc-mobile) .bricks-is-frontend:not(.brx-header-right, .brx-header-left) .dwc-nest-menu:not([data-offcanvas="true"]) .brxe-dropdown:not(.brx-has-megamenu) .brx-dropdown-content:not(.brx-dropdown-content .brx-dropdown-content){ inset-inline-start: 0 !important; } html:not(.dwc-mobile) .bricks-is-frontend .dwc-nest-menu .brx-dropdown-content .brx-dropdown-content:not(.brx-sub-submenu-overflow-right, .brx-submenu-overflow-right){ inset-inline-start: 100% !important; } html:not(.dwc-mobile) .bricks-is-frontend .dwc-nest-menu .brxe-dropdown:not(.brx-has-megamenu) .brx-dropdown-content{ min-inline-size: var(--dropdown-width) !important; } html:not(.dwc-mobile) .bricks-is-frontend .dwc-nest-menu .brx-dropdown-content{ box-shadow: var(--dropdown-content-shadow); } .dwc-nest-menu[data-submenu-reveal="expand"] .brx-nav-nested-items > .brxe-dropdown:not([data-submenu-reveal="slide"], .brx-has-megamenu) > .brx-submenu-toggle { transform: translateY(0); z-index: 9999; } :is([data-submenu-reveal="expand"][data-offcanvas="true"]) .brxe-dropdown:not(.brx-has-megamenu) .brx-dropdown-content, :is(.brx-header-right, .brx-header-left) [data-submenu-reveal="expand"] .brxe-dropdown:not(.brx-has-megamenu) .brx-dropdown-content{ inset-block-start: 0; transition: 0s; min-inline-size: var(--mobile-menu-width); } .dwc-nest-toggle--open.brxe-toggle .brxa-inner:before { block-size: var(--open-icon-line-height); inset-inline-end: var(--open-icon-align); } .dwc-nest-toggle--open.brxa--vortex .brxa-inner:before { inline-size: var(--open-icon-size); } .dwc-nest-toggle--open.brxa--vortex .brxa-inner:not(.is-active .brxa-inner):before { inset-block-start: calc(var(--icon-line-gap) * -1); } .dwc-nest-toggle--open.brxa--vortex .brxa-inner:not(.is-active .brxa-inner):after { inset-block-end: calc(var(--icon-line-gap) * -1); } .dwc-nest-toggle--open.brxe-toggle .brxa-inner{ block-size: var(--open-icon-line-height); inset-inline-end: var(--open-icon-horizontal-offset); } .dwc-nest-toggle--open.brxa--vortex .brxa-inner{ inline-size:var(--iw); } .dwc-nest-toggle--open.brxe-toggle .brxa-inner:after { block-size: var(--open-icon-line-height); inset-inline-end: var(--open-icon-align); } .dwc-nest-toggle--open.brxa--vortex .brxa-inner:after { inline-size: var(--aw); } .dwc-nest-toggle--open.brxa--vortex.is-active .brxa-inner:after, .dwc-nest-toggle--open.brxa--vortex.is-active .brxa-inner{ inline-size: calc(var(--iw) * 1.2); } .dwc-nest-toggle--open.brxa--vortex .brxa-wrap{ inline-size: var(--open-icon-size) } .dwc-nest-menu .brxa-inner, .dwc-nest-menu .brxa-inner:after, .dwc-nest-menu .brxa-inner:before{ background-color: var(--menu-toggle-clr) } .dwc-nest-menu.brxe-nav-nested .brxe-toggle i{ color: var(--menu-toggle-clr) } .dwc-nest-menu .brxa-wrap:hover .brxa-inner, .dwc-nest-menu .brxa-wrap:hover .brxa-inner:after, .dwc-nest-menu .brxa-wrap:hover .brxa-inner:before { background-color: var(--menu-toggle-hover-clr) !important } /* icon animation */ .dwc-nest-toggle--open.brxa--vortex .brxa-inner { transition-duration: .3s; transition-timing-function: ease-in-out; } .dwc-nest-toggle--open.brxa--vortex.is-active .brxa-inner { transform: rotate(225deg); transition-timing-function: ease-in-out; } .dwc-nest-toggle--open.brxa--vortex.is-active .brxa-inner:before { opacity: 0; inset-block-start: calc(var(--icon-line-gap) * -1); inline-size: 0px !important; } .dwc-nest-toggle--open .brxa-inner:before { transition-duration: 0.25s; transition-property: inline-size, tansform !important; } /* MENU ITEMS SPACING AND COLOR*/ /* Shared styles for both menu types */ .dwc-nest-menu .brx-nav-nested-items > li > a, .dwc-nest-menu .brx-nav-nested-items > li .brx-submenu-toggle, .dwc-nest-menu .brx-dropdown-content > .menu-item > a { font-weight: var(--menu-item-font-weight); font-size: var(--menu-item-font-size); color: var(--menu-item-clr); background-color: var(--menu-item-bg); inline-size: 100%; } .dwc-nest-menu .brx-dropdown-content > .brxe-dropdown > .brx-submenu-toggle, .dwc-nest-menu .brx-dropdown-content > .menu-item > a { --menu-item-font-size: var(--dropdown-item-font-size) } /* Specific padding for nested menu items */ .dwc-nest-menu .brx-nav-nested-items > li > a, .dwc-nest-menu .brx-nav-nested-items > li.brx-has-megamenu .brx-submenu-toggle { padding-block: var(--menu-item-block-padding); padding-inline: var(--menu-item-inline-padding) !important; } /* Specific padding for dropdown items */ .dwc-nest-menu .brx-dropdown-content > .menu-item > a, .dwc-nest-menu .brx-nav-nested-items > li:not(.brx-has-megamenu) .brx-submenu-toggle { padding-block: var(--dropdown-item-block-padding); padding-inline: var(--dropdown-item-inline-padding) !important; } .dwc-nest-menu .brx-dropdown-content > .menu-item > a:not([aria-current="page"], li:hover > *), li:not(.brx-has-megamenu) .brx-submenu-toggle:not( .brx-nav-nested-items > li > *, li:hover > *, .open.active *) { color: var(--dropdown-item-clr) !important; } /* DROPDOWN MENU ITEMS BG COLOR */ .dwc-nest-menu .brx-dropdown-content > .menu-item > a:not(.brx-has-megamenu a), li:not(.brx-has-megamenu) .brx-submenu-toggle:not( .brx-nav-nested-items > li > *) { background-color: var(--dropdown-item-bg) } /* DROPDOWN BG COLOR */ .dwc-nest-menu .brxe-dropdown:not(.brx-has-megamenu) .brx-dropdown-content { background-color: var(--dropdown-content-bg); } /* HOVER STYLES */ .dwc-nest-menu .brx-nav-nested-items > li:hover > a, .dwc-nest-menu .brx-nav-nested-items > li:hover > .brx-submenu-toggle, .dwc-nest-menu .brx-dropdown-content > li:hover > .brx-submenu-toggle, .dwc-nest-menu .brx-dropdown-content > .menu-item:hover > a { color: var(--menu-item-hover-clr); background-color: var(--menu-item-hover-bg) } .dwc-nest-nav-dropdown-link:hover { color: var(--menu-item-hover-clr); } .dwc-nest-menu .brx-nav-nested-items > li > a:not([data-last-item-is-button="true"] .menu-item:last-of-type a, [data-last-item-is-button="true-2"] .menu-item:nth-last-of-type(-n+2) a, [data-last-item-is-button="true-3"] .menu-item:nth-last-of-type(-n+3) a):hover::before, body:not(.brx-header-left, .brx-header-right) .dwc-nest-menu .brx-nav-nested-items > li > a:not([data-last-item-is-button="true"] .menu-item:last-of-type a, [data-last-item-is-button="true-2"] .menu-item:nth-last-of-type(-n+2) a, [data-last-item-is-button="true-3"] .menu-item:nth-last-of-type(-n+3) a):focus-visible::before, .dwc-nest-menu .brx-nav-nested-items > li:hover > .brx-submenu-toggle::before, body:not(.brx-header-left, .brx-header-right) .dwc-nest-menu .brx-nav-nested-items > li:focus-within > .brx-submenu-toggle::before{ content: ''; background-color: var(--menu-item-hover-border-bg); inline-size: 100%; block-size: var(--menu-item-hover-border-height); position: absolute; inset-block-start: calc(100% - var(--menu-item-hover-border-height)); inset-inline-start: 0; } .dwc-nest-menu .brx-nav-nested-items > li.menu-item { position: relative; } /* ACTIVE STYLES */ /* links and dropdwon active styles */ .dwc-nest-menu .brx-nav-nested-items a[aria-current="page"]:not(li:hover > a, a:hover), .dwc-nest-menu .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 a[aria-current="page"], .dwc-nest-menu .brx-nav-nested-items > li .brx-submenu-toggle{ position: relative; } .dwc-nest-menu .brx-nav-nested-items a[aria-current="page"]::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 > li:hover > a:not(.brx-has-megamenu a){ background-color: var(--dropdown-item-hover-bg) ; color: var(--dropdown-item-hover-clr); } .dwc-nest-menu.brxe-nav-nested .brx-submenu-toggle { justify-content: space-between; } /* DROPDOWN INDENT */ :is(.dwc-mobile, .brx-header-left, .brx-header-right, body:has([data-offcanvas="true"])) :is([data-submenu-reveal="expand"]) .brxe-dropdown:not(.brx-has-megamenu) > .brx-dropdown-content:not(.brxe-dropdown[data-submenu-reveal="slide"] *) { padding-inline-start: var(--dropdown-indent) !important; padding-inline-end: calc(var(--dropdown-indent) * 0) !important; border-left: var(--dropdown-indent-line); background-color: var(--dropdown-indent-bg) } :is(.dwc-mobile, .brx-header-left, .brx-header-right, body:has([data-offcanvas="true"])) :is([data-submenu-reveal="expand"]) .brxe-dropdown:not(.brx-has-megamenu) > .brx-dropdown-content:not(.brxe-dropdown[data-submenu-reveal="slide"] *) > * > :is(a, .brx-submenu-toggle){ padding-inline-start: calc(var(--dropdown-item-inline-padding) * var(--dropdown-indent-item-pad-offset)) !important; } :is(.dwc-mobile, .brx-header-left, .brx-header-right, body:has([data-offcanvas="true"])) :is([data-submenu-reveal="expand"]) .open.active.brxe-dropdown > .brx-submenu-toggle{ background-color: var(--dropdown-active-bg); color: var(--dropdown-active-clr); } :is(.dwc-mobile, .brx-header-left, .brx-header-right, body:has([data-offcanvas="true"])) :is([data-submenu-reveal="expand"]) .open.active.brxe-dropdown > .brx-submenu-toggle svg:not(.open.active.brxe-dropdown:hover > .brx-submenu-toggle svg){ color: var(--dropdown-active-clr); } /* MENU ITEMS COLOR */ .dwc-nest-menu .brx-nav-nested-items > li .brx-submenu-toggle :where(span, a, svg) { color: inherit; font-weight: inherit; } /* CHEVRON */ .dwc-nest-menu .brx-nav-nested-items > li:not(li:has([aria-current="page"]), li:hover) .brx-submenu-toggle svg{ color: var(--chevron-clr); } .dwc-nest-menu .brx-nav-nested-items > li .brx-submenu-toggle svg{ font-size: var(--chevron-size); color: var(--chevron-clr); } .dwc-nest-menu .brx-nav-nested-items > li:has([aria-current="page"]) > .brx-submenu-toggle svg, .dwc-nest-menu .brx-nav-nested-items li:hover > .brx-submenu-toggle svg{ color: var(--chevron-hover-clr); } .brx-dropdown-content .brxe-dropdown { position: static; } .brx-dropdown-content:not(.brx-has-megamenu .brx-dropdown-content) { padding-inline-end: 0 !important; } /*OVERLAY*/ html:not(.dwc-mobile) :is(.brx-header-left, .brx-header-right):not([data-builder-window]) :is(.brxe-code, .dwc-nest-menu-overlay), body:has([data-hide-overlay="true"]) .dwc-nest-menu-overlay, [data-builder-mode] .dwc-nest-menu-overlay { display: none; } .bricks-is-frontend #brx-header .dwc-nest-menu[data-offcanvas="true"]:not([data-submenu-reveal = 'slide']) .brxe-dropdown:not(.open.active) > .brx-dropdown-content > .brxe-dropdown:not([data-submenu-reveal = 'slide'] *){ visibility: hidden; } /* builder */ [data-builder-mode] [data-offcanvas="true"] .dwc-nest-menu-top { min-block-size: 80px !important; } /* ===========DESKTOP ONLY ============== */ :is( html:not(.dwc-mobile) .dwc-nest-header:not([data-overlay-header="true"]) [data-mobile-top-transparent="true"]) :is(.dwc-nest-menu-top:not([data-below-header="true"] *, :has(.open.active)), .dwc-nav-wrapper:not([data-below-header="true"] *, :has(.open.active))) { background-color: transparent !important; } html:not(.dwc-mobile):has(:is([data-last-item-is-button-alignment="center"], [data-last-item-is-button-alignment="left"])[data-last-item-is-button="true"]) :is(.dwc-menu-wrap, .dwc-nest-menu){ inline-size: 100%; } html:not(.dwc-mobile) [data-last-item-is-button-alignment="center"][data-last-item-is-button="true"].dwc-nest-menu:not(.brx-open) .dwc-nest-nav-items > li:is(:last-of-type, :first-of-type){ margin-inline-start: auto; } html:not(.dwc-mobile) [data-last-item-is-button-alignment="left"][data-last-item-is-button="true"].dwc-nest-menu:not(.brx-open) .dwc-nest-nav-items > li:is(:last-of-type) { margin-inline-start: auto; } html:not(.dwc-mobile) .dwc-nest-tooltip { display: none; } html:not(.dwc-mobile) .open:has(.open) .open:has(.brxe-dropdown:hover) .brx-dropdown-content:not(.brx-header-left *, .brx-header-right *, [data-offcanvas="true"] *) { box-shadow: 0px 10px 30px -10px rgba(0, 0, 0, 30%); } html:not(.dwc-mobile) :is(.brx-header-left, .brx-header-right) .brxe-nav-nested .brxe-dropdown.open>.brx-dropdown-content { display: flex; min-width: auto; opacity: 1; overflow-y: auto; position: static; visibility: visible; } /* EXTEND DROPDWON BUTTON TO AVOID LOSING FOCUS/CLOSING ON DROPDOWN CONTENT */ html:not(.dwc-mobile) body:not(.brx-header-right, .brx-header-left) .dwc-nest-menu:not([data-offcanvas="true"]) .open .brx-dropdown-content .brxe-dropdown:hover::after { content: ""; position: absolute; inset-block-end: 0; block-size: calc((var(--menu-item-inline-padding) * 2) + (var(--menu-item-font-size) * 2)); inline-size: 150%; inset-inline-end: 50%; transform: translateX(50%); z-index: -1; } /*DIM DROPDOWN PARENT WHOSE CHILD DROPDOWN CONTENT IS SHOWING */ html:not(.dwc-mobile) .open:has(.open) > .brx-dropdown-content:not(.brx-header-left *, .brx-header-right *)::before { content: ""; position: absolute; inset: 0; background-color: var(--dropdown-inactive-overlay); pointer-events: none; border-radius: var(--dropdown-content-border-radius); } /* LAST BUTTON LEFT PADDDING ON DESKTOP */ html:not(.dwc-mobile) [data-last-item-is-button="true"].dwc-nest-menu .brx-nav-nested-items > .menu-item:last-of-type { padding-inline-start: var(--menu-item-inline-padding); } /* hide toggle with back button appears */ html:not(.dwc-mobile) body:has(.brxe-dropdown.open) [data-offcanvas="true"] .brxe-toggle[aria-label="Open Menu"] { z-index: 1; } /* fades in close button when the main toggle is covered by the back button */ html:not(.dwc-mobile) body:has(.brxe-dropdown.open) [data-offcanvas="true"] .brxe-toggle[aria-label="Close Menu"]:not([data-submenu-reveal="expand"] *){ opacity: 1; } html:not(.dwc-mobile) [data-mobile-top-transparent="true"][data-offcanvas="true"]:not([data-show-mobile-logo="true"]) .brxe-toggle[aria-label="Close Menu"] { opacity: 0; } html:not(.dwc-mobile) [data-show-mobile-logo="true"] .dwc-nav-wrapper{ z-index: 9999 } html:not(.dwc-mobile) [data-offcanvas="true"].dwc-nest-menu .brxe-toggle { display: flex; } /* STRIPE STYLE */ html:not(.dwc-mobile) .dwc-stripe-style .dwc-nest-nav-list:not([data-offcanvas="true"] .dwc-nest-nav-list, .brx-header-left .dwc-nest-nav-list, .brx-header-right .dwc-nest-nav-list) { background: transparent !important; } html:not(.dwc-mobile) .dwc-stripe-style .brx-has-megamenu > .brx-submenu-toggle:not([data-offcanvas="true"] .brx-submenu-toggle, .brx-header-left .brx-submenu-toggle, .brx-header-right .brx-submenu-toggle), html:not(.dwc-mobile) .dwc-stripe-style .brx-has-megamenu > .brx-submenu-toggle:not([data-offcanvas="true"] .brx-submenu-toggle, .brx-header-left .brx-submenu-toggle, .brx-header-right .brx-submenu-toggle) > a, html:not(.dwc-mobile) .dwc-stripe-style .brx-has-megamenu > .brx-submenu-toggle:not([data-offcanvas="true"] .brx-submenu-toggle, .brx-header-left .brx-submenu-toggle, .brx-header-right .brx-submenu-toggle) > button { cursor: default; } /* handles translate and opacity animation for stripe style on desktop */ html:not(.dwc-mobile) .dwc-stripe-style .brx-has-megamenu.open .brx-dropdown-content:not([data-offcanvas="true"] .dwc-nest-nav-list, .brx-header-left .dwc-nest-nav-list, .brx-header-right .dwc-nest-nav-list) > * { transform: translateX(0); } html:not(.dwc-mobile) .dwc-stripe-style .brx-has-megamenu.open .brx-dropdown-content:not([data-offcanvas="true"] .dwc-nest-nav-list, .brx-header-left .dwc-nest-nav-list, .brx-header-right .dwc-nest-nav-list) > * { transition: transform 0.4s, opacity 0s 0.15s; opacity: 1; } html:not(.dwc-mobile) .dwc-stripe-style .brx-has-megamenu .brx-dropdown-content:not([data-offcanvas="true"] .dwc-nest-nav-list, .brx-header-left .dwc-nest-nav-list, .brx-header-right .dwc-nest-nav-list) > * { transition: transform 0.4s, opacity 0s; opacity: 0; } html:not(.dwc-mobile) .dwc-stripe-style .brx-has-megamenu.open + .brx-has-megamenu .brx-dropdown-content:not([data-offcanvas="true"] .dwc-nest-nav-list, .brx-header-left .dwc-nest-nav-list, .brx-header-right .dwc-nest-nav-list) > * { transform: translateX(5%); } html:not(.dwc-mobile) .dwc-stripe-style .brx-has-megamenu:has(+ .brx-has-megamenu.open) .brx-dropdown-content:not([data-offcanvas="true"] .dwc-nest-nav-list, .brx-header-left .dwc-nest-nav-list, .brx-header-right .dwc-nest-nav-list) > * { transform: translateX(-5%); } /* mobile logo */ html:not(.dwc-mobile) .dwc-nest-menu__mobile-logo:not([data-offcanvas="true"]:not(.brx-header-left *, .brx-header-right *) .dwc-nest-menu__mobile-logo) { display: none; } /* prevent fouc when offcanvas is enabled and anime height */ body.bricks-is-frontend:has([data-offcanvas="true"]) .dwc-nav-wrapper:not(.show-nav .dwc-nav-wrapper){ display: none; } .dwc-mobile [data-hide-close-bar = 'true'] .dwc-nav-wrapper{ inset-block-start: var(--dwc-nest-header-height) } :is(.brx-header-left, .brx-header-right) .dwc-nest-header::before{ display: none; } /* mobile menu from top behind header */ .dwc-mobile :is([data-slide-in-direction="top"], [data-slide-in-direction="top left"]):not([data-match-overlay-header-width="true"]) .dwc-nav-wrapper:has(.brxe-dropdown.open.active) { z-index: unset !important; } .dwc-mobile :is([data-slide-in-direction="top"], [data-slide-in-direction="top left"]) .dwc-nav-wrapper { z-index: -1; } .dwc-mobile .dwc-nest-header__container:has(:is([data-slide-in-direction="top"], [data-slide-in-direction="top left"])) { background-color: var(--header-bg) } /************************************ MENU HEIGHT/ STRIPE STYLE ************************************/ :is([data-builder-mode], .brx-header-right, .brx-header-left) .dwc-nest-header::after, body:has([data-offcanvas="true"]) .dwc-nest-header::after { display: none; } .dwc-nest-header:not(:is(.dwc-adaptive-height, .dwc-stripe-style) .dwc-nest-header)::after{ display: none; } html:not(.dwc-mobile) .dwc-nest-header::after { display: none; content: ''; min-block-size: 0; position: absolute; inset-block-end: calc(100% - var(--dwc-nest-header-height)); inset-inline-start: 0; inline-size: 100%; block-size: 1000px; transition-delay: 0.1s !important; transform: translateY(calc(var(--dropdown-menu-height) * 1.01)) translateZ(0); pointer-events: none; transition: width 0.2s, height 0.2s, opacity 0.2s, left 0.2s, transform 0.2s !important; will-change: width, height, left, transform, opacity; contain: layout paint; z-index: -1; } html:not(.dwc-mobile) .adaptive-height-active:is(.dwc-stripe-style, .dwc-adaptive-height) .dwc-nest-header::after { display: block; } .dwc-nest-menu .brx-has-megamenu .brx-dropdown-content:not(.adaptive-height-active .brx-dropdown-content, [data-builder-mode] .brx-dropdown-content){ display:none } html:not(.dwc-mobile) body:has(.brx-has-megamenu.open) .dwc-nest-header::after { transition-delay: 0s !important; } /* STRIPE STYLE */ html:not(.dwc-mobile) .dwc-stripe-style.bricks-is-frontend .brx-has-megamenu .brx-dropdown-content:not([data-offcanvas="true"] .brx-dropdown-content), html:not(.dwc-mobile) .dwc-adaptive-height.bricks-is-frontend .brx-has-megamenu .brx-dropdown-content:not([data-offcanvas="true"] .brx-dropdown-content) { transition-delay: 0s; box-shadow: none !important; transition-duration: 0s; overflow-x: hidden; } html:not(.dwc-mobile) .dwc-stripe-style .open.brx-has-megamenu .brx-dropdown-content:not([data-offcanvas="true"] .brx-dropdown-content), html:not(.dwc-mobile) .dwc-adaptive-height .open.brx-has-megamenu .brx-dropdown-content:not([data-offcanvas="true"] .brx-dropdown-content) { transition-delay: 0.1s; transition-duration: .2s; } html:not(.dwc-mobile) .dwc-stripe-style .open.brx-has-megamenu:not([data-offcanvas="true"] .brx-has-megamenu)::before { content: ''; position: absolute; inset-block-start: 100%; block-size: calc(var(--dwc-nest-header-height)* 0.5); inline-size: 50vw; transform: translateX(-50%); } html:not(.dwc-mobile) .dwc-stripe-style .brx-nav-nested-items>.brxe-dropdown.brx-has-megamenu>.brx-dropdown-content:not([data-offcanvas="true"] .brx-dropdown-content) { overflow-x: hidden; border-radius: var(--stripe-border-radius); } html:not(.dwc-mobile) .dwc-nest-header { position: relative; } html:not(.dwc-mobile) .dwc-stripe-style .dwc-nest-header::before { content: ''; inline-size: 15px; block-size: 15px; background-color: var(--adaptive-height-bg); position: absolute; inset-block-start: 100%; transition: 0s; transition-property: inset-inline-start, transform, opacity; inset-inline-start: var(--navlink-midpoint); transform: translateX(-50%) rotate(45deg) translateY(calc(50% + 2px)); pointer-events: none; border-top: var(--adaptive-height-border); border-left: var(--adaptive-height-border); z-index: 999; } html:not(.dwc-mobile) .dwc-stripe-style .dwc-nest-header:has(.brxe-dropdown.brx-has-megamenu.open:hover)::before { transition: opacity 0.2s 0.1s, transform 0.2s 0s, inset-inline-start 0.2s 0s; } html:not(.dwc-mobile) .dwc-nest-header::before{ opacity: 0 ; } html:not(.dwc-mobile) .dwc-nest-header.hide-menu-animation::after { opacity: 0 !important; } html:not(.dwc-mobile) .dwc-stripe-style .dwc-nest-header.show-menu-animation:has(.brx-has-megamenu:hover)::before, html:not(.dwc-mobile) .dwc-nest-header.show-menu-animation::after { opacity: 1; } html:not(.dwc-mobile) .dwc-stripe-style .dwc-nest-header::after { border: var(--adaptive-height-border); } html:not(.dwc-mobile) :not(.brx-header-left, .brx-header-right).dwc-stripe-style .dwc-nest-menu .brx-nav-nested-items>.brxe-dropdown.brx-has-megamenu>.brx-dropdown-content:not([data-offcanvas="true"] .brx-dropdown-content) { transform: translateY(calc(var(--dwc-nest-header-height) * 0.5)); } html:not(.dwc-mobile) .dwc-stripe-style .dwc-nest-header::after { inset-inline-start: calc(var(--dropdown-menu-x) - 2.5rem); inline-size: calc(var(--dropdown-menu-width) + 5rem); transform: unset; inset-block-start: calc(var(--dwc-nest-header-height) + 14px); block-size: var(--dropdown-menu-height); z-index: 1; opacity: 0; } html:not(.dwc-mobile) .dwc-stripe-style:has(.brx-has-megamenu.open):not(:has([data-optimize-stripe=true])) .dwc-nest-header::after { block-size: calc(var(--dropdown-menu-height) + 0rem) !important; opacity: 1; } /* hide nav content until js is ready*/ html:not(.dwc-mobile) .dwc-stripe-style .brx-has-megamenu>.brx-dropdown-content:not(.show-nav .brx-dropdown-content, [data-offcanvas="true"] .brx-dropdown-content) { opacity: 0; } body:has(.brx-has-megamenu.open) .sticky .dwc-nest-header::after { background-color: var(--adaptive-height-bg) !important; } .dwc-nest-header::after { background-color: var(--adaptive-height-bg) !important; opacity: 0; } html:not(.dwc-mobile) .dwc-stripe-style:has([data-optimize-stripe=true]) .dwc-nest-header::after { inset-inline-start: calc(var(--dropdown-menu-x) - 1.5px); inline-size: calc(var(--dropdown-menu-width) + 2.5px); /*transform: unset;*/ block-size: calc(var(--dropdown-menu-height) + 3px) !important; z-index: 1; border-radius: var(--stripe-border-radius); transform: translateZ(0); opacity: 1 } html:not(.dwc-mobile) .dwc-stripe-style:has([data-optimize-stripe=true]) .dwc-nest-header::after { border: var(--adaptive-height-border); } html:not(.dwc-mobile) :not(.brx-header-left, .brx-header-right).dwc-stripe-style:has([data-optimize-stripe=true]) .brx-nav-nested-items>.brxe-dropdown.brx-has-megamenu>.brx-dropdown-content:not([data-offcanvas="true"] .brx-dropdown-content) { /* transform: translateY(15px) !important; */ inset-block-start: calc(100% - 20px); } .dwc-nest-header:not(.show-nav .dwc-nest-header)::after { display: none; } /**************** MENU OVERLAY ***************/ .dwc-nest-menu-overlay { position: fixed; inset-block-start: var(--dwc-nest-header-height); inline-size: 100%; block-size: 100%; background: var(--dwc-overlay-clr) !important; z-index: 1; opacity: 0; transition: 0.4s; } .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)); } @media (min-width:1025px){ .bricks-is-frontend:not(:has([data-offcanvas="true"])) header:has(.open) .dwc-nest-menu-overlay { opacity: 1; } } .dwc-nest-menu-overlay { pointer-events: none; } .no-scroll .dwc-nest-menu-overlay { opacity: 1; } :is(.brx-header-right, .brx-header-left) .dwc-nest-header__container { padding-inline: 0 } /*fade in back button*/ @-webkit-keyframes dwc-nest-fade-in { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes slide-in-right { 0% { opacity: 0; } 100% { opacity: 1; } } /* configurable menu and submenu slide out speed */ .dwc-mobile .bricks-is-frontend [data-submenu-reveal="slide"].dwc-nest-menu :is(.brx-dropdown-content, .dwc-nav-wrapper), .bricks-is-frontend :is([data-submenu-reveal="slide"][data-offcanvas="true"]).dwc-nest-menu :is(.brx-dropdown-content, .dwc-nav-wrapper), :is(.bricks-is-frontend.brx-header-right, .bricks-is-frontend.brx-header-left) :is([data-submenu-reveal="slide"]).dwc-nest-menu :is(.brx-dropdown-content, .dwc-nav-wrapper){ transition-duration: calc(0.5s / var(--slide-out-speed)) !important; } #brx-header{ --content-gap: 0; } /* overlay header */ html:not(.dwc-mobile) .bricks-is-frontend #brx-header:has([data-overlay-header = "true"]) { padding: var(--overlay-header-inset); } html:not(.dwc-mobile) .bricks-is-frontend #brx-header:has([data-overlay-header = "true"]):not(.sticky) { position: absolute; inset-block-start: 0; inset-inline: 0; } html:not(.dwc-mobile) .bricks-is-frontend #brx-header > .dwc-nest-header[data-overlay-header = "true"]{ border-radius: var(--overlay-header-radius); background-color: var(--overlay-header-bg); box-shadow: var(--overlay-header-shadow); max-inline-size: var(--overlay-header-width); } html:not(.dwc-mobile) .bricks-is-frontend #brx-header > .dwc-nest-header[data-overlay-header = "true"]:not(:has([data-offcanvas="true"])){ backdrop-filter: blur(var(--overlay-header-blur)); } html:not(.dwc-mobile) .bricks-is-frontend #brx-header:has(.open) > .dwc-nest-header[data-overlay-header = "true"]{ background-color: var(--overlay-header-bg-active) !important; } /* overlay on mobile */ .dwc-mobile .bricks-is-frontend #brx-header:has([data-overlay-header-mobile = "true"]) { padding: var(--overlay-header-inset); } .dwc-mobile .bricks-is-frontend #brx-header:has([data-overlay-header-mobile = "true"]):not(.sticky) { position: absolute; inset-block-start: 0; inset-inline: 0; } .dwc-mobile .bricks-is-frontend #brx-header > .dwc-nest-header[data-overlay-header-mobile = "true"]{ border-radius: var(--overlay-header-radius); background-color: var(--overlay-header-bg); box-shadow: var(--overlay-header-shadow); max-inline-size: var(--overlay-header-width); } /*offset hero top padding when overlay header is active */ #brx-header:has([data-offset-section-padding="true"]) + main > :is(section, div) { padding-block-start: var(--overlay-offset-padding); } /* menu height anime on overlay header */ html:not(.dwc-mobile) .bricks-is-frontend #brx-header:has([data-overlay-header = "true"]) .dwc-nest-header::after { border-radius: var(--overlay-header-radius); inset-block-end: calc(100% + var(--overlay-header-inset)); opacity: 1; } html:not(.dwc-mobile) .bricks-is-frontend:is(.dwc-adaptive-height):not(.dwc-stripe-style) #brx-header:has([data-overlay-header = "true"]) .dwc-nest-header.show-menu-animation::after { transform: translateY( calc((var(--dropdown-menu-height) + (var(--dwc-nest-header-height) * 1.5)))) translateZ(0) } /* we need to reposition the overlay outside the header */ html:not(.dwc-mobile) .bricks-is-frontend:has(.open):not(:has([data-offcanvas="true"])) .dwc-nest-menu-overlay{ opacity: 1; } /*menu items border radius desktop only*/ html:not(.dwc-mobile) .dwc-nest-menu .brx-nav-nested-items > li > :is(a:not([data-last-item-is-button="true"] .menu-item:last-of-type a, [data-last-item-is-button="true-2"] .menu-item:nth-last-of-type(-n+2) a, [data-last-item-is-button="true-3"] .menu-item:nth-last-of-type(-n+3) a ), .brx-submenu-toggle){ border-radius: var(--menu-item-radius); } html:not(.dwc-mobile) .dwc-nest-menu .brx-nav-nested-items { gap: var(--menu-items-gap); } /* dynamic dropdown conten width and position */ html:not(.dwc-mobile) :is(:not(.brx-header-left, .brx-header-right)).bricks-is-frontend .dwc-nest-menu:not([data-offcanvas="true"]) .brx-has-megamenu .brx-dropdown-content:not([data-use-selector="true"]) { min-inline-size: var(--dropdown-content-width, var(--dropdown-content-default-width)) !important; inset-inline-start: var(--left-position)!important; } html:not(.dwc-mobile) :is(:not(.brx-header-left, .brx-header-right)).bricks-is-frontend .dwc-nest-menu:not([data-offcanvas="true"]) .brx-has-megamenu .brx-dropdown-content { border-radius: var(--dropdown-content-border-radius); } .dwc-nest-header{ position: relative; z-index: 9999; } /* optimize multi row header*/ .dwc-mobile .dwc-nest-header[data-fullscreen-mobile-menu="true"]{ --dwc-nest-header-height:var(--fullscreen-mobile-menu-top-height) !important } .dwc-mobile .dwc-nest-header[data-fullscreen-mobile-menu="true"] .dwc-nest-menu-top:not([data-below-header="true"] *) { background-color: var(--mobile-menu-top-bg) !important; align-items: center !important; animation: none !important; } .dwc-mobile .dwc-nest-header[data-fullscreen-mobile-menu="true"] .dwc-nav-wrapper{ z-index: 99999 } .dwc-mobile .dwc-nest-header[data-fullscreen-mobile-menu="true"] .dwc-nest-menu-top .brxe-toggle { display: block; } .dwc-mobile .dwc-nest-header[data-fullscreen-mobile-menu="true"]:not([data-hide-mobile-logo="true"]) .dwc-nest-menu__mobile-logo { display: flex; } /* overlay header on multirow*/ html:not(.dwc-mobile) .dwc-nest-header[data-fullscreen-mobile-menu="true"][data-overlay-header="true"] > div:first-child{ border-top-left-radius: var(--overlay-header-radius); border-top-right-radius: var(--overlay-header-radius); } /* BricksExtras support*/ html:not(.dwc-mobile) #brx-header .brxe-xheaderrow:has(.dwc-nest-header){ position: relative; z-index:1; } html:not(.dwc-mobile) #brx-header .brxe-xheaderrow:first-child{ position: relative; z-index: 99991; } [data-x-overlay]:not([data-x-overlay="none"]) .dwc-nest-header{ background: var(--x-overlay-header-background)!important; } html:not(.dwc-mobile) .brxe-xheaderrow .dwc-nest-header::after { block-size: 1000px; } /* in builder */ [data-builder-mode] [data-offcanvas="true"] .dwc-nest-toggle--open{ display: none !important; } [data-builder-mode] [data-offcanvas="true"] .dwc-nest-menu-top{ display: none; } :is(.brx-header-left, .brx-header-right) [data-builder-mode] .brx-nav-nested-items, [data-builder-mode] .brx-open.dwc-nest-menu[data-offcanvas="true"] .brx-nav-nested-items { overflow-y: auto; scrollbar-width: thin !important; justify-content: flex-start !important; box-shadow: var(--sidebar-shadow); } :is(.brx-header-left, .brx-header-right) [data-builder-mode] .dwc-nav-wrapper, [data-builder-mode] [data-offcanvas="true"] .dwc-nav-wrapper { inset-inline-end: auto ; inset-inline-start: 0; } /* preview dropdown content width in builder*/ [data-builder-mode]:not(.brx-header-left, .brx-header-right) .dwc-nest-menu:not(.brx-open) .brx-has-megamenu .brx-dropdown-content:not([data-offcanvas="true"] .brx-dropdown-content, .brx-open .brx-dropdown-content){ min-inline-size:var(--dropdown-content-width, var(--dropdown-content-default-width)) !important; transform: translatex(50px); border: dotted #00b0f4 2px } [data-builder-mode]:not(.brx-header-left, .brx-header-right) .dwc-nest-menu .brx-has-megamenu .brx-dropdown-content:not([data-offcanvas="true"] .brx-dropdown-content, .brx-open .brx-dropdown-content):not([data-hide-instruction="true"])::after{ content: 'Set dropdown Content width in dropdown Content ATTRIBUTES > style, value:--dropdown-content-width: e.g. 1080px. Leave empty to use default width (set in Menu Styles CSS code block) | Set alignment in ATTRIBUTES > data-content-align, values: left, right, center. This aligns the dropdown content to the dropdown button, leave empty to align center to the header. aligments are applied on frontend only. | TIP: click here to select dropdown Content'; position: absolute; inset-block-start: 102%; color: #e1e1e1; font-size: 12px; letter-spacing: 0.5px; line-height: 1.5; background: #2b2b2b; min-block-size: fit-content; padding: 1em; } /*set alignment for sidebar edit on desktop*/ :is(.brx-header-left, .brx-header-right)[data-builder-mode] .dwc-nest-menu.brxe-nav-nested .brx-nav-nested-items, [data-builder-mode] .dwc-nest-menu.brxe-nav-nested[data-offcanvas="true"] .brx-nav-nested-items { justify-content: flex-start !important; } :is(.brx-header-left, .brx-header-right)[data-builder-window] #brx-header .dwc-nest-menu:not(.brx-open)::after { content: 'To edit Sidebar, select the Nav (Nestable), go to the CONTENT tab > MOBILE MENU, enable "Keep open while styling" | TIP: click here to select Nav (Nestable)'; position: absolute; padding-inline-start: 20px; color: #e1e1e1; font-size: 12px; line-height: 1.5; background: #2b2b2b; min-block-size: fit-content; padding: 1em; inline-size: 250px; } .brx-header-left[data-builder-window] #brx-header .dwc-nest-menu:not(.brx-open)::after { inset-inline-start: 100%; } .brx-header-right[data-builder-window] #brx-header .dwc-nest-menu:not(.brx-open)::after { inset-inline-end: 100%; } [data-builder-window] #brx-header .dwc-nest-menu[data-offcanvas="true"]:not(.brx-open)::after{ content: 'To edit Offcanvas, select the Nav (Nestable), go to the CONTENT tab > MOBILE MENU, enable "Keep open while styling" | TIP: click here to select Nav (Nestable)'; position: absolute; inset-block-start: 100%; padding-block-start: 20px; color: #e1e1e1; font-size: 12px; line-height: 1.5; background: #2b2b2b; min-block-size: fit-content; padding: 1em; inline-size: 250px; } @media (max-width: 1200px){ [data-builder-window] #brx-header .dwc-nest-menu[data-offcanvas="true"]:not(.brx-open)::after{ content: 'To edit Offcanvas, select the Nav (Nestable), go to the CONTENT tab > MOBILE MENU, enable "Keep open while styling" '; position: absolute; inset-inline-start: var(--mobile-menu-width); padding-inline-start: 20px; } } [data-builder-mode] [data-offcanvas="true"]:not(.brx-open) #dwc_nav_wrapper { transform: translateX(0); visibility: visible; } [data-builder-window] [data-last-item-is-button="true"][data-offcanvas="true"].dwc-nest-menu .brx-nav-nested-items > .menu-item:last-of-type { padding-inline: var(--menu-item-inline-padding) !important; padding-block: var(--menu-item-block-padding) !important; } /* === */ :is(.brx-header-left, .brx-header-right)[data-builder-window] .brxe-nav-nested .brxe-dropdown .brx-dropdown-content:not(.brx-open .brx-dropdown-content) { display: none; } :is(.brx-header-left, .brx-header-right)[data-builder-window] #brx-header .dwc-nest-menu.brxe-nav-nested .brx-nav-nested-items { scrollbar-width: none; } /* stripe style fix*/ html:not(.dwc-mobile) .dwc-stripe-style:not(.brx-header-left, .brx-header-right) .dwc-nest-header__container:not(:has([data-offcanvas="true"])) { align-items: stretch !important; } html:not(.dwc-mobile) .dwc-stripe-style:not(.brx-header-left, .brx-header-right) .dwc-nest-menu:not([data-offcanvas="true"]) .dwc-nav-wrapper, html:not(.dwc-mobile) .dwc-stripe-style:not(.brx-header-left, .brx-header-right) .dwc-nest-menu:not([data-offcanvas="true"]) .brx-nav-nested-items, html:not(.dwc-mobile) .dwc-stripe-style:not(.brx-header-left, .brx-header-right) .dwc-nest-menu:not([data-offcanvas="true"]) .brx-nav-nested-items > .brxe-dropdown, html:not(.dwc-mobile) .dwc-stripe-style:not(.brx-header-left, .brx-header-right) .dwc-nest-menu:not([data-offcanvas="true"]) .brx-nav-nested-items > .brxe-dropdown > .brx-submenu-toggle, html:not(.dwc-mobile) .dwc-stripe-style:not(.brx-header-left, .brx-header-right) .dwc-nest-menu:not([data-offcanvas="true"]) .brx-nav-nested-items > li > a:not(:is([data-last-item-is-button="true"], [data-last-item-is-button="true-2"], [data-last-item-is-button="true-3"]).dwc-nest-menu .brx-nav-nested-items>:is(.menu-item:last-of-type, .menu-item:nth-last-of-type(-n+2), .menu-item:nth-last-of-type(-n+3)) a) { height: 100%; } html:not(.dwc-mobile) .dwc-stripe-style:not(.brx-header-left, .brx-header-right) .dwc-nest-menu:not([data-offcanvas="true"]) .brx-nav-nested-items > li.menu-item { height: 100%; display: flex; align-items: center; } /*fix overlay in boxed mode*/ .brx-boxed .dwc-nest-menu-overlay { inline-size: var(--boxed-width, 100%); } /*wait for stripe style to load before active */ body:is(.dwc-stripe-style, .dwc-adaptive-height):not(.adaptive-height-active, .brx-header-right, .brx-header-left) .dwc-nest-menu:not([data-offcanvas="true"]) .brx-has-megamenu{ pointer-events: none; } /* LAST CTA BUTTONS */ /* Button styling for FRIST BUTTON*/ :is([data-last-item-is-button="true"], [data-last-item-is-button="true-2"], [data-last-item-is-button="true-3"]).dwc-nest-menu .brx-nav-nested-items > .menu-item:last-of-type a { color: var(--menu-cta-clr); background-color: var(--menu-cta-bg); border-radius: var(--menu-cta-radius) !important; padding-inline: var(--menu-cta-inline-padding) !important; padding-block: var(--menu-cta-block-padding) !important; border: var(--menu-cta-border); } :is([data-last-item-is-button="true"], [data-last-item-is-button="true-2"], [data-last-item-is-button="true-3"]).dwc-nest-menu .brx-nav-nested-items > .menu-item:nth-last-of-type(1) a:hover { color: var(--menu-cta-hover-clr); background-color: var(--menu-cta-hover-bg); } /* Button styling for second button*/ :is([data-last-item-is-button="true-2"], [data-last-item-is-button="true-3"]).dwc-nest-menu .brx-nav-nested-items > .menu-item:nth-last-of-type(2) a { color: var(--menu-cta-2-clr); background-color: var(--menu-cta-2-bg); border-radius: var(--menu-cta-2-radius) !important; padding-inline: var(--menu-cta-2-inline-padding) !important; padding-block: var(--menu-cta-2-block-padding) !important; border: var(--menu-cta-2-border); } :is([data-last-item-is-button="true-2"], [data-last-item-is-button="true-3"]).dwc-nest-menu .brx-nav-nested-items > .menu-item:nth-last-of-type(2) a:hover { color: var(--menu-cta-2-hover-clr); background-color: var(--menu-cta-2-hover-bg); } /* Button styling for third button */ [data-last-item-is-button="true-3"].dwc-nest-menu .brx-nav-nested-items > .menu-item:nth-last-of-type(3) a { color: var(--menu-cta-clr); background-color: var(--menu-cta-3-bg); border-radius: var(--menu-cta-3-radius) !important; padding-inline: var(--menu-cta-3-inline-padding) !important; padding-block: var(--menu-cta-3-block-padding) !important; border: var(--menu-cta-3-border); } [data-last-item-is-button="true-3"].dwc-nest-menu .brx-nav-nested-items > .menu-item:nth-last-of-type(3) a:hover { color: var(--menu-cta-hover-clr); background-color: var(--menu-cta-3-hover-bg); } /* Adjust padding for all variants in desktop mode */ html:not(.dwc-mobile) [data-last-item-is-button="true"].dwc-nest-menu .brx-nav-nested-items > .menu-item:last-of-type, html:not(.dwc-mobile) [data-last-item-is-button="true-2"].dwc-nest-menu .brx-nav-nested-items > .menu-item:nth-last-of-type(-n+2), html:not(.dwc-mobile) [data-last-item-is-button="true-3"].dwc-nest-menu .brx-nav-nested-items > .menu-item:nth-last-of-type(-n+3) { padding-inline-start: var(--menu-item-inline-padding); } /* Center alignment for single button case */ html:not(.dwc-mobile) [data-last-item-is-button-alignment="center"][data-last-item-is-button="true"].dwc-nest-menu:not(.brx-open) .dwc-nest-nav-items > li:is(:last-of-type, :first-of-type) { margin-inline-start: auto; } /* Center alignment for two buttons case */ html:not(.dwc-mobile) [data-last-item-is-button-alignment="center"][data-last-item-is-button="true-2"].dwc-nest-menu:not(.brx-open) .dwc-nest-nav-items > li:is(:nth-last-of-type(2), :first-of-type) { margin-inline-start: auto; } /* Center alignment for three buttons case */ html:not(.dwc-mobile) [data-last-item-is-button-alignment="center"][data-last-item-is-button="true-3"].dwc-nest-menu:not(.brx-open) .dwc-nest-nav-items > li:is(:nth-last-of-type(3), :first-of-type) { margin-inline-start: auto; } /* Left alignment for single button case */ html:not(.dwc-mobile) [data-last-item-is-button-alignment="left"][data-last-item-is-button="true"].dwc-nest-menu:not(.brx-open) .dwc-nest-nav-items > li:last-of-type { margin-inline-start: auto; } /* Left alignment for two buttons case */ html:not(.dwc-mobile) [data-last-item-is-button-alignment="left"][data-last-item-is-button="true-2"].dwc-nest-menu:not(.brx-open) .dwc-nest-nav-items > li:nth-last-of-type(2) { margin-inline-start: auto; } /* Left alignment for three buttons case */ html:not(.dwc-mobile) [data-last-item-is-button-alignment="left"][data-last-item-is-button="true-3"].dwc-nest-menu:not(.brx-open) .dwc-nest-nav-items > li:nth-last-of-type(3) { margin-inline-start: auto; } /* General width rule for all button cases and alignments */ html:not(.dwc-mobile):has(:is([data-last-item-is-button-alignment="center"], [data-last-item-is-button-alignment="left"]):is([data-last-item-is-button="true"], [data-last-item-is-button="true-2"], [data-last-item-is-button="true-3"])) :is(.dwc-menu-wrap, .dwc-nest-menu) { inline-size: 100%; } /* align dropdown content to bottom */ html:not(.dwc-mobile) .bricks-is-frontend:not(.brx-header-left, .brx-header-right) .dwc-nest-header__container:has([data-align-content-bottom="true"]):not(:has([data-offcanvas="true"])) { align-items: stretch !important; } html:not(.dwc-mobile) .bricks-is-frontend:not(.brx-header-left, .brx-header-right) .dwc-nest-menu[data-align-content-bottom="true"]:not([data-offcanvas="true"]) .dwc-nav-wrapper, html:not(.dwc-mobile) .bricks-is-frontend:not(.brx-header-left, .brx-header-right) .dwc-nest-menu[data-align-content-bottom="true"]:not([data-offcanvas="true"]) .brx-nav-nested-items, html:not(.dwc-mobile) .bricks-is-frontend:not(.brx-header-left, .brx-header-right) .dwc-nest-menu[data-align-content-bottom="true"]:not([data-offcanvas="true"]) .brx-nav-nested-items > .brxe-dropdown, html:not(.dwc-mobile) .bricks-is-frontend:not(.brx-header-left, .brx-header-right) .dwc-nest-menu[data-align-content-bottom="true"]:not([data-offcanvas="true"]) .brx-nav-nested-items > .brxe-dropdown > .brx-submenu-toggle, html:not(.dwc-mobile) .bricks-is-frontend:not(.brx-header-left, .brx-header-right) .dwc-nest-menu[data-align-content-bottom="true"]:not([data-offcanvas="true"]) .brx-nav-nested-items > li > a:not(: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) .bricks-is-frontend:not(.brx-header-left, .brx-header-right) .dwc-nest-menu[data-align-content-bottom="true"]:not([data-offcanvas="true"]) .brx-nav-nested-items > li.menu-item { height: 100%; display: flex; align-items: center; } /* dropdown content gap */ html:not(.dwc-mobile) body:not(.brx-header-left, .brx-header-right) .dwc-nest-menu:not([data-offcanvas="true"]) .brxe-dropdown.open > .brx-dropdown-content:not(.brx-dropdown-content .brx-dropdown-content) { transform: translateY(var(--dropdown-content-gap)) scaleX(1) scaleY(1); } html:not(.dwc-mobile) body:not(.brx-header-left, .brx-header-right) .dwc-nest-menu:not([data-offcanvas="true"]) .brxe-dropdown.open > .brx-dropdown-content .brx-dropdown-content{ transform: translateY(0) scaleX(1) scaleY(1); } /* caret on dropdown (non stripe) */ html:not(.dwc-mobile) body:not(.brx-header-right, .brx-header-left) .dwc-nest-menu[data-align-content-bottom="true"][data-caret="true"]:not([data-offcanvas="true"]) .brx-nav-nested-items > .brxe-dropdown:not(.dwc-stripe-style .brx-has-megamenu)::after { content: ''; position: absolute; background-color: var(--dropdown-content-bg); transform: rotate(45deg); inset-block-end: calc(var(--dropdown-content-gap) * -2.1); inset-inline-start: calc(50% - var(--dropdown-content-gap)); opacity: 0; } html:not(.dwc-mobile) body:not(.brx-header-right, .brx-header-left) .dwc-nest-menu[data-align-content-bottom="true"][data-caret="true"]:not([data-offcanvas="true"]) .brx-nav-nested-items > .brxe-dropdown.open:not(.dwc-stripe-style .brx-has-megamenu)::after { inline-size: calc(var(--dropdown-content-gap) * 1.5); block-size: calc(var(--dropdown-content-gap) * 1.5); opacity: 1; transition: opacity 0.2s 0.1s; } 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; }

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

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

Welcome to WordPress. This is your first post. Edit or delete it, then start writing!

michaelaperkins14@icloud.com

1 comment

A WordPress Commenter

2 months ago Reply

Hi, this is a comment.
To get started with moderating, editing, and deleting comments, please visit the Comments screen in the dashboard.
Commenter avatars come from Gravatar.

Hello world!

michaelaperkins14@icloud.com

Related posts

1 comment

A WordPress Commenter

Leave your comment (Cancel Reply)