diff --git a/src/core/public/chrome/ui/header.tsx b/src/core/public/chrome/ui/header.tsx
index 1d2016e8bea11..78ff3dc34b444 100644
--- a/src/core/public/chrome/ui/header.tsx
+++ b/src/core/public/chrome/ui/header.tsx
@@ -24,9 +24,9 @@ import { Header as HeaderUI, HeaderProps } from './header/header';
 export const Header: FunctionComponent<HeaderProps> = props => {
   const [isLocked, setIsLocked] = useState(false);
   const className = classnames(
-    'header-global-wrapper',
+    'chrHeaderWrapper',
     {
-      'header-global-wrapper--isNavLocked': isLocked,
+      'chrHeaderWrapper--navIsLocked': isLocked,
     },
     'hide-for-sharing'
   );
diff --git a/src/core/public/chrome/ui/header/_index.scss b/src/core/public/chrome/ui/header/_index.scss
index 2b841eca6e01d..f19728a52dd70 100644
--- a/src/core/public/chrome/ui/header/_index.scss
+++ b/src/core/public/chrome/ui/header/_index.scss
@@ -1,13 +1,14 @@
 @import '@elastic/eui/src/components/header/variables';
+@import '@elastic/eui/src/components/nav_drawer/variables';
 
-.header-global-wrapper {
+.chrHeaderWrapper {
   width: 100%;
   position: fixed;
   top: 0;
   z-index: 10;
 }
 
-.header-global-wrapper + .app-wrapper:not(.hidden-chrome) {
+.chrHeaderWrapper ~ .app-wrapper:not(.hidden-chrome) {
   top: $euiHeaderChildSize;
   left: $euiHeaderChildSize;
 
@@ -19,13 +20,6 @@
   }
 }
 
-// Mobile header is smaller
-@include euiBreakpoint('xs', 's') {
-  .header-global-wrapper + .app-wrapper:not(.hidden-chrome) {
-    left: 0;
-  }
-}
-
 .chrHeaderHelpMenu__version {
   text-transform: none;
 }
@@ -34,3 +28,20 @@
   align-self: center;
   margin-right: $euiSize;
 }
+
+// Mobile header is smaller
+@include euiBreakpoint('xs', 's') {
+  .chrHeaderWrapper ~ .app-wrapper:not(.hidden-chrome) {
+    left: 0;
+  }
+}
+
+@include euiBreakpoint('xl') {
+  .chrHeaderWrapper--navIsLocked {
+    ~ .app-wrapper:not(.hidden-chrome) {
+      // Shrink the content from the left so it's no longer overlapped by the nav drawer (ALWAYS)
+      left: $euiNavDrawerWidthExpanded !important; // sass-lint:disable-line no-important
+      transition: left $euiAnimSpeedFast $euiAnimSlightResistance;
+    }
+  }
+}
diff --git a/x-pack/legacy/plugins/canvas/public/components/fullscreen/fullscreen.scss b/x-pack/legacy/plugins/canvas/public/components/fullscreen/fullscreen.scss
index d366aac096bed..8dad4aaba5eb1 100644
--- a/x-pack/legacy/plugins/canvas/public/components/fullscreen/fullscreen.scss
+++ b/x-pack/legacy/plugins/canvas/public/components/fullscreen/fullscreen.scss
@@ -5,8 +5,9 @@ body.canvas-isFullscreen { // sass-lint:disable-line no-qualifying-elements
   }
 
   // remove space for global nav elements
-  .header-global-wrapper + .app-wrapper {
-    left: 0;
+  .chrHeaderWrapper ~ .app-wrapper {
+    // Override locked nav at all breakpoints
+    left: 0 !important; // sass-lint:disable-line no-important
     top: 0;
   }
 
@@ -16,7 +17,7 @@ body.canvas-isFullscreen { // sass-lint:disable-line no-qualifying-elements
   }
 
   // hide all the interface parts
-  .header-global-wrapper, // K7 global top nav
+  .chrHeaderWrapper, // K7 global top nav
   .canvasLayout__stageHeader,
   .canvasLayout__sidebar,
   .canvasLayout__footer,