Custom navbar appears behind all elements that have an interaction

Design help Animations & Interactions
1

Hello!

I have created my own navbar, that basically is just a hamburger icon, but on hover, the div with the navbar slides out from the left side of the screen and disappears when hovering out of the navbar. It works all good but for some reason it slides out/appears behind elements on my page that have an interaction (like when I have text that fades in when scrolling into view). When I remove the interactions from these elements, the navbar will appear above the elements. So I guess it has something to do with interactions.

I also tried giving the navbar a really high z indes (100) but it didnā€™t do anything.

Does anyone know how to solve this?

Thanks a lot!

Here is my public share link: LINK
(how to access public share link)

2

Hello :slight_smile:

Please could you share the read-only link for your project? Would be happy to look into this for you.

3

Hi @Nicole_Klaver, thanks so much for helping! Here is the read only link: https://preview.webflow.com/preview/ottoplatz-koln?utm_medium=preview_link&utm_source=designer&utm_content=ottoplatz-koln&preview=a31ba3309d6dd7ee3ba382388707a0cc&mode=preview

You will see what I mean when you scroll down to the 2nd section. When you then hover over ā€œmenuā€, the navbar slides in but is beneath the content from that 2nd section.

4

Hello :slight_smile:

Okay, so itā€™s a quick fix. Just add a z-index to ā€˜Hero Nav Divā€™.
Then all will be sorted.

5

ahhh I should have known that haha Thanks so much!!

1 Like
6

No problem :slight_smile: Happens to me all the time. I will sit and wonder why something isnā€™t working, meanwhile, I have forgotten to do the smallest thing to solve the problem. Happy to help :ghost: