Fix menu on mobile

1 files changed, 12 insertions, 5 deletions

diff --git a/client/src/app/menu/menu.component.scss b/client/src/app/menu/menu.component.scss
index 4ef330b2f..c725580d1 100644
--- a/client/src/app/menu/menu.component.scss
+++ b/client/src/app/menu/menu.component.scss
@@ -20,16 +20,12 @@ menu {
   color: $menu-color;
   display: flex;
   flex-direction: column;
+  width: 100%;
 
   &:focus, &:hover {
     overflow-y: auto;
   }
 
-  .top-menu {
-    flex-grow: 1;
-    width: $menu-width;
-  }
-
   .logged-in-block {
     height: 100px;
     background-color: rgba(255, 255, 255, 0.15);
@@ -230,3 +226,14 @@ menu {
     }
   }
 }
+
+@media screen and (max-width: 400px) {
+  .menu-wrapper {
+    width: 100% !important;
+    z-index: 10000;
+  }
+
+  .top-menu {
+    width: 100%;
+  }
+}