diff --git a/src/components.d.ts b/src/components.d.ts
index 5b551e6a7688b314e294285aa15efc7d36abc96f..11f6df4bd4808c7ed0ffb1670bb68a493ad947ea 100644
--- a/src/components.d.ts
+++ b/src/components.d.ts
@@ -2058,6 +2058,7 @@ declare namespace LocalJSX {
     menuLabelOpen?: string;
     menuType?: MenuType;
     onHeaderScrollUp?: (event: CustomEvent<any>) => void;
+    onMenuMobileToggled?: (event: CustomEvent<any>) => void;
   }
   interface HySiteLogo {
     color?: ColorVariant;
diff --git a/src/components/site-header/hy-desktop-menu-links/hy-desktop-menu-links.tsx b/src/components/site-header/hy-desktop-menu-links/hy-desktop-menu-links.tsx
index 3ea0d1da7c760d02167463f9b8ffe51233190372..0ec5023a309f54ef010881fcb4c0dc5963f628a6 100644
--- a/src/components/site-header/hy-desktop-menu-links/hy-desktop-menu-links.tsx
+++ b/src/components/site-header/hy-desktop-menu-links/hy-desktop-menu-links.tsx
@@ -139,7 +139,7 @@ export class HyDesktopMenuLinks {
 
     // Add shadow backdrop
     let rect = activeMenuItemSibling.getBoundingClientRect();
-    //this.showBackdropShadow('open', rect.bottom);
+
     let shadowTop = this.el.parentElement.classList.contains('hy-site-header--sticky-active')
       ? this.el.parentElement.offsetHeight + this._headerBorderOffset + rect.height
       : this.el.parentElement.offsetTop + this.el.parentElement.offsetHeight + this._headerBorderOffset + rect.height;
diff --git a/src/components/site-header/readme.md b/src/components/site-header/readme.md
index 129c782db521fd53b8c680a68db0ed64ecc1b86f..9d2298e3f575ec2a789b7593b9b2b47bb27a534c 100644
--- a/src/components/site-header/readme.md
+++ b/src/components/site-header/readme.md
@@ -21,9 +21,10 @@
 
 ## Events
 
-| Event            | Description | Type               |
-| ---------------- | ----------- | ------------------ |
-| `headerScrollUp` |             | `CustomEvent<any>` |
+| Event               | Description | Type               |
+| ------------------- | ----------- | ------------------ |
+| `headerScrollUp`    |             | `CustomEvent<any>` |
+| `menuMobileToggled` |             | `CustomEvent<any>` |
 
 ## Dependencies
 
diff --git a/src/components/site-header/site-header.tsx b/src/components/site-header/site-header.tsx
index cb2bea8a536738562baeaa4e261888c51b72ec37..8be0aa04bcf7710f5314dec14d04e4a1bc6aacb1 100644
--- a/src/components/site-header/site-header.tsx
+++ b/src/components/site-header/site-header.tsx
@@ -46,6 +46,8 @@ export class SiteHeader {
   @State() isDesktopMenuOpen: boolean = false;
 
   @Event() headerScrollUp: EventEmitter;
+  @Event() menuMobileToggled: EventEmitter;
+
   private ro: ResizeObserver;
   private donateLink: DonateLink[];
   private menuLabels: ComponentLabels[];
@@ -61,6 +63,7 @@ export class SiteHeader {
   // Listener for toggling mobile menu panel on or off.
   @Listen('mobileMenuToggle') mobileMenuToggle() {
     this.isMenuOpen = !this.isMenuOpen;
+    this.menuMobileToggled.emit();
   }
 
   @Listen('scroll', {target: 'window'})
diff --git a/src/components/site-header/site-search/site-search.scss b/src/components/site-header/site-search/site-search.scss
index 2a360aec88670b617616c929c77c1a1b37c3bb2d..700aa57a14613dcc707d49a4aeb5b306d485d37c 100644
--- a/src/components/site-header/site-search/site-search.scss
+++ b/src/components/site-header/site-search/site-search.scss
@@ -161,16 +161,13 @@
       max-width: 100%;
       padding: 0 1rem 2rem;
       width: 100%;
+
       @include breakpoint($narrow) {
-        padding: 0 2rem 2rem;
-      }
-      @include breakpoint($extrawide) {
         max-width: 1216px;
-        padding: 0 2rem 2rem;
+        padding: 0 0 2rem;
       }
       @include breakpoint($xlarge) {
-        max-width: 1216px;
-        padding: 0 2rem 4rem;
+        padding: 0 0 4rem;
       }
     }
 
@@ -178,10 +175,11 @@
       background-color: transparent;
       border: none;
       position: absolute;
-      right: 0;
+      right: 1rem;
       top: 25px;
 
       @include breakpoint($narrow) {
+        right: 2rem;
         top: 36px;
       }
       @include breakpoint($xlarge) {
@@ -206,6 +204,17 @@
           letter-spacing: -0.56px;
         }
       }
+
+      &:focus,
+      &:hover {
+        cursor: pointer;
+        span {
+          color: var(--brand-main);
+        }
+        svg {
+          fill: var(--brand-main);
+        }
+      }
     }
 
     &__tools {
diff --git a/src/components/site-header/site-search/site-search.tsx b/src/components/site-header/site-search/site-search.tsx
index 2c3b4a0b4f80278fb722fde74455541d2f21761e..3c9c8f76173064b23f22f34690a1e8e434571c18 100644
--- a/src/components/site-header/site-search/site-search.tsx
+++ b/src/components/site-header/site-search/site-search.tsx
@@ -72,12 +72,21 @@ export class SiteSearch {
   @Listen('menuDesktopToggled', {target: 'document'})
   desktopMenuToggled() {
     this.isSearchPanelOpen = false;
+    this.showBackdropShadow();
+  }
+
+  // CLose the search panel if user opens the mobile menu panel.
+  @Listen('menuMobileToggled', {target: 'document'})
+  mobileMenuToggled() {
+    this.isSearchPanelOpen = false;
+    this.showBackdropShadow();
   }
 
   // CLose the search panel if user opens the language menu.
   @Listen('menuLanguageToggled', {target: 'document'})
   menuLanguageToggled() {
     this.isSearchPanelOpen = false;
+    this.showBackdropShadow();
   }
 
   handleSearchPanelToggle(event) {
@@ -90,23 +99,52 @@ export class SiteSearch {
       this.searchPanelToggled.emit();
 
       let hyHeader = this.el.closest('.hy-site-header') as HTMLElement;
-      let rectHeader = hyHeader.getBoundingClientRect();
-
-      const headerHeight = `${rectHeader.bottom}px`;
+      const headerHeight = hyHeader.classList.contains('hy-site-header--sticky-active')
+        ? `${hyHeader.offsetHeight}px`
+        : `${hyHeader.offsetTop + hyHeader.offsetHeight}px`;
       const searchPanel = this.el.shadowRoot.querySelectorAll(`.site-search__panel`)[0] as HTMLElement;
       searchPanel.style.top = headerHeight;
 
+      // Add shadow backdrop
+      let rect = searchPanel.getBoundingClientRect();
+
+      let shadowTop = hyHeader.classList.contains('hy-site-header--sticky-active')
+        ? hyHeader.offsetHeight + rect.height
+        : hyHeader.offsetTop + hyHeader.offsetHeight + rect.height;
+      this.showBackdropShadow('open', shadowTop);
+
       // Without setTimeout it will not focus the input because it hasn't rendered yet.
       setTimeout(() => {
         const searchInput = this.el.shadowRoot.querySelector('input#search') as HTMLElement;
         searchInput.focus();
       });
+    } else {
+      this.showBackdropShadow();
     }
     event.stopPropagation();
   }
 
+  showBackdropShadow(state = 'close', top = 0) {
+    let hyHeader = this.el.closest('.hy-site-header') as HTMLElement;
+    let hyBackdropDiv = hyHeader.children[0] as HTMLElement;
+
+    if (hyBackdropDiv) {
+      if (state === 'open') {
+        let me = window.outerHeight - top;
+        hyBackdropDiv.style.height = `${me}px`;
+        hyBackdropDiv.style.top = `${top}px`;
+        hyBackdropDiv.style.position = 'absolute';
+        hyBackdropDiv.classList.add('is-active');
+      } else {
+        hyBackdropDiv.removeAttribute('style');
+        hyBackdropDiv.classList.remove('is-active');
+      }
+    }
+  }
+
   handleSearchPanelClose() {
     this.isSearchPanelOpen = false;
+    this.showBackdropShadow();
   }
 
   render() {