diff --git a/components/header.js b/components/header.js
index b136a91..0fc3a40 100644
--- a/components/header.js
+++ b/components/header.js
@@ -37,13 +37,20 @@ export class Header extends HTMLElement {
     this.menuPanel.appendChild(this.menu)
     this.shadowRoot.appendChild(this.menuPanel)
     this.overlay.addEventListener('click', () => {
-      this.overlay.classList.add('closing')
-      this.overlay.classList.remove('open')
-      this.menuPanel.classList.remove('open')
-      setTimeout(() => {
-        this.overlay.classList.remove('closing')
-      }, 250)
+      this.close()
     })
+    this.menu.addEventListener('close', () => {
+      this.close()
+    })
+  }
+
+  close() {
+    this.overlay.classList.add('closing')
+    this.overlay.classList.remove('open')
+    this.menuPanel.classList.remove('open')
+    setTimeout(() => {
+      this.overlay.classList.remove('closing')
+    }, 250)
   }
 
   connectedCallback() {
diff --git a/components/nav-menu.js b/components/nav-menu.js
index e5fead0..53919e6 100644
--- a/components/nav-menu.js
+++ b/components/nav-menu.js
@@ -32,6 +32,13 @@ export class NavMenu extends HTMLElement {
     this.pageList = document.createElement('div')
     this.shadowRoot.append(this.pageList)
     this.renderPageList()
+    this.shadowRoot.addEventListener('click', e => {
+      if (e.target.classList.contains('page')) {
+        this.dispatchEvent(new CustomEvent(
+          'close', {bubbles: true}
+        ))
+      }
+    })
   }
 
   get language() {
diff --git a/sw.js b/sw.js
index 552c805..9cd3bbc 100644
--- a/sw.js
+++ b/sw.js
@@ -1,7 +1,7 @@
 async function initCache() {
   const cache = await caches.open('v1')
   await cache.addAll([
-    '/', //6
+    '/', //7
     '/index.html',
     '/app.js',
     '/components/page.js',