Fix for sticky menu close (#1171)

* Fix for sticky menu close
Shopify · Jan 14, 2022 · ee22e30 · ee22e30
1 parent 0ff4dae
commit ee22e30
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 0 deletions.
diff --git a/assets/base.css b/assets/base.css
@@ -1974,6 +1974,10 @@ input[type='checkbox'] {
   transform: translateY(-100%);
 }
 
+.shopify-section-header-hidden.menu-open {
+  transform: translateY(0);
+}
+
 #shopify-section-header.animate {
   transition: transform 0.15s ease-out;
 }

diff --git a/assets/global.js b/assets/global.js
@@ -408,6 +408,7 @@ class HeaderDrawer extends MenuDrawer {
     this.header = this.header || document.getElementById('shopify-section-header');
     this.borderOffset = this.borderOffset || this.closest('.header-wrapper').classList.contains('header-wrapper--border-bottom') ? 1 : 0;
     document.documentElement.style.setProperty('--header-bottom-position', `${parseInt(this.header.getBoundingClientRect().bottom - this.borderOffset)}px`);
+    this.header.classList.add('menu-open');
 
     setTimeout(() => {
       this.mainDetailsToggle.classList.add('menu-opening');
@@ -417,6 +418,11 @@ class HeaderDrawer extends MenuDrawer {
     trapFocus(this.mainDetailsToggle, summaryElement);
     document.body.classList.add(`overflow-hidden-${this.dataset.breakpoint}`);
   }
+
+  closeMenuDrawer(event, elementToFocus) {
+    super.closeMenuDrawer(event, elementToFocus);
+    this.header.classList.remove('menu-open');
+  }
 }
 
 customElements.define('header-drawer', HeaderDrawer);