improve main menu interactions

web/src/components/layout/header.module.scss

@@ -24,17 +24,17 @@
   gap: var(--spacing-sitepadding);
   align-items: flex-start;
 
-  .mainMenu {
-    list-style: none;
-    display: flex;
-    gap: var(--spacing-sitepadding);
-  }
-
   a {
     font-weight: 500;
   }
 }
 
+.mainMenu {
+  list-style: none;
+  display: flex;
+  gap: var(--spacing-sitepadding);
+}
+
 .toggleMenu {
   position: relative;
   z-index: 1001;
@@ -114,7 +114,24 @@
     right: 0;
   }
 
+  .toggleMenu {
+    position: fixed;
+    right: var(--spacing-sitepadding);
+  }
+
   .menuIcon {
     color: var(--color-betongGray);
   }
+}
+
+@media (max-width: 1200px) {
+  .mainMenu {
+    display: none;
+  }
+}
+
+@media (max-width: 800px) {
+  .fullMenu {
+    width: 100%;
+  }
 }