diff --git a/CHANGELOG.md b/CHANGELOG.md
index 5f31883d767..6afd0dca249 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -5,6 +5,7 @@
 - Changed `responsive` and `max` behavior of `EuiBreadcrumbs` to always display collapsed items in popover [#3578](https://github.com/elastic/eui/pull/3578))
 - Added `BREAKPOINTS` and `getBreakpoint` utilities [#3578](https://github.com/elastic/eui/pull/3578))
 - Added `'any'` option to the `step` prop of the `EuiFieldNumber` ([#3562](https://github.com/elastic/eui/pull/3562))
+- Moved all `EuiHeader` SASS variables to `global_styles` ([#3592](https://github.com/elastic/eui/pull/3592))
 
 **Bug fixes**
 
@@ -12,6 +13,7 @@
 - Fixed `EuiCodeBlockImpl` testenv mock pass-through of `data-test-subj` attribute ([#3560](https://github.com/elastic/eui/pull/3560))
 - Fixed DOM element creation issues in `EuiOverlayMask` by using lifecycle methods ([#3555](https://github.com/elastic/eui/pull/3555))
 - Fixed `EuiComboBox`'s options list `zIndex` positioning when nested in other `zIndex` contexts ([#3551](https://github.com/elastic/eui/pull/3551))
+- Fixed `euiHeaderAffordForFixed` mixin's use of header SASS variable ([#3592](https://github.com/elastic/eui/pull/3592))
 
 **Breaking changes**
 
diff --git a/src-docs/src/views/header/header_example.js b/src-docs/src/views/header/header_example.js
index 271c8e04c5b..fb97e465e4b 100644
--- a/src-docs/src/views/header/header_example.js
+++ b/src-docs/src/views/header/header_example.js
@@ -199,14 +199,14 @@ export const HeaderExample = {
             afford for the header height. EUI supplies a helper mixin that also
             accounts for this height in flyouts and the collapsible nav. Simply
             add{' '}
-            <EuiCode language="sass">@mixin euiHeaderAffordForFixed;</EuiCode>{' '}
+            <EuiCode language="scss">@include euiHeaderAffordForFixed;</EuiCode>{' '}
             anywhere in your SASS.
           </p>
         </>
       ),
       snippet: [
         '<EuiHeader position="fixed" />',
-        '@mixin euiHeaderAffordForFixed;',
+        '@include euiHeaderAffordForFixed;',
       ],
       demo: <HeaderPosition />,
     },
@@ -320,8 +320,8 @@ export const HeaderExample = {
         </p>
       ),
       snippet: [
-        `<EuiHeader theme="dark" />
-<EuiHeader />`,
+        `<EuiHeader theme="dark" position="fixed" />
+<EuiHeader position="fixed" />`,
         '@include euiHeaderAffordForFixed($euiHeaderHeightCompensation * 2);',
       ],
       demo: <HeaderStacked />,
diff --git a/src/components/control_bar/_index.scss b/src/components/control_bar/_index.scss
index 645546e59af..5811a643813 100644
--- a/src/components/control_bar/_index.scss
+++ b/src/components/control_bar/_index.scss
@@ -1,4 +1,3 @@
-@import '../header/variables';
 @import '../nav_drawer/variables';
 @import 'variables';
 @import 'control_bar';
diff --git a/src/components/flyout/_mixins.scss b/src/components/flyout/_mixins.scss
index cc482a47ae4..d3be214cd94 100644
--- a/src/components/flyout/_mixins.scss
+++ b/src/components/flyout/_mixins.scss
@@ -1,4 +1,3 @@
-@import '../header/variables';
 
 @mixin euiFlyout {
   border-left: $euiFlyoutBorder;
diff --git a/src/components/header/_index.scss b/src/components/header/_index.scss
index cdd8fdae497..c3d05652876 100644
--- a/src/components/header/_index.scss
+++ b/src/components/header/_index.scss
@@ -1,5 +1,4 @@
 // Components
-@import 'variables';
 @import 'mixins';
 
 @import 'header';
diff --git a/src/components/nav_drawer/_index.scss b/src/components/nav_drawer/_index.scss
index bb973574c19..92cc8b78103 100644
--- a/src/components/nav_drawer/_index.scss
+++ b/src/components/nav_drawer/_index.scss
@@ -1,4 +1,3 @@
-@import '../header/variables';
 @import 'variables';
 
 // Components
diff --git a/src/global_styling/mixins/_header.scss b/src/global_styling/mixins/_header.scss
index d0cf770ad3a..6869ed9dc76 100644
--- a/src/global_styling/mixins/_header.scss
+++ b/src/global_styling/mixins/_header.scss
@@ -1,3 +1,5 @@
+@import '../variables/header';
+
 @mixin euiHeaderAffordForFixed($headerHeight: $euiHeaderHeightCompensation) {
   // The `&` allows for grouping inside another specific body class.
   // When not applied inside of another selector, it simply renders with the single class
diff --git a/src/components/header/_variables.scss b/src/global_styling/variables/_header.scss
similarity index 85%
rename from src/components/header/_variables.scss
rename to src/global_styling/variables/_header.scss
index 1e9c763d3ad..10970534cfd 100644
--- a/src/components/header/_variables.scss
+++ b/src/global_styling/variables/_header.scss
@@ -1,4 +1,3 @@
-// Note - these are also used by the EuiNavDrawer (/nav_drawer) component
 // Themable colors
 $euiHeaderBackgroundColor: $euiColorEmptyShade !default;
 $euiHeaderBorderColor: $euiBorderColor !default;
diff --git a/src/global_styling/variables/_index.scss b/src/global_styling/variables/_index.scss
index 46c7f8407af..61d74dfcec3 100644
--- a/src/global_styling/variables/_index.scss
+++ b/src/global_styling/variables/_index.scss
@@ -18,5 +18,6 @@
 
 @import 'buttons';
 @import 'form';
+@import 'header';
 @import 'panel';
 @import 'tool_tip';