Merge branch '27934-left-align-logo' into 'master'

Left align logo; increase max width of title

Closes #27934

See merge request !9588

1 files changed, 11 insertions, 22 deletions

diff --git a/app/assets/stylesheets/framework/header.scss b/app/assets/stylesheets/framework/header.scss
index 3945a789c82..685a4847731 100644
--- a/app/assets/stylesheets/framework/header.scss
+++ b/app/assets/stylesheets/framework/header.scss
@@ -148,16 +148,11 @@ header {
     }
 
     .header-logo {
-      position: absolute;
-      left: 50%;
+      display: inline-block;
+      margin: 0 8px 0 3px;
+      position: relative;
       top: 7px;
       transition-duration: .3s;
-      z-index: 999;
-
-      #logo {
-        position: relative;
-        left: -50%;
-      }
 
       svg,
       img {
@@ -167,15 +162,6 @@ header {
       &:hover {
         cursor: pointer;
       }
-
-      @media (max-width: $screen-xs-max) {
-        right: 20px;
-        left: auto;
-
-        #logo {
-          left: auto;
-        }
-      }
     }
 
     .title {
@@ -183,7 +169,6 @@ header {
       padding-right: 20px;
       margin: 0;
       font-size: 18px;
-      max-width: 385px;
       display: inline-block;
       line-height: $header-height;
       font-weight: normal;
@@ -193,14 +178,18 @@ header {
       vertical-align: top;
       white-space: nowrap;
 
-      @media (min-width: $screen-sm-min) and (max-width: $screen-sm-max) {
-        max-width: 300px;
-      }
-
       @media (max-width: $screen-xs-max) {
         max-width: 190px;
       }
 
+      @media (min-width: $screen-sm-min) and (max-width: $screen-md-max) {
+        max-width: 428px;
+      }
+
+      @media (min-width: $screen-lg-min) {
+        max-width: 685px;
+      }
+
       a {
         color: $gl-text-color;