1 files changed, 33 insertions, 5 deletions

diff --git a/app/assets/stylesheets/framework/header.scss b/app/assets/stylesheets/framework/header.scss
index f5ed85e8845..b9fbcfb642c 100644
--- a/app/assets/stylesheets/framework/header.scss
+++ b/app/assets/stylesheets/framework/header.scss
@@ -123,7 +123,9 @@ $search-input-field-x-min-width: 200px;
     padding: 0;
 
     @include media-breakpoint-down(xs) {
-      flex: 1 1 auto;
+      .legacy-top-bar & {
+        flex: 1 1 auto;
+      }
     }
 
     .nav {
@@ -193,8 +195,10 @@ $search-input-field-x-min-width: 200px;
         padding: 6px 8px;
         height: 32px;
 
-        @include media-breakpoint-down(xs) {
-          padding: 0;
+        .legacy-top-bar & {
+          @include media-breakpoint-down(xs) {
+            padding: 0;
+          }
         }
 
         &.header-user-dropdown-toggle {
@@ -322,7 +326,7 @@ $search-input-field-x-min-width: 200px;
   left: var(--application-bar-left);
   position: fixed;
   right: var(--application-bar-right);
-  top: $calc-system-headers-height;
+  top: $calc-application-bars-height;
   width: auto;
   z-index: $top-bar-z-index;
 
@@ -427,7 +431,7 @@ $search-input-field-x-min-width: 200px;
 }
 
 @include media-breakpoint-down(xs) {
-  .navbar-gitlab .container-fluid {
+  .navbar-gitlab.legacy-top-bar .container-fluid {
     font-size: 18px;
 
     .navbar-nav {
@@ -622,3 +626,27 @@ $search-input-field-x-min-width: 200px;
     }
   }
 }
+
+header.navbar-gitlab.super-sidebar-logged-out {
+  background-color: $brand-charcoal !important;
+
+  li.nav-item > a {
+    @include gl-text-white;
+    @include gl-font-weight-normal;
+
+    &:hover,
+    &:focus {
+      background-color: $brand-gray-04;
+      text-decoration: none;
+    }
+
+    &:focus,
+    &:active {
+      box-shadow: inset 0 0 0 $gl-border-size-1 $white;
+    }
+
+    &:active {
+      background-color: $brand-gray-03;
+    }
+  }
+}