mobile edits

--HG--
branch : templates-ky-new-nav

sass/layout/_header.scss

@@ -57,16 +57,20 @@ div.header-wrapper {
         }
       }
 
-      @media screen and (max-width: 920px) {
-        border-bottom: 1px solid darken($mit-red, 5%);
+
+      @media screen and (max-width: 900px) {
         display: block;
         float: none;
 
         h1 {
-          float: right;
+          float: left;
           border: 0;
-          margin-right: 0;
-          padding-right: 0;
+          // margin-right: 0;
+          // padding-right: 0;
+
+          // &:after {
+          //   display: none;
+          // }
         }
 
         h2 {
@@ -79,26 +83,25 @@ div.header-wrapper {
     }
 
     nav {
-      float: left;
-      display: block;
-      margin: 0;
-      padding: 0;
-      text-shadow: 0 -1px 0 darken($mit-red, 10%);
       -webkit-font-smoothing: antialiased;
-      background: #501016;
-      margin-top: 5px;
-          border-bottom: 1px solid darken(#501016, 10%);
       @include border-radius(3px 3px 0 0);
       @include box-shadow(inset 0 0 0 1px darken(#501016, 5%), inset 0 2px 0 lighten(#501016, 5%));
+      background: #501016;
+      border-bottom: 1px solid darken(#501016, 10%);
+      display: block;
+      float: left;
+      margin: 5px 0 0;
+      padding: 0;
+      text-shadow: 0 -1px 0 darken($mit-red, 10%);
 
       ul {
         @extend .clearfix;
         margin: 0;
 
         li {
-          display: inline-block;
-          margin-bottom: 0;
           line-height: lh();
+          margin-bottom: 0;
+          float: left;
 
           a {
             color: #fff;
@@ -107,6 +110,10 @@ div.header-wrapper {
             display: block;
             font-weight: bold;
 
+            @media screen and (max-width: 1020px) {
+              padding: 10px lh(.7) 8px;
+            }
+
             &:hover {
               color: rgba(#fff, .7);
               background-color: none;
@@ -116,6 +123,20 @@ div.header-wrapper {
         }
       }
 
+      @media screen and (max-width: 900px) {
+        width: 100%;
+        float: none;
+
+        ul {
+          li {
+            padding: auto;
+            display: table-cell;
+            width: 16.6666666667%;
+            text-align: center;
+          }
+        }
+      }
+
       .active {
         background: #F4F4F4;
         color: #333;