new media query for mobile nav (#1123)

Author: sjmiller7

sass/main.scss

@@ -1197,11 +1197,38 @@ footer {
     }
 }
 
-@media screen and (max-width: 900px) {
+@media screen and (max-width: 955px) {
 
     // Redefine only for mobile
     $nav-height: 60px;
 
+    nav {
+        height: $nav-height;
+        position: absolute;
+
+        #logo img {
+            width: $nav-height;
+            height: $nav-height;
+        }
+
+        #mlh-badge {
+            width: 90px;
+        }
+
+        .link {
+            display: none;
+        }
+
+        #login {
+            padding: 8px 30px;
+            margin: 0;
+            font-size: 0.8em;
+        }
+    }
+}
+
+@media screen and (max-width: 900px) {
+
     h1, section > p {
         text-align: center;
     }
@@ -1226,23 +1253,6 @@ footer {
         padding: 20px;
     }
 
-    nav {
-        height: $nav-height;
-        position: absolute;
-
-        #logo img {
-            width: $nav-height;
-            height: $nav-height;
-        }
-
-        #mlh-badge {
-            width: 90px;
-        }
-
-        .link {
-            display: none;
-        }
-    }
 
     #hero {
         #hero-content {
@@ -1440,12 +1450,6 @@ footer {
         padding: 20px;
     }
 
-    nav #login {
-        padding: 8px 30px;
-        margin: 0;
-        font-size: 0.8em;
-    }
-
     #hero {
 
         p {