1 files changed, 45 insertions, 21 deletions

diff --git a/app/assets/stylesheets/framework/header.scss b/app/assets/stylesheets/framework/header.scss
index afe4a276ae5..5a34132112a 100644
--- a/app/assets/stylesheets/framework/header.scss
+++ b/app/assets/stylesheets/framework/header.scss
@@ -15,7 +15,8 @@ header {
       margin: 8px 0;
       text-align: center;
 
-      .tanuki-logo, img {
+      .tanuki-logo,
+      img {
         height: 36px;
       }
     }
@@ -48,15 +49,25 @@ header {
         font-size: 18px;
         padding: 0;
         margin: ($header-height - 28) / 2 0;
-        margin-left: 10px;
+        margin-left: 8px;
         height: 28px;
         min-width: 28px;
         line-height: 28px;
         text-align: center;
 
-        &:hover, &:focus, &:active {
+        &.header-user-dropdown-toggle {
+          margin-left: 14px;
+        }
+
+        &:hover,
+        &:focus,
+        &:active {
           background-color: $background-color;
         }
+
+        .fa-caret-down {
+          font-size: 15px;
+        }
       }
 
       .navbar-toggle {
@@ -77,14 +88,10 @@ header {
       }
     }
 
-    &.header-collapsed {
-      padding: 0 16px;
-    }
-
     .side-nav-toggle {
       position: absolute;
       left: -10px;
-      margin: 6px 0;
+      margin: 7px 0;
       font-size: 18px;
       padding: 6px 10px;
       border: none;
@@ -93,10 +100,6 @@ header {
       &:hover {
         background-color: $btn-gray-hover;
       }
-
-      &:focus {
-        outline: none;
-      }
     }
   }
 
@@ -116,12 +119,17 @@ header {
     .header-logo {
       position: absolute;
       left: 50%;
-      margin-left: -18px;
       top: 7px;
       transition-duration: .3s;
       z-index: 999;
 
-      svg, img {
+      #logo {
+        position: relative;
+        left: -50%;
+      }
+
+      svg,
+      img {
         height: 36px;
       }
 
@@ -130,12 +138,18 @@ header {
       }
 
       @media (max-width: $screen-xs-max) {
-        right: 25px;
+        right: 20px;
         left: auto;
+
+        #logo {
+          left: auto;
+        }
       }
     }
 
     .title {
+      position: relative;
+      padding-right: 20px;
       margin: 0;
       font-size: 19px;
       max-width: 400px;
@@ -148,23 +162,32 @@ header {
       vertical-align: top;
       white-space: nowrap;
 
-      @media (max-width: $screen-sm-max) {
+      @media (min-width: $screen-sm-min) and (max-width: $screen-sm-max) {
+        max-width: 300px;
+      }
+
+      @media (max-width: $screen-xs-max) {
         max-width: 190px;
       }
 
       a {
         color: $gl-text-color;
+
         &:hover {
           text-decoration: underline;
         }
       }
 
       .dropdown-toggle-caret {
-        position: relative;
-        top: -2px;
+        color: $gl-text-color;
+        border: transparent;
+        background: transparent;
+        position: absolute;
+        right: 3px;
         width: 12px;
-        line-height: 12px;
-        margin-left: 5px;
+        line-height: 19px;
+        margin-top: (($header-height - 19) / 2);
+        padding: 0;
         font-size: 10px;
         text-align: center;
         cursor: pointer;
@@ -203,7 +226,8 @@ header {
       margin: 0;
       float: none !important;
 
-      .visible-xs, .visable-sm {
+      .visible-xs,
+      .visible-sm {
         display: table-cell !important;
       }
     }