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,4 +1,26 @@
-.dropdown-menu {
+#navigation {
+  @media (min-width: @screen-xs-max) {
+    .flexbox();
+    justify-content: center;
+    float: none;
+  }
+  & a {
+    .transition(~"ease-in-out .3s color");
+  }
+  & > li {
+    @media (min-width: @screen-md-min) {
+      margin-right: 23px;
+    }
+    & > a {
+      @media (min-width: @screen-md-min) {
+        padding: 15px 10px;
+      }
+      @media (max-width: @screen-xs-max) {
+        padding: 15px 15px;
+      }
+    }
+  }
+  .dropdown-menu {
     @media (min-width: @screen-sm) {
       right: auto;
       left: 50%;
@@ -17,50 +39,37 @@
     .open & {
       opacity: 1;
     }
-}
+    a {
-
+      padding-left: 20px;
-#navigation {
-  @media (min-width: @screen-xs-max) {
-    .flexbox();
-    justify-content: center;
-    float: none;
-  }
-  & a {
-    .transition(~"ease-in-out .3s color");
-  }
-  & > li {
-    @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) {
-        padding: 15px 3px;
-      }
     }
   }
 }
 
+
 .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) {
+  .home-button {
     margin-right: 15px !important;
+  }
 }
 
 #navbar {