.menu-nav { --menu-nav-offset: 0px; background: #fff; border-radius: 4px; box-shadow: 0 1px 0 rgba(35, 35, 35, 0.06); color: inherit; font: inherit; margin: 0 auto 1.5rem; max-width: 1394px; position: static; transition: box-shadow 180ms ease; width: 100%; z-index: 40; } .menu-nav *, .menu-nav *::before, .menu-nav *::after { box-sizing: border-box; } /* * position:sticky can't be used here: Avada wraps every page in * #boxed-wrapper, which sets overflow-x:clip. A non-visible overflow on * ANY ancestor disables position:sticky for descendants (they behave like * static), so the bar is pinned manually with JS-driven position:fixed * instead, paired with .menu-nav-spacer to hold the page's layout height. */ .menu-nav.is-pinned { box-shadow: 0 10px 24px rgba(20, 12, 14, 0.1); margin: 0; position: fixed; top: var(--menu-nav-offset); /* Reparented to while pinned (see frontend.js), so this is now compared at the top level against the rest of the page; kept below the WP admin bar (z-index:99999) and Avada's header on purpose. */ z-index: 9999; } .menu-nav-spacer { display: none; margin: 0 auto 1.5rem; max-width: 1394px; width: 100%; } .menu-nav__scroller { -ms-overflow-style: none; -webkit-overflow-scrolling: touch; mask-image: linear-gradient(to right, transparent 0, #000 22px, #000 calc(100% - 22px), transparent 100%); -webkit-mask-image: linear-gradient(to right, transparent 0, #000 22px, #000 calc(100% - 22px), transparent 100%); overflow-x: auto; overflow-y: hidden; scrollbar-width: none; } .menu-nav__scroller::-webkit-scrollbar { display: none; height: 0; } .menu-nav__scroller:focus-visible { outline: 2px solid rgba(155, 18, 50, 0.35); outline-offset: -2px; } .menu-nav__list { display: flex; gap: 0.5rem; list-style: none; margin: 0; padding: 0.65rem 1.5rem; white-space: nowrap; } .menu-nav__item { display: inline-flex; flex: 0 0 auto; } .menu-nav__pill { background: transparent; border: 1px solid rgba(35, 35, 35, 0.14); border-radius: 999px; color: inherit; display: inline-flex; font-family: inherit; font-size: 0.86rem; font-weight: 600; line-height: 1; padding: 0.6rem 1.05rem; text-decoration: none; transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease, transform 160ms cubic-bezier(0.34, 1.56, 0.64, 1); white-space: nowrap; } .menu-nav__pill:hover { border-color: var(--awb-color5, #9b1232); color: var(--awb-color5, #9b1232); transform: translateY(-1px); } .menu-nav__pill:focus-visible { box-shadow: 0 0 0 2px rgba(155, 18, 50, 0.3); outline: none; } .menu-nav__pill.is-active { background: var(--awb-color5, #9b1232); border-color: var(--awb-color5, #9b1232); color: #fff; transform: translateY(0); } .menu-nav__pill.is-active:hover { color: #fff; transform: translateY(-1px); } @media (max-width: 640px) { .menu-nav { border-radius: 0; } .menu-nav__list { gap: 0.4rem; padding: 0.55rem 1rem; } .menu-nav__pill { font-size: 0.8rem; padding: 0.5rem 0.85rem; } } @media (max-width: 800px) { /* * The scroller's mask-image (above) fades pills to transparent, but the * page background behind it is white too, so that fade is invisible in * practice — the last pill just looks abruptly cut off. These rules add * a visible gradient + chevron, shown only on the side there's actually * more to scroll toward (driven by .has-scroll-start/-end in frontend.js). */ .menu-nav { position: relative; } .menu-nav.has-scroll-start::before, .menu-nav.has-scroll-end::after { bottom: 0; content: ""; pointer-events: none; position: absolute; top: 0; width: 34px; z-index: 2; } .menu-nav.has-scroll-start::before { background: linear-gradient(to right, #fff 15%, rgba(255, 255, 255, 0)); left: 0; } .menu-nav.has-scroll-end::after { align-items: center; background: linear-gradient(to left, #fff 15%, rgba(255, 255, 255, 0)); color: rgba(35, 35, 35, 0.55); content: "\203A"; display: flex; font-size: 20px; font-weight: 700; justify-content: flex-end; padding-right: 4px; right: 0; } } @media (prefers-reduced-motion: reduce) { .menu-nav__pill { transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease; } .menu-nav__pill:hover, .menu-nav__pill.is-active:hover { transform: none; } }