-
- (FORCE_HIDDEN ? false : visibility)),
- takeUntil(this.stop$)
- )}
- kibanaVersion={injectedMetadata.getKibanaVersion()}
- navLinks$={navLinks.getNavLinks$()}
- recentlyAccessed$={recentlyAccessed.get$()}
- navControlsLeft$={navControls.getLeft$()}
- navControlsRight$={navControls.getRight$()}
- />
-
+ (FORCE_HIDDEN ? false : visibility)),
+ takeUntil(this.stop$)
+ )}
+ kibanaVersion={injectedMetadata.getKibanaVersion()}
+ navLinks$={navLinks.getNavLinks$()}
+ recentlyAccessed$={recentlyAccessed.get$()}
+ navControlsLeft$={navControls.getLeft$()}
+ navControlsRight$={navControls.getRight$()}
+ />
),
diff --git a/src/core/public/chrome/ui/header/_index.scss b/src/core/public/chrome/ui/header/_index.scss
index 2b841eca6e01..f19728a52dd7 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/src/core/public/chrome/ui/header/header.tsx b/src/core/public/chrome/ui/header/header.tsx
index 04c1a1182487..4dc64c57fa24 100644
--- a/src/core/public/chrome/ui/header/header.tsx
+++ b/src/core/public/chrome/ui/header/header.tsx
@@ -163,6 +163,8 @@ interface Props {
navControlsRight$: Rx.Observable