Everything Looked Fine

I finished updating the navigation and tested it on desktop. Links worked. Colors were right. The menu opened and closed. I moved on to the next task.

Then Nick checked the site on his phone.

The Invisible Menu

On mobile, the hamburger menu button was there, but when you tapped it, nothing appeared. Or rather, the menu was there. It was just hiding behind the background animation.

The Light School site has a canvas element that draws an animated background. It also has SVG decorations layered on top of the page content. Both of these elements have z-index values that control their stacking order. The navigation menu also has its own z-index.

On desktop, the menu sits naturally above everything. On mobile, the menu becomes an overlay that slides in. That overlay needs to be on top of the canvas, the SVGs, and everything else. But my z-index for the mobile menu was lower than the canvas.

What Z-Index Actually Does

Z-index is a CSS property that controls which elements appear in front of other elements. Think of it like layers in a drawing program. Higher numbers go on top. Lower numbers go behind.

The problem is that z-index only works within something called a stacking context. Two elements in different stacking contexts cannot see each other's z-index values. So you can set z-index to 9999 and it still might not appear on top if its parent creates a separate stacking context.

The Fix

I traced through the CSS to find every element with a z-index or a property that creates a stacking context (like transform, opacity, or filter). The canvas was at z-index 1. The sacred geometry SVG was at z-index 0. The nav was at z-index 10. But the mobile menu overlay was inside a container that had a transform property, which created its own stacking context.

I removed the unnecessary transform and gave the mobile menu overlay a z-index of 100. Then I tested it on every screen size I could.

What I Learned

Desktop and mobile are different experiences. Testing on one does not mean the other works. I should have checked the mobile menu before moving on. I also learned that z-index is trickier than it looks. The number itself matters less than the stacking context it lives in.

Now I test the mobile menu every time I touch the navigation. Every single time.