/* ============================================================ * Magenest Menu Widget * 2-level navigation. Hover dropdown on desktop, collapsible * accordion on mobile/tablet (<= 1024px). * * IMPORTANT: the collapsed/hidden default states are fully * CSS-driven (not JS). The stylesheet is loaded in , so the * raw markup never flashes before the JS runs. * ============================================================ */ .magenest-menu { --mgn-submenu-bg: #ffffff; position: relative; display: flex; align-items: center; } .magenest-menu__list { --mgn-menu-gap: 8px; list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: var(--mgn-menu-gap); } .magenest-menu__item { position: relative; } .magenest-menu__link, .magenest-menu__sublink { display: flex; align-items: center; gap: 6px; text-decoration: none; color: inherit; white-space: nowrap; transition: color .2s ease; } .magenest-menu__link { padding: 8px 12px; } /* Arrow / caret button */ .magenest-menu__arrow { display: inline-flex; align-items: center; justify-content: center; background: none; border: 0; margin: 0; padding: 0; cursor: pointer; color: inherit; line-height: 0; } .magenest-menu__arrow svg, .magenest-menu__arrow-icon { width: 1em; height: 1em; transition: transform .25s ease; } /* Custom uploaded arrow image / svg */ .magenest-menu__arrow-icon { display: block; object-fit: contain; } /* Custom uploaded toggle image / svg ( replaces the 3 bars ) */ .magenest-menu__toggle-icon { display: block; width: 100%; height: 100%; object-fit: contain; } /* When a custom toggle icon is used, drop the bar-specific flex gap. */ .magenest-menu__toggle--custom { gap: 0; } /* Second level list */ .magenest-menu__submenu { list-style: none; margin: 0; padding: 0; } /* Hamburger toggle (hidden on desktop) */ .magenest-menu__toggle { display: none; flex-direction: column; justify-content: center; align-items: center; gap: 5px; width: 32px; height: 32px; background: none; border: 0; padding: 0; cursor: pointer; color: inherit; margin-left: auto; } .magenest-menu__toggle-bar { display: block; width: 70%; height: 2px; background: currentColor; transition: transform .25s ease, opacity .25s ease; } /* ============================================================ * Desktop ( > 1024px ) * ============================================================ */ @media (min-width: 1025px) { /* Keep link + caret on the same line; submenu is absolute, so it is removed from this flex flow. */ .magenest-menu__item { display: flex; align-items: center; } .magenest-menu__submenu { position: absolute; top: calc(100% + var(--mgn-submenu-offset, 8px)); left: 0; min-width: var(--mgn-submenu-min-width, 220px); padding: 8px 0; background: var(--mgn-submenu-bg); box-shadow: 0 10px 30px rgba(0, 0, 0, .08); border-radius: 8px; opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .2s ease, transform .2s ease, visibility .2s; z-index: 999; } /* Transparent bridge spanning the gap so the hover state is not lost while moving the cursor from the parent down to the dropdown. */ .magenest-menu__submenu::before { content: ""; position: absolute; left: 0; right: 0; top: calc(-1 * var(--mgn-submenu-offset, 8px)); height: var(--mgn-submenu-offset, 8px); } .magenest-menu__item.menu-item-has-children:hover > .magenest-menu__submenu, .magenest-menu__item.menu-item-has-children:focus-within > .magenest-menu__submenu { opacity: 1; visibility: visible; transform: translateY(0); } .magenest-menu__item.menu-item-has-children:hover > .magenest-menu__arrow svg, .magenest-menu__item.menu-item-has-children:hover > .magenest-menu__arrow .magenest-menu__arrow-icon, .magenest-menu__item.menu-item-has-children:focus-within > .magenest-menu__arrow svg, .magenest-menu__item.menu-item-has-children:focus-within > .magenest-menu__arrow .magenest-menu__arrow-icon { transform: rotate(180deg); } .magenest-menu__sublink { padding: 9px 22px; } } /* ============================================================ * Mobile / Tablet ( <= 1024px ) * ============================================================ */ @media (max-width: 1024px) { .magenest-menu__toggle { display: inline-flex; } .magenest-menu.is-open .magenest-menu__toggle-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); } .magenest-menu.is-open .magenest-menu__toggle-bar:nth-child(2) { opacity: 0; } .magenest-menu.is-open .magenest-menu__toggle-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* Slide-down panel. Collapsed by default via pure CSS. Fixed to the viewport so it spans the FULL screen width regardless of how narrow / right-aligned / overflow-clipped the nav's container is. Its top edge (--mgn-menu-top) is set by JS to the bottom of the nav; it falls back to 64px if the script has not run yet. */ .magenest-menu__list { position: fixed; /* Drop below the panel button, plus the configurable gap. */ top: calc(var(--mgn-menu-top, 64px) + var(--mgn-submenu-offset, 0px)); left: 0; right: 0; width: 100%; flex-direction: column; align-items: stretch; gap: 0; background: var(--mgn-submenu-bg); box-shadow: 0 12px 24px rgba(0, 0, 0, .1); max-height: 0; overflow: hidden; visibility: hidden; transition: max-height .3s ease, visibility .3s; z-index: 9999; } .magenest-menu.is-open .magenest-menu__list { max-height: calc(100vh - var(--mgn-menu-top, 64px) - var(--mgn-submenu-offset, 0px)); overflow-y: auto; visibility: visible; } .magenest-menu__item { border-bottom: 1px solid rgba(0, 0, 0, .06); } .magenest-menu__link { padding: 14px 18px; } .magenest-menu__item.menu-item-has-children > .magenest-menu__link { padding-right: 56px; } /* Arrow becomes a full-height tap target on the right edge. */ .magenest-menu__arrow { position: absolute; top: 0; right: 0; width: 56px; height: 50px; font-size: 18px; } .magenest-menu__item.is-expanded > .magenest-menu__arrow svg, .magenest-menu__item.is-expanded > .magenest-menu__arrow .magenest-menu__arrow-icon { transform: rotate(180deg); } /* Second level collapsed by default via pure CSS. */ .magenest-menu__submenu { max-height: 0; overflow: hidden; background: rgba(0, 0, 0, .03); transition: max-height .3s ease; } .magenest-menu__item.is-expanded > .magenest-menu__submenu { max-height: 1000px; } .magenest-menu__sublink { padding: 12px 30px; } }