diff --git a/app/assets/stylesheets/foundation_and_overrides.scss b/app/assets/stylesheets/foundation_and_overrides.scss
index a765f1761..95dd7511c 100644
--- a/app/assets/stylesheets/foundation_and_overrides.scss
+++ b/app/assets/stylesheets/foundation_and_overrides.scss
@@ -45,7 +45,6 @@
 @include foundation-thumbnail;
 @include foundation-title-bar;
 @include foundation-tooltip;
-@include foundation-top-bar;
 @include foundation-visibility-classes;
 @include foundation-float-classes;
 @include motion-ui-transitions;
diff --git a/app/assets/stylesheets/layout.scss b/app/assets/stylesheets/layout.scss
index 255485668..2b040e4f5 100644
--- a/app/assets/stylesheets/layout.scss
+++ b/app/assets/stylesheets/layout.scss
@@ -550,6 +550,8 @@ body > header,
 
   .top-bar {
     @include background-with-text-contrast($main-header, [main-header, brand]);
+    padding-bottom: $topbar-padding;
+    padding-top: $topbar-padding;
 
     h1 {
       line-height: $line-height;
@@ -566,22 +568,20 @@ body > header,
 }
 
 .top-bar {
-  background-color: inherit;
-  padding-left: 0;
-  padding-right: 0;
+  align-items: center;
+  display: flex;
+
+  @include breakpoint(small only) {
+    flex-wrap: wrap;
+    justify-content: space-between;
+  }
 
   @include breakpoint(medium) {
-    justify-content: flex-start;
-
     h1 {
       flex-grow: 1;
     }
   }
 
-  ul {
-    background: none;
-  }
-
   h1 {
     margin-bottom: 0;
 
diff --git a/app/assets/stylesheets/layout/admin_header.scss b/app/assets/stylesheets/layout/admin_header.scss
index 2e58fe3f9..46271c8f4 100644
--- a/app/assets/stylesheets/layout/admin_header.scss
+++ b/app/assets/stylesheets/layout/admin_header.scss
@@ -16,7 +16,6 @@
 
   .top-bar {
     height: auto;
-    padding-bottom: 0;
     padding-top: $line-height / 2;
 
     @include breakpoint(small only) {