sidebar styles

website/www/source/layouts/_mobile_nav.erb

@@ -7,7 +7,7 @@
     <div class="mobile-nav-header header-cover">
         <!-- mobile-nav brand image -->
         <div class="mobile-nav-image">
-            <a class="mobile-nav-logo" href="/">Vagrant</a>
+            <img src="<%= image_path('logo-header@2x.png') %>" width="169px" height="46px">
         </div>
     </div>
 

website/www/source/stylesheets/_mobile-nav.less

@@ -4,20 +4,46 @@
 // - Make sidebar edits here
 // --------------------------------------------------
 
-.sidebar {
-  .sidebar-nav {
+#mobile-nav {
+  .mobile-nav-nav {
+    width: 100%;
+    text-align: center;
     // Links
     //----------------
-    li {
-      a {
-        color: $purple;
+    //
+    li{
+      float: none;
 
-        svg{
-          path{
-            fill: $purple;
+      &.pill{
+        background-color: #48b4fb;
+        border-radius: 25px;
+        padding: 5px 2px;
+        line-height: 26px;
+        margin: 10px 10px 10px 10px;
+
+        &:focus,
+        &:hover{
+          a{
+            background-color: transparent;
           }
         }
+
+        a{
+          color: @white;
+          line-height: 24px;
+        }
+      }
+
+      a{
+        .anti-alias();
+        font-size: 13px;
       }
     }
   }
 }
+
+@media (max-width: 768px) {
+  #header {
+      position: relative;
+    }
+}

website/www/source/stylesheets/vagrantup.less

@@ -19,6 +19,7 @@ v a g r a n t u p
 @import '_components';
 @import '_modules';
 @import '_sidebar';
+@import '_mobile-nav';
 @import '_pages';
 @import '_footer';
 @import '_media-queries';