diff --git a/app/assets/javascripts/discourse/app/widgets/header-contents.js b/app/assets/javascripts/discourse/app/widgets/header-contents.js
index 7a5ccf8df4e..f3f4225e8d1 100644
--- a/app/assets/javascripts/discourse/app/widgets/header-contents.js
+++ b/app/assets/javascripts/discourse/app/widgets/header-contents.js
@@ -2,16 +2,18 @@ import { createWidget } from "discourse/widgets/widget";
 import hbs from "discourse/widgets/hbs-compiler";
 
 createWidget("header-contents", {
-  tagName: "div.contents.clearfix",
+  tagName: "div.contents",
   template: hbs`
-    {{#if this.site.desktopView}}
-      {{#if this.siteSettings.enable_experimental_sidebar_hamburger}}
-        {{#if attrs.sidebarEnabled}}
-          {{sidebar-toggle attrs=attrs}}
+    <div class="header-logo-wrapper">
+      {{#if this.site.desktopView}}
+        {{#if this.siteSettings.enable_experimental_sidebar_hamburger}}
+          {{#if attrs.sidebarEnabled}}
+            {{sidebar-toggle attrs=attrs}}
+          {{/if}}
         {{/if}}
       {{/if}}
-    {{/if}}
-    {{home-logo attrs=attrs}}
+      {{home-logo attrs=attrs}}
+    </div>
     {{#if attrs.topic}}
       {{header-topic-info attrs=attrs}}
     {{/if}}
diff --git a/app/assets/stylesheets/common/base/header.scss b/app/assets/stylesheets/common/base/header.scss
index 75afb83d929..4614ca9d2fc 100644
--- a/app/assets/stylesheets/common/base/header.scss
+++ b/app/assets/stylesheets/common/base/header.scss
@@ -19,7 +19,12 @@
     height: 100%;
 
     .contents {
-      display: flex;
+      display: grid;
+      grid-template-areas: "logo-wrapper extra-info panel";
+      grid-template-columns: auto 1fr auto;
+      .has-sidebar-page & {
+        grid-template-columns: minmax(var(--d-sidebar-width), auto) 1fr auto;
+      }
       align-items: center;
       height: 100%;
 
@@ -42,7 +47,14 @@
     }
   }
 
+  .header-logo-wrapper {
+    grid-area: logo-wrapper;
+    display: flex;
+    align-items: center;
+  }
+
   .title {
+    grid-area: logo;
     display: flex;
     align-items: center;
     height: 100%;
@@ -61,6 +73,7 @@
   }
 
   .panel {
+    grid-area: panel;
     position: relative;
     display: flex;
     flex: 0 0 auto;
@@ -212,6 +225,7 @@
 }
 
 .header-sidebar-toggle {
+  grid-area: hamburger;
   button {
     margin-right: 1em;
     box-sizing: content-box; // matches other header icons
diff --git a/app/assets/stylesheets/desktop/discourse.scss b/app/assets/stylesheets/desktop/discourse.scss
index 780aa903ef5..564b57fac57 100644
--- a/app/assets/stylesheets/desktop/discourse.scss
+++ b/app/assets/stylesheets/desktop/discourse.scss
@@ -199,19 +199,3 @@ body.has-sidebar-page {
     padding-left: 0;
   }
 }
-
-@media (prefers-reduced-motion: no-preference) {
-  body.sidebar-animate {
-    #main-outlet-wrapper {
-      //  grid-template-columns transition supported in Firefox, Chrome support coming summer 2022
-      transition-property: grid-template-columns, max-width;
-      transition-timing-function: var(--d-sidebar-animation-ease);
-      transition-duration: var(--d-sidebar-animation-time);
-    }
-
-    .d-header-wrap .wrap {
-      transition: max-width var(--d-sidebar-animation-time)
-        var(--d-sidebar-animation-ease);
-    }
-  }
-}