Fix mobile icons and opening issue. (#174)

hlxsites · Jan 10, 2024 · 3d68cab · 3d68cab
1 parent f05b3ec
commit 3d68cab
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 4 deletions.
diff --git 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
@@ -3,7 +3,7 @@ import { getMetadata, decorateIcons, decorateSections } from '../../scripts/aem.
 import { open as openSignIn, close as closeSignIn } from '../login/login.js';
 
 // media query match that indicates mobile/tablet width
-const isDesktop = BREAKPOINTS.medium;
+const isDesktop = BREAKPOINTS.large;
 
 function closeOnEscape(e) {
   if (e.code === 'Escape') {
@@ -236,7 +236,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');