mobile menu fix

htdocs/wp-content/themes/lawcarta/assets/css/main-page.css

@@ -814,7 +814,8 @@ header {
     top: 1px;
     -webkit-transform: scale(0.8);
             transform: scale(0.8);
-    left: 0; }
+    left: 0;
+    z-index: 12; }
     header .main-logo img {
       max-height: 100%; }
     @media (min-width: 769px) {
@@ -1044,7 +1045,8 @@ header {
     display: inline-block;
     position: absolute;
     top: 10px;
-    right: 20px; }
+    right: 20px;
+    z-index: 15; }
     @media (min-width: 769px) {
       header .mobile-menu {
         top: 24px; } }
@@ -1088,22 +1090,27 @@ header {
   header .mobile-nav {
     display: none;
     position: fixed;
+    top: 0;
     z-index: 10000;
-    top: 40px;
+    padding-top: 40px;
     right: 0;
     color: #fff;
-    background-color: #222;
-    -webkit-box-shadow: inset 0 5px 10px rgba(0, 0, 0, 0.75);
-            box-shadow: inset 0 5px 10px rgba(0, 0, 0, 0.75);
-    padding: 10px 0 5px;
-    max-width: 100%;
-    min-width: 200px; }
+    height: 100%;
+    z-index: 10; }
     @media (min-width: 769px) {
       header .mobile-nav {
-        top: 71px; } }
+        padding-top: 71px; } }
     @media (min-width: 992px) {
       header .mobile-nav {
         display: none !important; } }
+    header .mobile-nav .mm-bg {
+      padding: 10px 0 5px;
+      background-color: #222;
+      -webkit-box-shadow: inset 0 5px 10px rgba(0, 0, 0, 0.75);
+              box-shadow: inset 0 5px 10px rgba(0, 0, 0, 0.75);
+      width: 220px;
+      max-height: 100%;
+      overflow: auto; }
     header .mobile-nav .header-menu {
       display: block;
       -webkit-box-flex: 0;
@@ -2494,6 +2501,5 @@ footer {
           height: 2px;
           background: #48566b; }
   .main-page .faq-answer img {
-    width: auto !important;
     height: auto !important;
     max-width: 100%; }

htdocs/wp-content/themes/lawcarta/header.php

@@ -79,6 +79,7 @@ require_once 'inc/walker-nav-menu.php';
             </a>
         </div>
         <div class="mobile-nav" style="display: none;">
+            <div class="mm-bg">
                 <?php
                 if (has_nav_menu('top')) {
                     wp_nav_menu([
@@ -130,6 +131,7 @@ require_once 'inc/walker-nav-menu.php';
 <!--                <a href="#" class="button bordered">LOGIN</a>-->
 <!--                <a href="#" class="button bordered">REGISTER</a>-->
 <!--            </div>-->
+            </div>
         </div>
         <iframe src="<?= get_lawcarta_url()?>/menu" style="display: none;"></iframe>
 
@@ -176,7 +178,7 @@ require_once 'inc/walker-nav-menu.php';
             jQuery('.btn-toggle-menu').on('click', function (e) {
                 e.preventDefault();
                 jQuery(this).toggleClass('on');
-                jQuery('.mobile-nav').slideToggle(300);
+                jQuery('.mobile-nav').toggleClass('show');
             });
         </script>
     </header>