diff --git a/assets/css/base/_body.scss b/assets/css/base/_body.scss
index cb86ede..24d85f4 100644
--- a/assets/css/base/_body.scss
+++ b/assets/css/base/_body.scss
@@ -139,10 +139,6 @@ body, #site-header, #site-footer{
 body.menu-open,
 body.is-hidden{
     overflow-y: hidden;
-    main, footer, #nav-highlight, .btn--back-to-top, .bottom-bar__inner{
-        transition: opacity .3s ease-in;
-        opacity: 0.1;
-    }
 }
 
 
diff --git a/assets/css/partials/_site-menu.scss b/assets/css/partials/_site-menu.scss
index e801f24..2735055 100644
--- a/assets/css/partials/_site-menu.scss
+++ b/assets/css/partials/_site-menu.scss
@@ -75,16 +75,33 @@
     }
 }
 
+#menu-overlay{
+    position: fixed;
+    inset: 0;
+    z-index: calc(var(--z-header) - 2);
+    cursor: pointer;
+    background-color: rgba(0, 0, 0, 0.4);
+    opacity: 0;
+    visibility: hidden;
+    pointer-events: none;
+    transition: opacity .3s ease-in, visibility .3s ease-in;
+}
+
 body.menu-open{
 
     #site-menu{
         right: 0;
-
     }
 
     #menu-toggle{
         .open{ display: none; }
         .close{ display: block!important; }
     }
-  
+
+    #menu-overlay{
+        opacity: 1;
+        visibility: visible;
+        pointer-events: auto;
+    }
+
 }
\ No newline at end of file
diff --git a/assets/js/header.js b/assets/js/header.js
index 0549ae3..e90e5c7 100644
--- a/assets/js/header.js
+++ b/assets/js/header.js
@@ -1,10 +1,16 @@
 export function headerToggle() {
   const header = document.getElementById("site-header");
   const buttonToggle = document.querySelector("#menu-toggle");
+  const overlay = document.getElementById("menu-overlay");
 
   if (!header || !buttonToggle) return;
+
   buttonToggle.addEventListener("click", () => {
-    const isOpen = document.body.classList.toggle("menu-open");
+    document.body.classList.toggle("menu-open");
+  });
+
+  overlay?.addEventListener("click", () => {
+    document.body.classList.remove("menu-open");
   });
 }
 
diff --git a/site/snippets/header.php b/site/snippets/header.php
index ec014ec..e2120be 100644
--- a/site/snippets/header.php
+++ b/site/snippets/header.php
@@ -89,3 +89,4 @@
   </div>
 </header>
 <?php snippet('nav') ?>
+<div id="menu-overlay"></div>