diff --git a/src/components/navigation/menu-language/menu-language.scss b/src/components/navigation/menu-language/menu-language.scss
index fe8ead0f1322806d0b363ced535859a518b52e62..aa6a38eb8157d0dc4b70ee77712d60f306033c90 100644
--- a/src/components/navigation/menu-language/menu-language.scss
+++ b/src/components/navigation/menu-language/menu-language.scss
@@ -122,3 +122,19 @@
     width: 16px;
   }
 }
+
+.hy-menu-backdrop {
+  bottom: 0;
+  left: 0;
+  position: absolute;
+  right: 0;
+  top: 0;
+  visibility: hidden;
+
+  &.is-active {
+    background-color: rgba(0, 0, 0, 0.4);
+    transition: background-color 300ms;
+    visibility: visible;
+    z-index: 99;
+  }
+}
diff --git a/src/components/navigation/menu-language/menu-language.tsx b/src/components/navigation/menu-language/menu-language.tsx
index ca8371473832fbd83595851e7bd94b9a314fdbc5..a9daf0e352fa5bf341b502856371929b11271f11 100644
--- a/src/components/navigation/menu-language/menu-language.tsx
+++ b/src/components/navigation/menu-language/menu-language.tsx
@@ -34,6 +34,24 @@ export class MenuLanguage {
 
   @Listen('languageMenuToggle') languageMenuToggle() {
     this.isMenuOpen = !this.isMenuOpen;
+
+    //console.log(document.querySelectorAll('.hy-site-header')[0]);
+    //let hyBackdropDiv = document.querySelectorAll('.hy-backdrop')[0];
+
+    let hyHeader = this.el.closest('.hy-site-header');
+    console.log((hyHeader as HTMLElement).children[0]);
+    let hyBackdropDiv = (hyHeader as HTMLElement).children[0];
+
+    console.log(hyBackdropDiv);
+    if (hyBackdropDiv) {
+      if (this.isMenuOpen) {
+        (hyBackdropDiv as HTMLElement).classList.add('is-active');
+        (hyBackdropDiv as HTMLElement).style.top = '90px';
+      } else {
+        (hyBackdropDiv as HTMLElement).classList.remove('is-active');
+        (hyBackdropDiv as HTMLElement).style.top = '0';
+      }
+    }
   }
 
   componentWillRender() {
diff --git a/src/components/site-header/site-header.tsx b/src/components/site-header/site-header.tsx
index 68fbb8699e8be45c2fe86072f96fb39fb3431a77..6ffe0687fb51016e12006eee2e058616419e4997 100644
--- a/src/components/site-header/site-header.tsx
+++ b/src/components/site-header/site-header.tsx
@@ -113,6 +113,7 @@ export class SiteHeader {
       case MenuType.desktop:
         return (
           <header class={classAttributes.join(' ')}>
+            <div class={{'hy-backdrop': true, 'is-active': this.isMenuOpen}} />
             <div class={'hy-site-header__logo-container'}>
               <hy-site-logo size={logoSize} color={logoColor} url={this.logoUrl} label={this.logoLabel} />
             </div>