Style the navbar.

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

@@ -378,7 +378,7 @@
 .navbar-default {
   background-color: @navbar-default-bg;
   border-color: @navbar-default-border;
-  padding: 1rem 2rem;
+  padding: @navbar-default-padding;
 
   .navbar-brand {
     position: absolute;
@@ -400,11 +400,11 @@
     > li > a {
       color: @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;
-      padding: 10px 10px 11px;
+      border-radius: @navbar-btn-border-radius;
+      font-size: @navbar-btn-font-size;
+      font-weight: @navbar-btn-font-weight;
+      line-height: @navbar-btn-line-height;
+      padding: @navbar-btn-padding;
 
       &:hover,
       &:focus {
@@ -432,15 +432,15 @@
 
     > li.subdued > a {
       border: 0;
-      color: @gray;
-      padding: 12px 12px 13px;
+      color: @navbar-subdued-color;
+      padding: @navbar-subdued-padding;
       margin-left: 0;
       &:hover {
-        color: @gray-dark;
-        background-color: @gray-lightest;
+        color: @navbar-subdued-hover-color;
+        background-color: @navbar-subdued-hover-bg;
       }
       &:focus {
-          color: @gray;
+          color: @navbar-subdued-color;
           background-color: transparent;
       }
     }
@@ -485,8 +485,8 @@
       &,
       &:hover,
       &:focus {
-        color: @gray-dark;
-        background-color: @gray-lightest;
+        color: @navbar-subdued-hover-color;
+        background-color: @navbar-subdued-hover-bg;
       }
     }
 

services/web/public/stylesheets/core/_common-variables.less

@@ -794,6 +794,19 @@
 // Custom
 @content-alt-bg-color: lighten(@gray-lightest, 2.5%);
 
+@navbar-default-padding: 1rem 2rem;
+
+@navbar-btn-font-size: @font-size-base * 0.8;
+@navbar-btn-border-radius: @border-radius-base;
+@navbar-btn-font-weight: 700;
+@navbar-btn-padding: 10px 10px 11px;
+@navbar-btn-line-height: 1;
+
+@navbar-subdued-padding: 12px 12px 13px;
+@navbar-subdued-color: @gray;
+@navbar-subdued-hover-bg: @gray-lightest;
+@navbar-subdued-hover-color: @gray-dark;
+
 @btn-border-radius-large: @border-radius-large;
 @btn-border-radius-base: @border-radius-base;
 @btn-border-radius-small: @border-radius-small;

services/web/public/stylesheets/core/ol-variables.less

@@ -21,7 +21,7 @@
 @navbar-default-color   : #FFF;
 @navbar-default-bg      : @ol-blue-gray-6;
 @navbar-default-border  : transparent;
-@navbar-brand-image-url : url(/img/ol-brand/logo-horizontal.png);
+@navbar-brand-image-url : url(/img/ol-brand/overleaf-white.svg);
 
 // Backgrounds
 @body-bg                : @ol-blue-gray-1;
@@ -56,6 +56,23 @@
 @btn-info-bg             : @ol-blue;
 @btn-info-border         : transparent;
 
+// Navbar
+@navbar-default-padding           : (@grid-gutter-width / 2) 0;
+@navbar-default-link-color        : #FFF;
+@navbar-default-link-hover-bg     : @ol-green;
+@navbar-default-link-active-bg    : @ol-green;
+@navbar-default-link-hover-color  : @ol-green;
+@navbar-btn-font-size             : @font-size-base;
+@navbar-btn-border-radius         : @btn-border-radius-base;
+@navbar-btn-font-weight           : 400;
+@navbar-btn-padding               : (@padding-base-vertical - 1) @padding-base-horizontal @padding-base-vertical;
+@navbar-btn-line-height           : @line-height-base;
+
+@navbar-subdued-color             : #FFF;
+@navbar-subdued-padding           : (@padding-base-vertical + 1) (@padding-base-horizontal + 1) (@padding-base-vertical + 2);
+@navbar-subdued-hover-bg          : #FFF;
+@navbar-subdued-hover-color       : @ol-green;
+
 // TODO Warning color-orange?
 @btn-warning-color       : #FFF;
 @btn-warning-bg          : @ol-red;
@@ -76,7 +93,6 @@
 @sidebar-hover-bg               : @ol-blue-gray-4;
 @sidebar-hover-text-decoration  : none;
 
-
 // Project table
 @structured-list-link-color     : @ol-blue;
 @structured-header-border-color : shade(@ol-blue-gray-1, 5%);
@@ -108,7 +124,6 @@
 @brand-warning:         @orange;
 @brand-danger:          #E03A06;
 
-
 @editor-loading-logo-padding-top: 115.44%;
 @editor-loading-logo-background-url: url(/img/ol-brand/overleaf-o-grey.svg);
 @editor-loading-logo-foreground-url: url(/img/ol-brand/overleaf-o.svg);