diff --git a/src/core/public/_css_variables.scss b/src/core/public/_css_variables.scss
index 76ae1226bea57..5fc2c4dbfc2d3 100644
--- a/src/core/public/_css_variables.scss
+++ b/src/core/public/_css_variables.scss
@@ -7,8 +7,6 @@
   --kbnHeaderOffsetWithBanner: calc(var(--kbnHeaderBannerHeight) + var(--kbnHeaderOffset));
   // height of the action menu in the header in serverless projects
   --kbnProjectHeaderAppActionMenuHeight: #{$euiSize * 3};
-  // total height of all fixed headers for the app container in serverless projects, dynamically changes based on whether the banner or action menu is present
-  --kbnAppHeadersOffset: var(--euiFixedHeadersOffset, 0);
 }
 
 // Quick note: This shouldn't be mixed with Sass variable declarations,
diff --git a/src/core/public/_mixins.scss b/src/core/public/_mixins.scss
index 59b33f29bacc7..0c6a8571f9e75 100644
--- a/src/core/public/_mixins.scss
+++ b/src/core/public/_mixins.scss
@@ -2,5 +2,9 @@
   // The `--kbnAppHeadersOffset` CSS variable is automatically updated by
   // styles/rendering/_base.scss, based on whether the Kibana chrome has a
   // header banner, app menu, and is visible or hidden
-  height: calc(100vh - var(--kbnAppHeadersOffset, 0) - #{$additionalOffset});
+  height: calc(
+    100vh
+    - var(--kbnAppHeadersOffset, var(--euiFixedHeadersOffset, 0))
+    - #{$additionalOffset}
+  );
 }
diff --git a/src/core/public/styles/rendering/_base.scss b/src/core/public/styles/rendering/_base.scss
index d2df38c0302da..6a423aa03e6e4 100644
--- a/src/core/public/styles/rendering/_base.scss
+++ b/src/core/public/styles/rendering/_base.scss
@@ -19,7 +19,7 @@
   pointer-events: none;
   visibility: hidden;
   position: fixed;
-  top: var(--kbnAppHeadersOffset, 0);
+  top: var(--kbnAppHeadersOffset, var(--euiFixedHeadersOffset, 0));
   right: 0;
   bottom: 0;
   left: 0;
@@ -38,18 +38,11 @@
 .kbnBody {
   padding-top: var(--euiFixedHeadersOffset, 0);
 }
+
 // Conditionally override :root CSS fixed header variable. Updating `--euiFixedHeadersOffset`
 // on the body will cause all child EUI components to automatically update their offsets
-.kbnBody--projectActionMenuVisible {
-  --kbnAppHeadersOffset: calc(var(--kbnHeaderOffset) + var(--kbnProjectHeaderAppActionMenuHeight));
-}
 .kbnBody--hasHeaderBanner {
   --euiFixedHeadersOffset: var(--kbnHeaderOffsetWithBanner);
-  --kbnAppHeadersOffset: var(--kbnHeaderOffsetWithBanner);
-
-  &.kbnBody--projectActionMenuVisible {
-    --kbnAppHeadersOffset: calc(var(--kbnHeaderOffsetWithBanner) + var(--kbnProjectHeaderAppActionMenuHeight));
-  }
 
   // Offset fixed EuiHeaders by the top banner
   .euiHeader[data-fixed-header] {
@@ -63,15 +56,24 @@
   }
 }
 
+// Set a body CSS variable for the app container to use - calculates the total
+// height of all fixed headers + the sticky action menu toolbar
+.kbnBody--projectActionMenuVisible {
+  --kbnAppHeadersOffset: calc(var(--kbnHeaderOffset) + var(--kbnProjectHeaderAppActionMenuHeight));
+
+  &.kbnBody--hasHeaderBanner {
+    --kbnAppHeadersOffset: calc(var(--kbnHeaderOffsetWithBanner) + var(--kbnProjectHeaderAppActionMenuHeight));
+  }
+}
+
 .kbnBody--chromeHidden {
   --euiFixedHeadersOffset: 0;
-  &.kbnBody--projectActionMenuVisible {
-    --kbnAppHeadersOffset: 0;
+
+  &.kbnBody--hasHeaderBanner {
+    --euiFixedHeadersOffset: var(--kbnHeaderBannerHeight);
   }
-}
-.kbnBody--chromeHidden.kbnBody--hasHeaderBanner {
-  --euiFixedHeadersOffset: var(--kbnHeaderBannerHeight);
+
   &.kbnBody--projectActionMenuVisible {
-    --kbnAppHeadersOffset: var(--kbnHeaderBannerHeight);
+    --kbnAppHeadersOffset: var(--euiFixedHeadersOffset, 0);
   }
 }
diff --git a/x-pack/plugins/security_solution/public/app/home/template_wrapper/global_kql_header/index.tsx b/x-pack/plugins/security_solution/public/app/home/template_wrapper/global_kql_header/index.tsx
index 1b0229e35ef7d..80ddc7769e91e 100644
--- a/x-pack/plugins/security_solution/public/app/home/template_wrapper/global_kql_header/index.tsx
+++ b/x-pack/plugins/security_solution/public/app/home/template_wrapper/global_kql_header/index.tsx
@@ -12,7 +12,7 @@ import { useGlobalHeaderPortal } from '../../../../common/hooks/use_global_heade
 const StyledStickyWrapper = styled.div`
   position: sticky;
   z-index: ${(props) => props.theme.eui.euiZHeaderBelowDataGrid};
-  top: var(--kbnAppHeadersOffset, 0);
+  top: var(--kbnAppHeadersOffset, var(--euiFixedHeadersOffset, 0));
 `;
 
 export const GlobalKQLHeader = React.memo(() => {