FIx nav menu scroll

layout/style-scss/style.scss

@@ -11,10 +11,8 @@ $cGrayLight: #eceff1;
 $cComment: #c3c3c3;
 $cWhite: #fff;
 
-$fJosefin: 'Josefin Sans',
-sans-serif;
-$font_nunito: 'Nunito Sans',
-sans-serif;
+$fJosefin: 'Josefin Sans', sans-serif;
+$font_nunito: 'Nunito Sans', sans-serif;
 @import '_mixins';
 
 @keyframes fade_in_show {
@@ -584,9 +582,41 @@ input:-webkit-autofill:active {
 
 #main-menu {
 	position: relative;
-  z-index: 20;
+	z-index: 21;
+
+	@media (max-width: 992px) {
+		&.active {
+			&::after {
+				visibility: visible;
+				opacity: 1;
+			}
+		}
+		&::after {
+			content: '';
+			position: fixed;
+			inset: 0;
+			visibility: hidden;
+			opacity: 0;
+			background: rgba(0, 0, 0, 0.1);
+			backdrop-filter: blur(3px);
+			transition: all 250ms ease-in-out;
+		}
+	}
 
 	#menu-container-1 {
+		@media (max-width: 992px) {
+			height: 100% !important;
+			min-height: unset;
+
+			.levelHolderClass {
+				height: 100%;
+			}
+			ul {
+				height: calc(100vh - 100px);
+				overflow: auto;
+			}
+		}
+
 		ul {
 			margin: 0;
 			padding: 0;
@@ -719,7 +749,6 @@ input:-webkit-autofill:active {
 
 		@include respond-above(xxl) {
 			.product-mini {
-
 				&:nth-child(11),
 				&:nth-child(12) {
 					display: none;
@@ -2190,10 +2219,12 @@ ul.pager {
 					opacity: 1;
 					-webkit-background-clip: text;
 					-webkit-text-fill-color: transparent;
-          background-image: linear-gradient(to right,
+					background-image: linear-gradient(
+						to right,
 						#000,
 						#000 50%,
-              rgba(0, 0, 0, 0.3) 50%);
+						rgba(0, 0, 0, 0.3) 50%
+					);
 					background-size: 200% 100%;
 					background-position: 100%;
 					transition: all 1.2s cubic-bezier(0.19, 1, 0.22, 1);
@@ -2269,7 +2300,6 @@ ul.pager {
 
 				.swiper {
 					&:hover {
-
 						.swiper-button-next,
 						.swiper-button-prev {
 							opacity: 1;
@@ -2621,7 +2651,7 @@ ul.pager {
 				.fvat-data {
 					display: none;
 					padding: 15px 15px 5px 15px;
-          background: #FFF;
+					background: #fff;
 					margin-bottom: 15px;
 				}
 
@@ -2865,7 +2895,7 @@ ul.pager {
 
 			.column {
 				padding: 20px;
-        background: #FFF;
+				background: #fff;
 			}
 
 			h5 {
@@ -3739,7 +3769,6 @@ ul.pager {
 	}
 
 	.pager {
-
 		.first,
 		.last {
 			display: none;

templates_user/menu/main-menu.php

@@ -32,6 +32,8 @@
         $( '#menu-container-<?= $this -> menu['id'];?>' ).multilevelpushmenu( 'collapse' );
         $( this ).addClass( 'hidden' );
         $( '#mobile-menu-open' ).removeClass( 'hidden' );
+        $('body').removeClass('no-scroll');
+        $('#main-menu').removeClass('active');
       });
 
       $( 'body' ).on( click_event, '#mobile-menu-open', function()
@@ -39,6 +41,8 @@
         $( '#menu-container-<?= $this -> menu['id'];?>' ).css( 'visibility', 'visible' ).multilevelpushmenu( 'expand' );
         $( this ).addClass( 'hidden' );
         $( '#mobile-menu-close' ).removeClass( 'hidden' );
+        $('body').addClass('no-scroll');
+        $('#main-menu').addClass('active');
       });
     }
   });