Fix mobile menu

rss/css/theme.css

@@ -17,11 +17,14 @@ header {
   position: relative;
   z-index: 999;
   font-family: "Nunito", sans-serif;
+  background-color: #fff;
 }
 header .logo {
   width: 100px;
   display: flex;
+  z-index: 999;
   cursor: pointer;
+  background-color: #fff;
 }
 header .logo img {
   width: 100%;
@@ -30,6 +33,29 @@ header .logo img {
 header nav {
   display: flex;
   position: relative;
+  z-index: -1;
+}
+@media (max-width: 768px) {
+  header nav {
+    top: -200%;
+    display: flex;
+    flex-direction: column;
+    position: absolute;
+  }
+  header nav.open {
+    top: 99%;
+    left: 0;
+    width: 100%;
+    transition: all 0.3s;
+    background-color: #fff;
+    height: auto;
+    z-index: -1;
+    box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.12);
+  }
+  header nav.open a {
+    padding: 7px 10px;
+    font-size: 16px;
+  }
 }
 header nav .menu-item {
   color: #000000;
@@ -62,6 +88,16 @@ header nav .menu-item:hover {
 header nav .menu-item:hover::after {
   transform: scaleX(1);
 }
+header .mobile-toggler {
+  background-color: #fff;
+  border: none;
+  font-size: 18px;
+}
+@media (min-width: 769px) {
+  header .mobile-toggler {
+    display: none;
+  }
+}
 
 .home-banner {
   height: calc(100vh - 55px);
@@ -171,6 +207,7 @@ header nav .menu-item:hover::after {
     height: 100%;
     z-index: 1;
     opacity: 0.1;
+    width: 100%;
   }
 }
 .home-banner .home-banner-inner .image-wrapper img {