diff --git a/assets/component-mega-menu.css b/assets/component-mega-menu.css index d5a6a479dd8..d233a3afb5b 100644 --- a/assets/component-mega-menu.css +++ b/assets/component-mega-menu.css @@ -8,7 +8,6 @@ border-radius: 0; border-right: 0; left: 0; - max-height: calc(100vh - var(--header-bottom-position-desktop, 20rem) - 4rem); overflow-y: auto; padding-bottom: 2.4rem; padding-top: 2.4rem; @@ -18,6 +17,10 @@ z-index: -1; } +.shopify-section-header-sticky .mega-menu__content { + max-height: calc(100vh - var(--header-bottom-position-desktop, 20rem) - 4rem); +} + .header-wrapper--border-bottom .mega-menu__content { border-top: 0; } @@ -28,15 +31,8 @@ } .mega-menu[open] .mega-menu__content { - animation: animateMenuOpen var(--duration-default) ease; - animation-fill-mode: forwards; -} - -@media (prefers-reduced-motion) { - .mega-menu[open] .mega-menu__content { - opacity: 1; - transform: translateY(0); - } + opacity: 1; + transform: translateY(0); } .mega-menu__list { @@ -49,11 +45,21 @@ .mega-menu__link { color: rgba(var(--color-foreground), 0.75); display: block; + font-size: 1.3rem; line-height: calc(1 + 0.3 / var(--font-body-scale)); - padding-bottom: 0.8rem; - padding-top: 0.8rem; + padding-bottom: 0.6rem; + padding-top: 0.6rem; text-decoration: none; transition: text-decoration var(--duration-short) ease; + word-wrap: break-word; +} + +.mega-menu__link--level-2 { + font-size: 1.4rem; +} + +.mega-menu__link--level-2:not(:only-child) { + margin-bottom: 0.8rem; } .header--top-center .mega-menu__list { diff --git a/assets/component-menu-drawer.css b/assets/component-menu-drawer.css index a76fedf8451..85cfbe13e53 100644 --- a/assets/component-menu-drawer.css +++ b/assets/component-menu-drawer.css @@ -202,6 +202,7 @@ details[open].menu-opening > .menu-drawer__submenu { background-color: transparent; font-family: var(--font-body-family); font-style: var(--font-body-style); + text-align: left; } .no-js .menu-drawer__close-button { diff --git a/assets/details-disclosure.js b/assets/details-disclosure.js index 6fc6707c8c0..cc12836bcd0 100644 --- a/assets/details-disclosure.js +++ b/assets/details-disclosure.js @@ -35,12 +35,15 @@ customElements.define('details-disclosure', DetailsDisclosure); class HeaderMenu extends DetailsDisclosure { constructor() { super(); - this.header = document.querySelector('header'); + this.header = document.querySelector('.header-wrapper'); } onToggle() { + if (!this.header) return; + this.header.preventHide = this.mainDetailsToggle.open; + if (document.documentElement.style.getPropertyValue('--header-bottom-position-desktop') !== '') return; - if (this.header) document.documentElement.style.setProperty('--header-bottom-position-desktop', `${Math.floor(this.header.getBoundingClientRect().bottom)}px`); + document.documentElement.style.setProperty('--header-bottom-position-desktop', `${Math.floor(this.header.getBoundingClientRect().bottom)}px`); } } diff --git a/sections/header.liquid b/sections/header.liquid index 90ebc186012..40a6e65deb6 100644 --- a/sections/header.liquid +++ b/sections/header.liquid @@ -431,7 +431,7 @@