moved burger menu in seÃperate css file

scss/_menuMobile.scss

@@ -0,0 +1,68 @@
+#burgerMenu {
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  display: none;
+  cursor: pointer;
+
+  .bar1, .bar2, .bar3 {
+    width: 35px;
+    height: 5px;
+    background-color: $text-color;
+    margin: 6px 0;
+    transition: 0.4s;
+  }
+  &.change .bar1 {
+    -webkit-transform: rotate(-45deg) translate(-9px, 6px);
+    transform: rotate(-45deg) translate(-9px, 6px);
+  }
+
+  &.change .bar2 {opacity: 0;}
+
+  &.change .bar3 {
+    -webkit-transform: rotate(45deg) translate(-8px, -8px);
+    transform: rotate(45deg) translate(-8px, -8px);
+  }
+}
+
+@media only screen and (max-width: $mobile-max-width) {
+  #burgerMenu{
+    display: inline-block;
+  }
+
+  .visible{
+    display: inline-grid !important;
+  }
+
+  #mainMenuContainer{
+    display: none;
+
+    text-align: left;
+    background-color: $back-color-3;
+    width: 100%;
+
+    a {
+      text-align: left;
+      border-bottom: #111721 solid 2px;
+      width: 100%;
+    }
+
+    .dropdown-content{
+      display: block;
+      position: relative;
+      left: 0;
+      transform: none;
+      width: 100%;
+      a{
+        padding-left: 40px;
+      }
+    }
+  }
+  #mainMenu{
+    display: block;
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+  }
+}

scss/_mobile.scss

@@ -1,32 +1,4 @@
-#burgerMenu {
+@media only screen and (max-width: $mobile-max-width) {
-  position: absolute;
-  top: 10px;
-  right: 10px;
-  display: none;
-  cursor: pointer;
-
-  .bar1, .bar2, .bar3 {
-    width: 35px;
-    height: 5px;
-    background-color: $text-color;
-    margin: 6px 0;
-    transition: 0.4s;
-  }
-  &.change .bar1 {
-    -webkit-transform: rotate(-45deg) translate(-9px, 6px);
-    transform: rotate(-45deg) translate(-9px, 6px);
-  }
-
-  &.change .bar2 {opacity: 0;}
-
-  &.change .bar3 {
-    -webkit-transform: rotate(45deg) translate(-8px, -8px);
-    transform: rotate(45deg) translate(-8px, -8px);
-  }
-}
-
-
-@media only screen and (max-width: 600px) {
   #homeImage{
     float: none;
   }
@@ -58,44 +30,4 @@
   article{
     width: 95%;
   }
-
-  #burgerMenu{
-    display: inline-block;
-  }
-
-  .visible{
-    display: inline-grid !important;
-  }
-
-  #mainMenuContainer{
-    display: none;
-
-    text-align: left;
-    background-color: $back-color-3;
-    width: 100%;
-
-    a {
-      text-align: left;
-      border-bottom: #111721 solid 2px;
-      width: 100%;
-    }
-
-    .dropdown-content{
-      display: block;
-      position: relative;
-      left: 0;
-      transform: none;
-      width: 100%;
-      a{
-        padding-left: 40px;
-      }
-    }
-  }
-  #mainMenu{
-    display: block;
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-  }
 }

scss/_var.scss

@@ -6,3 +6,5 @@ $content-footer-div-color: #03A8F4;
 
 $darker-color: 5%;
 $darker-color-2: 2%;
+
+$mobile-max-width: 600px;

scss/style.scss

@@ -12,3 +12,4 @@
 @import "footer";
 @import "content";
 @import "mobile";
+@import "menuMobile";