Sort out responsive navbar

services/web/app/views/layout.jade

@@ -38,7 +38,7 @@ html(itemscope, itemtype='http://schema.org/Product')
 	- if (typeof(bodyClasses) == "undefined")
 		- var bodyClasses = []
 	body(class=bodyClasses)
-		include menubar
+		include layout/navbar
 		block content
 		- if (typeof(lookingForScribtex) != "undefined" && lookingForScribtex)
 			.modal.hide#scribtexModal

services/web/app/views/menubar.jade → services/web/app/views/layout/navbar.jade

@@ -3,7 +3,7 @@ nav.navbar.navbar-default
 		.navbar-header
 			button.navbar-toggle(data-toggle="collapse",data-target="#navbar-collapse")
 				i.fa.fa-bars
-			a(href='/').navbar-brand ShareLaTeX
+			a(href='/').navbar-brand
 
 		.navbar-collapse.collapse#navbar-collapse
 			ul.nav.navbar-nav.navbar-right

services/web/public/stylesheets/components/navbar.less

@@ -52,7 +52,7 @@
   overflow-x: visible;
   padding-right: @navbar-padding-horizontal;
   padding-left:  @navbar-padding-horizontal;
-  border-top: 1px solid transparent;
+  //border-top: 1px solid transparent;
   box-shadow: inset 0 1px 0 rgba(255,255,255,.1);
   &:extend(.clearfix all);
   -webkit-overflow-scrolling: touch;
@@ -180,7 +180,7 @@
   position: relative;
   float: right;
   margin-right: @navbar-padding-horizontal;
-  .navbar-vertical-align(34px);
+  //.navbar-vertical-align(34px);
   background-color: transparent;
   background-image: none; // Reset unusual Firefox-on-Android default style; see https://github.com/necolas/normalize.css/issues/214
   border: 2px solid @navbar-default-link-color;
@@ -370,12 +370,12 @@
   padding: 1rem 2rem;
 
   .navbar-brand {
-    color: @navbar-default-brand-color;
-    &:hover,
-    &:focus {
-      color: @navbar-default-brand-hover-color;
-      background-color: @navbar-default-brand-hover-bg;
-    }
+    background-image: url('/img/logo.png');
+    background-repeat: no-repeat;
+    height: 16px;
+    margin-top: 10px;
+    padding: 0;
+    width: 128px;
   }
 
   .navbar-text {
@@ -385,12 +385,11 @@
   .navbar-nav {
     > li > a {
       color: @navbar-default-link-color;
-      border: 2px solid @navbar-default-link-color;
+      border: 2px solid transparent;
       border-radius: @border-radius-base;
       font-size: @font-size-base * .8;
       font-weight: 700;
       line-height: 1;
-      margin-left: 1rem;
       padding: 10px 10px 11px;
 
       &:hover,
@@ -416,6 +415,13 @@
         background-color: @navbar-default-link-disabled-bg;
       }
     }
+
+    @media (min-width: @grid-float-breakpoint) {
+      > li > a {
+        border-color: @navbar-default-link-color;
+        margin-left: 1rem;
+      }
+    }
   }
 
   .navbar-toggle {
@@ -450,10 +456,15 @@
       // Dropdowns get custom display when collapsed
       .open .dropdown-menu {
         > li > a {
+          border-radius: @border-radius-base;
+          font-size: @font-size-base * .8;
+          font-weight: 700;
+          line-height: 1;
+          padding: 12px 12px 13px 30px;
           color: @navbar-default-link-color;
           &:hover,
           &:focus {
-            color: @navbar-default-link-hover-color;
+            color: #fff;
             background-color: @navbar-default-link-hover-bg;
           }
         }