Make navbar look better on mobile

static/src/js/components/navbar/item.js

@@ -9,7 +9,7 @@ export default class Item extends React.Component {
       );
     }
     return (
-      <li><a href={this.props.href}>{icon} {this.props.children}</a></li>
+      <li><a href={this.props.href}>{icon}{this.props.children}</a></li>
     );
   }
 }

static/src/js/components/navbar/navbar.js

@@ -14,7 +14,7 @@ export default class NavBar extends React.Component {
               <Header />
               <div className="collapse navbar-collapse" id="navbar">
                 <ul className="nav navbar-nav home-button hidden-sm">
-                  <li className="active home"><a href=""><i className="icon ion-home"></i></a></li>
+                  <Item href="" icon="ion-home" />
                 </ul>
                 <ul className="nav navbar-nav" id="navigation">
                   <Dropdown title="Projects">

static/src/less/navbar.less

@@ -1,24 +1,3 @@
-.dropdown-menu {
-  @media (min-width: @screen-sm) {
-    right: auto;
-    left: 50%;
-    transform: translate(-50%, 0);
-    opacity: 0;
-    .transition(~"ease-in-out .2s all");
-  }
-  &.dropup {
-    bottom: 100%;
-    top: initial;
-  }
-  &.dropdown {
-    top: 100%;
-    bottom: initial;
-  }
-  .open & {
-    opacity: 1;
-  }
-}
-
 #navigation {
   @media (min-width: @screen-xs-max) {
     .flexbox();
@@ -32,35 +11,65 @@
     @media (min-width: @screen-md-min) {
       margin-right: 23px;
     }
-    @media (max-width: @screen-sm-max) {
-      margin-right: 10px;
-      margin-left: 11px;
-    }
     & > a {
       @media (min-width: @screen-md-min) {
         padding: 15px 10px;
       }
-      @media (max-width: @screen-sm-max) {
+      @media (max-width: @screen-xs-max) {
-        padding: 15px 3px;
+        padding: 15px 15px;
       }
     }
   }
+  .dropdown-menu {
+    @media (min-width: @screen-sm) {
+      right: auto;
+      left: 50%;
+      transform: translate(-50%, 0);
+      opacity: 0;
+      .transition(~"ease-in-out .2s all");
+    }
+    &.dropup {
+      bottom: 100%;
+      top: initial;
+    }
+    &.dropdown {
+      top: 100%;
+      bottom: initial;
+    }
+    .open & {
+      opacity: 1;
+    }
+    a {
+      padding-left: 20px;
+    }
+  }
 }
 
+
 .navbar {
   border-radius: 0;
+  .home-button a {
+    .transition(~"ease-in-out .3s color");
+  }
 }
 
 .navbar-nav.nav {
   margin: 0;
 }
 
+.navbar-toggle {
+  right: 10px;
+}
+
 #navbar-container {
   z-index: 0;
   width: 96%;
   left: 2%;
   margin: 0;
   z-index: 10000;
+  i + * {
+    margin-right: 5px;
+  }
   & .container-fluid{
     padding-right: 0;
     padding-left: 0;
@@ -73,7 +82,8 @@
     @media (max-width: @screen-sm) {
       position: fixed;
       top: 0;
-      width: 100%;
+      width: 95%;
+
     }
   }
 }
@@ -83,8 +93,10 @@
   height: 52px;
 }
 
-.home-button {
+@media (min-width: @screen-xs-max) {
-  margin-right: 15px !important;
+  .home-button {
+    margin-right: 15px !important;
+  }
 }
 
 #navbar {