[EuiCollapsibleNav] CollapsibleNav overlaps header

[Paku580]

I'm very new to elastic ui and wanted to give it a try. I checked out your example here https://elastic.github.io/next-eui-starter/ and wanted to add a collapsible nav to it. But it seems like it overlaps the header. I followed the docs as described here https://elastic.github.io/eui/#/navigation/collapsible-nav#full-pattern-with-header-and-saved-pins but it doesnt seem to work.

Currently it looks like this:

My Code:

const EuiApp: FunctionComponent<AppProps> = ({ Component, pageProps }) => {
  const [navIsopen, setNavIsOpen] = useState(true);
  const LearnLinks: EuiListGroupItemProps[] = [
    { label: 'Docs', href: '#/navigation/collapsible-nav' },
    { label: 'Blogs', href: '#/navigation/collapsible-nav' },
    { label: 'Webinars', href: '#/navigation/collapsible-nav' },
    { label: 'Elastic.co', href: 'https://elastic.co' },
  ];
  const collapsibleNav = (
    <EuiCollapsibleNav
      isOpen={navIsopen}
      isDocked={true}
      showButtonIfDocked={true}
      button={
        <EuiHeaderSectionItemButton onClick={() => setNavIsOpen(!navIsopen)}>
          <EuiIcon type={'menu'} size="m" aria-hidden="true" />
        </EuiHeaderSectionItemButton>
      }
      onClose={() => setNavIsOpen(false)}>
      <EuiFlexItem className="eui-yScroll">
        <EuiCollapsibleNavGroup
          title="Learn"
          iconType="training"
          isCollapsible={true}
          initialIsOpen={false}>
          <EuiListGroup aria-label="Learn" listItems={LearnLinks} />
        </EuiCollapsibleNavGroup>
      </EuiFlexItem>
    </EuiCollapsibleNav>
  );
  const leftSectionItems = [
    collapsibleNav,
    // eslint-disable-next-line react/jsx-key
    <EuiHeaderLogo iconType="logoElastic">Elastic</EuiHeaderLogo>,
  ];
  return (
    <EuiHeader
      position="fixed"
      sections={[
        {
          items: leftSectionItems,
          borders: 'right',
        },
      ]}
    />
  );
};

export default EuiApp;

I believe that this should work since I did everything like in the docs or am I missing something?
Any help is greatly appreciated!

[miukimiu]

Hi @Paku580,

Welcome to Elastic UI! 👋🏽

To fix the issue your facing, you just need to include the SASS mixin @include euiHeaderAffordForFixed anywhere in your SASS. You can read more about it here: https://elastic.github.io/eui/#/layout/header#fixed-header.

In case you don't want to import our variables and mixins you can just add the following CSS: https://codesandbox.io/s/late-dew-vmndg?file=/styles.css.

Bear in mind that the Next UI Starter uses EUI version 32.0.4. Some props were introduced in our newest versions. 🙂

[Paku580]

Thank you, this fixed it! :)