diff --git a/src/app/theme/layout/admin/admin.component.html b/src/app/theme/layout/admin/admin.component.html
index 354b0c0f..2dfc40ce 100644
--- a/src/app/theme/layout/admin/admin.component.html
+++ b/src/app/theme/layout/admin/admin.component.html
@@ -21,5 +21,6 @@
       </div>
     </div>
   </div>
+  <div class="pc-menu-overlay" (click)="closeMenu()" (keydown)="handleKeyDown($event)" tabindex="0"></div>
 </div>
 <app-configuration></app-configuration>
diff --git a/src/app/theme/layout/admin/admin.component.ts b/src/app/theme/layout/admin/admin.component.ts
index 7ea473c8..6c2b2024 100644
--- a/src/app/theme/layout/admin/admin.component.ts
+++ b/src/app/theme/layout/admin/admin.component.ts
@@ -36,4 +36,16 @@ export class AdminComponent {
       this.navCollapsedMob = !this.navCollapsedMob;
     }
   }
+
+  handleKeyDown(event: KeyboardEvent): void {
+    if (event.key === 'Escape') {
+      this.closeMenu();
+    }
+  }
+
+  closeMenu() {
+    if (document.querySelector('app-navigation.pcoded-navbar').classList.contains('mob-open')) {
+      document.querySelector('app-navigation.pcoded-navbar')?.classList.remove('mob-open');
+    }
+  }
 }
diff --git a/src/app/theme/layout/admin/navigation/nav-content/nav-content.component.ts b/src/app/theme/layout/admin/navigation/nav-content/nav-content.component.ts
index 92431a61..238c9741 100644
--- a/src/app/theme/layout/admin/navigation/nav-content/nav-content.component.ts
+++ b/src/app/theme/layout/admin/navigation/nav-content/nav-content.component.ts
@@ -1,5 +1,5 @@
 // angular import
-import { Component, EventEmitter, OnInit, Output } from '@angular/core';
+import { Component, EventEmitter, Output } from '@angular/core';
 import { Location } from '@angular/common';
 
 // project import
@@ -11,7 +11,7 @@ import { environment } from 'src/environments/environment';
   templateUrl: './nav-content.component.html',
   styleUrls: ['./nav-content.component.scss']
 })
-export class NavContentComponent implements OnInit {
+export class NavContentComponent {
   // public props
   title = 'Demo application for version numbering';
   currentApplicationVersion = environment.appVersion;
@@ -28,16 +28,6 @@ export class NavContentComponent implements OnInit {
     this.navigation = this.nav.get();
   }
 
-  // life cycle event
-  ngOnInit() {
-    if (this.windowWidth < 992) {
-      setTimeout(() => {
-        document.querySelector('.pcoded-navbar').classList.add('menupos-static');
-        (document.querySelector('#nav-ps-datta') as HTMLElement).style.maxHeight = '100%';
-      }, 500);
-    }
-  }
-
   // public method
   navMob() {
     if (this.windowWidth < 992 && document.querySelector('app-navigation.pcoded-navbar').classList.contains('mob-open')) {
diff --git a/src/scss/menu/_menu-lite.scss b/src/scss/menu/_menu-lite.scss
index bdefd754..bc68e03a 100644
--- a/src/scss/menu/_menu-lite.scss
+++ b/src/scss/menu/_menu-lite.scss
@@ -1125,7 +1125,7 @@
     ~ .pcoded-main-container {
       margin-left: $Menu-collapsed-width;
 
-      &:before {
+      .pc-menu-overlay {
         position: absolute;
         top: 0;
         left: 0;
@@ -1213,7 +1213,6 @@
 
   .pcoded-navbar {
     margin-left: -#{$Menu-width};
-    position: absolute;
     height: 100%;
     box-shadow: none;