@cchaos I think this PR sneaked in a couple of issues into the documentation.

You will then need to apply your own padding to this body class to afford for the header height. EUI supplies a helper mixin that also accounts for this height in flyouts and the collapsible nav. Simply add @mixin euiHeaderAffordForFixed; anywhere in your SASS.

I think this should be @include euiHeaderAffordForFixed; and not @mixin if you want to include it. Also it seems, you MUST add it into a body rule and not anywhere in your SASS, since the style of that mixin currently uses &.euiBody--headerIsFixed to set the padding.

Also I am having problems actually applying this without specifying the value (seems the default is not working):

@import '@elastic/eui/src/global_styling/variables';
@import '@elastic/eui/src/global_styling/mixins';

body {
  @include euiHeaderAffordForFixed;
}

results in the error:

SassError: Undefined variable: "$euiHeaderHeightCompensation".
        on line 1 of node_modules/@elastic/eui/src/global_styling/mixins/_header.scss, in mixin `euiHeaderAffordForFixed`
        from line 5 of src/app/header.scss
>> in euiHeaderAffordForFixed($headerHeight: $euiHeaderHeightCompensation) {

Do I need to import a specific other sass file to have this variable working or could this be an issue? Looking for the variable looks like it's only set in any of the global files (that we advice in the documentation to include) for the amsterdam theme, but not any other theme (and only local in the header component, which I assume another project should not directly import)?

Originally posted by @timroes in #3538 (comment)