added burger menu, switched media query logic

css/main.css

@@ -9,14 +9,12 @@ body {
 .container {
   height:100vh;
   display: grid;
-  grid-template-rows: 80px 85px 300px 1fr;
-  grid-template-columns: 100%;
+  grid-template-rows: 80px 1fr;
+  grid-template-columns: 50% 50%;
   grid-row-gap: 0px;
   grid-template-areas:
-    "logo"
-    "navigation"
-    "map"
-    "content"
+    "logo navigation"
+    "map content"
   ;
 }
 
@@ -28,37 +26,16 @@ navigation {
 
 content {
   background: #142736;
-}
-
-@media screen and (min-width: 44.001em) {
-  .container {
-    height:100vh;
-    display: grid;
-    grid-template-rows: 80px 1fr;
-    grid-template-columns: 50% 50%;
-    grid-row-gap: 0px;
-    grid-template-areas:
-      "logo navigation"
-      "map content"
-    ;
-  }
-
-  navigation {
-    display: block;
-  }
-
-  content {
-    overflow-y: auto;
-  }
-
+  overflow-y: scroll;
 }
 
 logo {
   background: white;
+  padding: 10px;
 }
 
-.logo {
-  padding: 10px;
+.burger_menu {
+  display: none;
 }
 
 navigation ul li {
@@ -98,3 +75,33 @@ h2 {
   padding-top: 5px;
   padding-bottom: 5px;
 }
+
+@media screen and (max-width: 44.001em) {
+
+  .container {
+    height:100vh;
+    display: grid;
+    grid-template-rows: 80px 85px 300px 1fr;
+    grid-template-columns: 100%;
+    grid-row-gap: 0px;
+    grid-template-areas:
+      "logo"
+      "navigation"
+      "map"
+      "content"
+    ;
+  }
+
+  content {
+    overflow-y: inherit;
+  }
+
+  .burger_menu {
+    display: block;
+    float:right;
+    width: 30px;
+    height: 25px;
+    margin: 18px;
+  }
+
+}

index.html

@@ -14,6 +14,7 @@
     <div class="container">
       <logo>
         <img class="logo" src=images/logo.png>
+        <img class="burger_menu" id="burger_menu" src=images/menu.png>
       </logo>
       <navigation>
         <ul>