diff --git a/src/components.d.ts b/src/components.d.ts
index 3e9e50d2304551703ff7fb07c5d515a32c147f92..f5282119165fa474173b5e25dded9a62615aa626 100644
--- a/src/components.d.ts
+++ b/src/components.d.ts
@@ -1559,6 +1559,7 @@ declare namespace LocalJSX {
   }
   interface HyDesktopMenuLinks {
     dataDesktopLinks?: DesktopLinks[] | string;
+    onMenuDesktopToggled?: (event: CustomEvent<any>) => void;
   }
   interface HyDocsContainer {}
   interface HyDropdown {
@@ -1860,6 +1861,7 @@ declare namespace LocalJSX {
     dataMenuLanguage?: MenuLanguage[] | string;
     isMobile?: boolean;
     labels?: ComponentLabels[] | string;
+    onMenuLanguageToggled?: (event: CustomEvent<any>) => void;
   }
   interface HyMenuLanguageItem {
     abbr?: string;
diff --git a/src/components/navigation/menu-language/menu-language.tsx b/src/components/navigation/menu-language/menu-language.tsx
index 14d4e70f39b296e4554f706677abb245e73560f2..781645bd766093945a20e91cbcda14cf0c11e71f 100644
--- a/src/components/navigation/menu-language/menu-language.tsx
+++ b/src/components/navigation/menu-language/menu-language.tsx
@@ -8,7 +8,7 @@ export interface MenuLanguage {
   isActive?: boolean;
 }
 
-import {Component, h, Prop, Host, Watch, Element, Listen, State} from '@stencil/core';
+import {Component, h, Prop, Host, Watch, Element, Listen, State, Event, EventEmitter} from '@stencil/core';
 
 @Component({
   tag: 'hy-menu-language',
@@ -21,6 +21,9 @@ export class MenuLanguage {
   @Prop() isMobile: boolean = false;
   @Prop() labels?: ComponentLabels[] | string;
   @State() isMenuOpen: boolean = false;
+
+  @Event() menuLanguageToggled: EventEmitter;
+
   private _dataMenuLanguage: MenuLanguage[];
   private _labels: ComponentLabels[];
 
@@ -32,19 +35,36 @@ export class MenuLanguage {
     this._labels = typeof data === 'string' ? JSON.parse(data) : data;
   }
 
+  // Close the language menu if user clicks anywhere outside the Menu language component.
   @Listen('click', {target: 'window'})
   handleOutsideMenuClick(event) {
-    // Close the language menu if user clicks anywhere outside the Menu language component.
     this.isMenuOpen = false;
     event.stopPropagation();
   }
 
+  // CLose the language menu if user opens the desktop menu panel.
+  @Listen('menuDesktopToggled', {target: 'document'})
+  desktopMenuToggled() {
+    this.isMenuOpen = false;
+  }
+
+  @Listen('focus')
+  handleComponentFocus(event) {
+    // Close desktop menu panel if it's open.
+    this.menuLanguageToggled.emit();
+
+    event.stopPropagation();
+  }
+
   @Listen('click')
   handleComponentClick(event) {
     this.isMenuOpen = !this.isMenuOpen;
     const languageMenuSelector = event.target as HTMLElement;
 
     if (this.isMenuOpen) {
+      // Close desktop menu panel if it's open.
+      this.menuLanguageToggled.emit();
+
       let hyHeader = this.el.closest('.hy-site-header') as HTMLElement;
       const headerHeight = `${
         languageMenuSelector.offsetHeight +
diff --git a/src/components/navigation/menu-language/readme.md b/src/components/navigation/menu-language/readme.md
index 35ba8fbb916bab9cb105e35b26bb2e52440778a2..cd19087f41c16dbb1539d4d4f160d5dec500384d 100644
--- a/src/components/navigation/menu-language/readme.md
+++ b/src/components/navigation/menu-language/readme.md
@@ -10,6 +10,12 @@
 | `isMobile`         | `is-mobile`          |             | `boolean`                     | `false`     |
 | `labels`           | `labels`             |             | `ComponentLabels[] \| string` | `undefined` |
 
+## Events
+
+| Event                 | Description | Type               |
+| --------------------- | ----------- | ------------------ |
+| `menuLanguageToggled` |             | `CustomEvent<any>` |
+
 ## Dependencies
 
 ### Used by
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 43b970e540541dd9a41c9a60eec4b0b62477f9f6..38881507a0ffea2d1ea6903e8ed15974150915be 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
@@ -19,7 +19,7 @@ export interface DesktopLinks {
 }
 
 import {ColorVariant} from '../../../utils/utils';
-import {Component, h, Element, Prop, State, Watch} from '@stencil/core';
+import {Component, h, Element, Prop, State, Watch, EventEmitter, Event, Listen} from '@stencil/core';
 
 @Component({
   tag: 'hy-desktop-menu-links',
@@ -39,6 +39,8 @@ export class HyDesktopMenuLinks {
   @State() isDesktopMenuOpen: boolean = false;
   @State() currenOpenMenuId: number = 0;
 
+  @Event() menuDesktopToggled: EventEmitter;
+
   private _submenuLeftMargin: number = 32;
   private _headerBorderOffset: number = 0;
 
@@ -70,7 +72,22 @@ export class HyDesktopMenuLinks {
 
   showPanel(id) {
     // Close menu lang menu if it's open
-    //this.closeLangMenu();
+    this.menuDesktopToggled.emit();
+
+    /*
+  @Listen('handleClick', {capture: true}) handleClick() {
+      this.menuContainerToggled.emit({
+        triggerItem: this.menuLinkId,
+        triggerType: 'add',
+      });
+      const currentParent = this.el.parentNode;
+      this.addBreadcrumb.emit({
+        url: this.url,
+        label: currentParent.parentElement.getAttribute('label'),
+        bid: this.menuLinkId,
+      });
+    }
+     */
 
     // Open desktop menu panel
     this.isDesktopMenuOpen = true;
@@ -89,6 +106,7 @@ export class HyDesktopMenuLinks {
       item.classList.remove('hy-desktop-menu-panel--is-active');
       item.setAttribute('aria-hidden', 'true');
       (item as HTMLElement).style.transition = 'none';
+      (item as HTMLElement).style.opacity = '0';
     });
 
     // Add active classes to the currently active item and its sibling element.
@@ -114,7 +132,6 @@ export class HyDesktopMenuLinks {
     const headerHeight = this.el.parentElement.classList.contains('hy-site-header--sticky-active')
       ? `${this.el.parentElement.offsetHeight + this._headerBorderOffset}px`
       : `${this.el.parentElement.offsetTop + this.el.parentElement.offsetHeight + this._headerBorderOffset}px`;
-    console.log(this.el.parentElement.offsetTop + ' ' + this.el.parentElement.offsetHeight);
     activeMenuItemSibling.style.top = headerHeight;
 
     // Add shadow backdrop
@@ -190,6 +207,13 @@ export class HyDesktopMenuLinks {
     event.stopPropagation();
   }
 
+  // CLose the desktop menu panel if user opens the language menu.
+  @Listen('menuLanguageToggled', {target: 'document'})
+  menuLanguageToggled() {
+    let fadeOut = true;
+    this.closePanel(fadeOut);
+  }
+
   handleDesktopMenuEnter(event, id) {
     this._hoverTimer = setTimeout(() => {
       const activeMenuItem = this.el.shadowRoot.querySelector(`.desktop-menu-link[link-id="${id}"]`) as HTMLElement;
diff --git a/src/components/site-header/hy-desktop-menu-links/readme.md b/src/components/site-header/hy-desktop-menu-links/readme.md
index 97289c9d478d6d75545d620dc6404a7b5125ec91..c35a3a1b94b97dfb8ade60c2e4dcc3f3f0595eb9 100644
--- a/src/components/site-header/hy-desktop-menu-links/readme.md
+++ b/src/components/site-header/hy-desktop-menu-links/readme.md
@@ -8,6 +8,12 @@
 | ------------------ | -------------------- | ----------- | -------------------------- | ----------- |
 | `dataDesktopLinks` | `data-desktop-links` |             | `DesktopLinks[] \| string` | `undefined` |
 
+## Events
+
+| Event                | Description | Type               |
+| -------------------- | ----------- | ------------------ |
+| `menuDesktopToggled` |             | `CustomEvent<any>` |
+
 ## Dependencies
 
 ### Used by