Mobile menu bg color, blur and lock scroll

dav1312 · web-flow · commit fc70db83067b · 2024-05-08T13:27:24.000+02:00
diff --git a/assets/scss/components/_main-menu-mobile.scss b/assets/scss/components/_main-menu-mobile.scss
@@ -1,6 +1,5 @@
 .main-menu-mobile {
   position: fixed;
-  background: $primary;
   top: 0;
   left: 0;
   width: 100%;
@@ -14,10 +13,12 @@
   align-items: center;
   flex-direction: column;
   &.open {
-    opacity: 0.9;
+    opacity: 1;
     visibility: visible;
     height: 100%;
     z-index: 20;
+    background: rgba($body-bg, 0.7);
+    backdrop-filter: blur(10px);
     li {
       animation: fadeInRight 0.5s ease forwards;
       animation-delay: 0.35s;
@@ -37,6 +38,9 @@
         animation-delay: 0.6s;
       }
     }
+    @include media-breakpoint-up(md) {
+      display: none;
+    }
   }
   ul {
     font-size: 30px;
@@ -74,3 +78,6 @@
     left: 0;
   }
 }
+.lock-scroll {
+  overflow: hidden;
+}
