# EuiOverlayMask is over the EuiCollapsibleNav it comes from

**URL:** <https://discuss.elastic.co/t/euioverlaymask-is-over-the-euicollapsiblenav-it-comes-from/266410>\
**Category:** Kibana\
**Tags:** kibana-plugin-development\
**Created:** [March 5, 2021, 9:29pm UTC](https://discuss.elastic.co/t/euioverlaymask-is-over-the-euicollapsiblenav-it-comes-from/266410 "2021-03-05T21:29:27Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![Thomas\_Vaudry-Read](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/thomas_vaudry-read/32/84506_2.png) [@Thomas\_Vaudry-Read](https://discuss.elastic.co/u/Thomas_Vaudry-Read)\
**Post date:** [March 5, 2021, 9:29pm UTC](https://discuss.elastic.co/t/euioverlaymask-is-over-the-euicollapsiblenav-it-comes-from/266410/1 "2021-03-05T21:29:27Z")

</div>

Developing a Kibana plugin, and have a 3rd header layer in the page. When I set-up a button in the EuiHeader to open a EuiCollapsibleNav, the overlay covers the nav element and nothing is selectable. Here is a slice of the code, and gif of the issue.

```auto
<EuiHeader
            theme='default'
            sections={[
              {
                items: [
                    <EuiCollapsibleNav
                        isOpen={navIsOpen}
                        isDocked={navIsDocked}
                        button={
                            <EuiHeaderSectionItem border="right">
                                <EuiHeaderSectionItemButton
                                    aria-controls={keypadId}
                                    aria-expanded={navIsOpen}
                                    aria-label="App navigation"
                                    onClick={onMenuButtonClick}>
                                    <EuiIcon type="apps" size="m" />
                                </EuiHeaderSectionItemButton>
                            </EuiHeaderSectionItem>
                        }
                        onClose={() => setNavIsOpen(false)}>
                        <div style={{ padding: 16 }}>
                            <EuiTitle>
                                <h2>I am some nav</h2>
                            </EuiTitle>
                            <EuiSpacer />
                            <EuiButton
                                onClick={() => {
                                    setNavIsDocked(!navIsDocked);
                                }}>
                                Docked: {navIsDocked ? 'on' : 'off'}
                            </EuiButton>
                        </div>
                    </EuiCollapsibleNav>,
...

```

 ![overlay-issue](https://us1.discourse-cdn.com/elastic/original/3X/1/9/19ff0072eff64bdc14fcc5d2ced5f22cde063fdc.gif)

Thanks for the help.

---

<div class="post-metadata">

**Author:** ![poff](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/poff/32/81795_2.png) [@poff](https://discuss.elastic.co/u/poff)\
**Post date:** [March 9, 2021, 4:20pm UTC](https://discuss.elastic.co/t/euioverlaymask-is-over-the-euicollapsiblenav-it-comes-from/266410/2 "2021-03-09T16:20:01Z")

</div>

Hey there!

One thing you might try is setting the `maskProps` on the `EuiCollapsibleNav` to be `{ headerZindexLocation: 'below' }`. [According to the documentation for the EUIOverlayMask](https://elastic.github.io/eui/#/utilities/overlay-mask), this seems like it'd set the z-index to be below the z-index of the EUIHeader.

If that doesn't work, let me know!

---

<div class="post-metadata">

**Author:** ![Thomas\_Vaudry-Read](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/thomas_vaudry-read/32/84506_2.png) [@Thomas\_Vaudry-Read](https://discuss.elastic.co/u/Thomas_Vaudry-Read)\
**Post date:** [March 9, 2021, 4:52pm UTC](https://discuss.elastic.co/t/euioverlaymask-is-over-the-euicollapsiblenav-it-comes-from/266410/3 "2021-03-09T16:52:05Z")

</div>

Sadly I had tried this already. It did not work.

My current solution is to unset the z-index for the application div in the css styles. I know this isn't ideal, but so far it is doing the job.

```css
.application {
    z-index: unset !important;
}

```

---

<div class="post-metadata">

**Author:** ![cchaos](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/cchaos/32/85270_2.png) [@cchaos](https://discuss.elastic.co/u/cchaos)\
**Post date:** [March 9, 2021, 7:28pm UTC](https://discuss.elastic.co/t/euioverlaymask-is-over-the-euicollapsiblenav-it-comes-from/266410/4 "2021-03-09T19:28:41Z")

</div>

Hey, responding from EUI here. The problem you're running into is that your custom header isn't fixed position. The Collapsible Nav's flyout and mask only respond well when the header is fixed which includes a higher z-index.

 ![Screen Shot 2021-03-09 at 14.18.19 PM](https://us1.discourse-cdn.com/elastic/original/3X/1/2/126c607c0b95b11771b9d04fee71cd835f44fe85.png)

Your safest approach here is to manually add a `z-index: 1000` to your header and then you'll also need to adjust the top position of the EuiCollapsibleNav with `top: 97px`. Here's an isolated codesandbox for you that emulates this suggestion.

> **[jovial-chatterjee-3stie - CodeSandbox](https://codesandbox.io/s/flamboyant-leaf-9hfuc?file=%2Findex.js)**
>
> jovial-chatterjee-3stie using @elastic/datemath, @elastic/eui, moment, react, react-dom, react-router-dom, react-scripts

It's safer because it won't affect anything outside of your direct plugin.

---

<div class="post-metadata">

**Author:** ![Thomas\_Vaudry-Read](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/thomas_vaudry-read/32/84506_2.png) [@Thomas\_Vaudry-Read](https://discuss.elastic.co/u/Thomas_Vaudry-Read)\
**Post date:** [March 9, 2021, 9:05pm UTC](https://discuss.elastic.co/t/euioverlaymask-is-over-the-euicollapsiblenav-it-comes-from/266410/5 "2021-03-09T21:05:32Z")

</div>

Hi @cchaos,

The problem is I do not want to override the `navigation.ui.TopNavMenu` so my EuiHeader is within the `div.application`; even by setting the fixed header, the overlay is still over it, so my guess is that I need to add this header to the `navigation.ui.TopNavMenu` element. I was unsuccessful in doing that.

Any help would be great.

Thomas

---

<div class="post-metadata">

**Author:** ![cchaos](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/cchaos/32/85270_2.png) [@cchaos](https://discuss.elastic.co/u/cchaos)\
**Post date:** [March 10, 2021, 3:54pm UTC](https://discuss.elastic.co/t/euioverlaymask-is-over-the-euicollapsiblenav-it-comes-from/266410/6 "2021-03-10T15:54:06Z")

</div>

Sorry, I didn't mean to imply your header needed to be `fixed`. Have you tried the `zindex` solution shown in the codesandbox?

---

<div class="post-metadata">

**Author:** ![Thomas\_Vaudry-Read](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/thomas_vaudry-read/32/84506_2.png) [@Thomas\_Vaudry-Read](https://discuss.elastic.co/u/Thomas_Vaudry-Read)\
**Post date:** [March 10, 2021, 3:57pm UTC](https://discuss.elastic.co/t/euioverlaymask-is-over-the-euicollapsiblenav-it-comes-from/266410/7 "2021-03-10T15:57:00Z")

</div>

Yes I did, but because the parent div, (div.application), has a lower z-index, it doesn't change the result. I can try pulling the header out of the body, but I'm not sure there was a spot for it. I will try this and reply here.

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/elastic/original/3X/1/a/1ac57faf039f6b580b3f104ef42a2a89e41014de.png) [@system](https://discuss.elastic.co/u/system)\
**Post date:** [April 7, 2021, 3:57pm UTC](https://discuss.elastic.co/t/euioverlaymask-is-over-the-euicollapsiblenav-it-comes-from/266410/8 "2021-04-07T15:57:30Z")

</div>

This topic was automatically closed 28 days after the last reply. New replies are no longer allowed.