Adjust nave spacing and keep nav menu (blog, product, about) visible on small displays. Hide "learn more" button instead.

Author: willkoehler

_assets/stylesheets/_nav.scss

@@ -11,7 +11,6 @@
 
     .brand img {
         height:40px;
-        margin-right:10px;
         margin-top:-2px;
     }
 
@@ -27,7 +26,7 @@
 
         a {
             border:0;
-            margin:0 0.9em;
+            margin-right: 1.8em;
             display:inline-block;
 
             &:hover {

_assets/stylesheets/_responsive.scss

@@ -1,4 +1,4 @@
-@media (max-width: 1000px) {
+@media (max-width: 900px) {
 
     // hide tagline
     .tagline span {
@@ -82,17 +82,17 @@
         }
     }
 
-    // hide nav (blog, product, about links)
+    // narrow nav spacing (blog, product, about links)
     .site-nav {
+        nav {
+            padding-left: 15px;
+            padding-right: 15px;
+        }
+        
         #navigation {
             a {
-                display:none;
+                margin-right: 1em;
             }
-            
-            // don't hide brand logo
-            .brand {
-                display:inline-block;
-            } 
         }
     }
 
@@ -125,6 +125,14 @@
     }
 }
 
+@media (max-width: 500px) {
+    // hide "learn more" button
+    nav.tagline {
+        display: none;
+    }
+}
+
+
 @media (max-width: 400px) {
 
     article {
@@ -153,18 +161,6 @@
         }
     }
 
-    // move brand logo to the left
-    .site-nav {
-        nav {
-          padding-left: 10px;
-        }
-    }
-    
-    // move product link to the right
-    nav.tagline {
-      padding-right: 20px;
-    }
-    
     // reduce margin of post blocks
     .index {
         margin:0 5%;