CSS animation overflowing nav bar

1

Hey, I’m facing a problem as the title says, here are screenshots of the problem:
before the animation:

beforeAnimation
beforeAnimation1612×428 114 KB

after (the scaling is overflowing my nav bar):
afterAnimation
afterAnimation1608×566 179 KB

Here’s the link to my code: https://codepen.io/LittleGrayay/pen/wbqMqB
Any advice will be welcomed. Thanks in advance :slight_smile:

2

Set a z-index on the navbar (should just need z-index: 1). You need to tell it to sit higher on the z-axis that other things on the page.

3

I actually tried nav {z-index: 1}, but it didn’t work as expected somehow.

5

I just fixed the bug. After searching for so many sites, I figured out that z-index will only work if the elements have position attributes other than static.