diff --git a/blocks/header/header.css b/blocks/header/header.css index c2264db7..398a5dd1 100644 --- a/blocks/header/header.css +++ b/blocks/header/header.css @@ -97,7 +97,7 @@ body.light-nav { font-family: var(--font-family-proxima); font-weight: var(--font-weight-normal); font-size: var(--body-font-size-s); - letter-spacing:var(--letter-spacing-reg); + letter-spacing: var(--letter-spacing-reg); line-height: var(--body-font-size-s); text-decoration: none; cursor: pointer; @@ -197,6 +197,7 @@ body.light-nav { } .header.block nav .nav-hamburger .nav-hamburger-icon { + position: relative; height: 24px; width: 24px; } @@ -208,9 +209,19 @@ body.light-nav { .header.block nav .nav-hamburger .close { display: none; + position: absolute; + top: 0; + left: 0; + height: 100%; + width: 100%; } .header.block nav .nav-hamburger .open { + position: absolute; + top: 0; + left: 0; + height: 100%; + width: 100%; filter: var(--hamburger-filter); } @@ -239,7 +250,7 @@ body.light-nav { height: var(--nav-height); background: transparent; } - + body.light-nav .header.block nav[aria-expanded="true"] { --logo-filter: invert(1); } diff --git a/blocks/header/header.js b/blocks/header/header.js index a59f69bc..d369cc32 100644 --- a/blocks/header/header.js +++ b/blocks/header/header.js @@ -2,7 +2,7 @@ import { BREAKPOINTS } from '../../scripts/scripts.js'; import { getMetadata, decorateIcons, decorateSections } from '../../scripts/aem.js'; // media query match that indicates mobile/tablet width -const isDesktop = BREAKPOINTS.medium; +const isDesktop = BREAKPOINTS.large; function closeOnEscape(e) { if (e.code === 'Escape') { @@ -230,7 +230,9 @@ export default async function decorate(block) { nav.setAttribute('aria-expanded', 'false'); // prevent mobile nav behavior on window resize toggleMenu(nav, navSections, isDesktop.matches); - isDesktop.addEventListener('change', () => toggleMenu(nav, navSections, isDesktop.matches)); + isDesktop.addEventListener('change', () => { + toggleMenu(nav, navSections, isDesktop.matches); + }); decorateIcons(nav); const navWrapper = document.createElement('div');