diff --git a/src/components.d.ts b/src/components.d.ts
index 1ae996ab1aaeefd2d2f5cb7adfccb5495b0ccccc..b97fb4313aa9b09d4fdb9f0f10e88c057e1d4ba6 100644
--- a/src/components.d.ts
+++ b/src/components.d.ts
@@ -2019,6 +2019,7 @@ declare namespace LocalJSX {
     isMobile?: boolean;
     logoLabel?: string;
     logoUrl?: string;
+    onMobileMenuTopToggle?: (event: CustomEvent<any>) => void;
     onUniversityMainMenuToggled?: (event: CustomEvent<any>) => void;
     siteLabel?: string;
     siteUrl?: string;
@@ -2185,6 +2186,7 @@ declare namespace LocalJSX {
     onHeaderScrollDown?: (event: CustomEvent<any>) => void;
     onHeaderScrollUp?: (event: CustomEvent<any>) => void;
     onMenuMobileToggled?: (event: CustomEvent<any>) => void;
+    onMenuMobileTopToggled?: (event: CustomEvent<any>) => void;
     siteLabel?: string;
     siteUrl?: string;
   }
diff --git a/src/components/navigation/hy-menu-main-group/hy-menu-main-group.scss b/src/components/navigation/hy-menu-main-group/hy-menu-main-group.scss
index fdb4b5505e4c9797ebfa84a551ddfb78e94f27e6..614b85d67e946573ed5b2431ad47cf24ed193220 100644
--- a/src/components/navigation/hy-menu-main-group/hy-menu-main-group.scss
+++ b/src/components/navigation/hy-menu-main-group/hy-menu-main-group.scss
@@ -275,7 +275,7 @@
   display: flex;
   flex-direction: column;
   justify-items: space-between;
-  max-width: 350px;
+  max-width: 400px;
   overflow: hidden;
   padding: 0px;
   place-items: stretch;
diff --git a/src/components/navigation/hy-menu-main-group/hy-menu-main-group.tsx b/src/components/navigation/hy-menu-main-group/hy-menu-main-group.tsx
index 31914440f4b0449570c504b1d5f044854503ccf7..8f3365774046b0b1b5a777b8249ff398bab0fe51 100644
--- a/src/components/navigation/hy-menu-main-group/hy-menu-main-group.tsx
+++ b/src/components/navigation/hy-menu-main-group/hy-menu-main-group.tsx
@@ -33,6 +33,7 @@ export class HyMenuMainGroup {
   @State() isMenuOpen: boolean = false;
 
   @Event() universityMainMenuToggled: EventEmitter;
+  @Event() mobileMenuTopToggle: EventEmitter;
 
   private _dataMainMenu: MainMenu[];
 
@@ -43,6 +44,7 @@ export class HyMenuMainGroup {
 
   @Listen('click')
   handleComponentClick(event) {
+    this.mobileMenuTopToggle.emit();
     this.isMenuOpen = !this.isMenuOpen;
 
     if (this.isMenuOpen) {
diff --git a/src/components/navigation/hy-menu-main-group/readme.md b/src/components/navigation/hy-menu-main-group/readme.md
index 122597d87748ecc2954dbf383d1468b6a4b200a1..e29a25c5dd530290fdc0cc2a6d7da8266c48fc00 100644
--- a/src/components/navigation/hy-menu-main-group/readme.md
+++ b/src/components/navigation/hy-menu-main-group/readme.md
@@ -18,6 +18,7 @@
 
 | Event                       | Description | Type               |
 | --------------------------- | ----------- | ------------------ |
+| `mobileMenuTopToggle`       |             | `CustomEvent<any>` |
 | `universityMainMenuToggled` |             | `CustomEvent<any>` |
 
 ## Dependencies
diff --git a/src/components/site-header/readme.md b/src/components/site-header/readme.md
index daa64e38ae26973724f4d61e077a634b6ca4c0f6..c656f9976e2d6ee297f6cd7e8a03e341ca2e13f5 100644
--- a/src/components/site-header/readme.md
+++ b/src/components/site-header/readme.md
@@ -25,11 +25,12 @@
 
 ## Events
 
-| Event               | Description | Type               |
-| ------------------- | ----------- | ------------------ |
-| `headerScrollDown`  |             | `CustomEvent<any>` |
-| `headerScrollUp`    |             | `CustomEvent<any>` |
-| `menuMobileToggled` |             | `CustomEvent<any>` |
+| Event                  | Description | Type               |
+| ---------------------- | ----------- | ------------------ |
+| `headerScrollDown`     |             | `CustomEvent<any>` |
+| `headerScrollUp`       |             | `CustomEvent<any>` |
+| `menuMobileToggled`    |             | `CustomEvent<any>` |
+| `menuMobileTopToggled` |             | `CustomEvent<any>` |
 
 ## Dependencies
 
diff --git a/src/components/site-header/site-header.tsx b/src/components/site-header/site-header.tsx
index 433c69225b5e52fce6ce047f6d57a205276afc22..35870133f3d686c29e2277698bbd7ba2a705d2c2 100644
--- a/src/components/site-header/site-header.tsx
+++ b/src/components/site-header/site-header.tsx
@@ -52,6 +52,7 @@ export class SiteHeader {
   @Event() headerScrollUp: EventEmitter;
   @Event() headerScrollDown: EventEmitter;
   @Event() menuMobileToggled: EventEmitter;
+  @Event() menuMobileTopToggled: EventEmitter;
 
   private ro: ResizeObserver;
   private donateLink: DonateLink[];
@@ -71,6 +72,12 @@ export class SiteHeader {
     this.menuMobileToggled.emit();
   }
 
+  // Listener for toggling mobile menu top panel on or off.
+  @Listen('mobileMenuTopToggle') mobileMenuTopToggle() {
+    this.isMenuOpen = !this.isMenuOpen;
+    this.menuMobileTopToggled.emit();
+  }
+
   @Listen('scroll', {target: 'window'})
   handleScroll() {
     if (this.el.getAttribute('menu-type') === 'desktop') {
@@ -221,7 +228,6 @@ export class SiteHeader {
     const logoColor = ColorVariant.black;
     const logoColorGroup = ColorVariant.white;
     let classAttributes = ['hy-site-header', 'hy-site-header--' + this.menuType];
-
     switch (this.menuType) {
       case MenuType.desktop:
         // Larger than 1200px screens