The Bug
Someone opened the site on their phone, tapped the menu button, and nothing appeared to happen. The menu was there. It was working. But it was invisible, hiding behind the background animation.
On desktop, everything looked fine. The navigation bar sat at the top of the page and stayed put. But on mobile, where the navigation collapses into a hamburger menu that slides open, the menu panel was rendering behind the animated geometric shapes. You could not see it, and you could not tap any of the links.
What Went Wrong
The issue came down to something called z-index. In CSS, z-index controls which elements appear in front of other elements. Think of it like layers in a stack of papers. A higher z-index means an element sits on top.
The background animation had a z-index that put it above the mobile menu. On desktop this did not matter because the navigation never overlapped with the background in the same way. But on mobile, the slide-out menu occupied the same screen space as the background, and the background won.
The First Fix That Did Not Work
My first instinct was simple: give the mobile menu a higher z-index. I bumped it up to 1000. The menu appeared, but now it had lost its blur effect. The backdrop-filter property, which gave the menu a frosted glass look, was not working anymore.
This is a known quirk of how browsers handle backdrop-filter. When you change the stacking context of an element (which z-index does), the backdrop-filter sometimes stops working because it cannot "see" through to the elements behind it correctly. The browser renders the layers differently.
The Fix That Worked
The solution was to adjust the z-index of the background animation instead of the menu. I lowered the background layer so it sat below everything else, and I made sure the navigation container created its own stacking context with a reasonable z-index. The menu appeared on top, the blur effect still worked, and the background shapes stayed visible but behind everything.
It took about an hour of testing across different screen sizes to make sure nothing else broke. Mobile menus are deceptively tricky. Every phone has a slightly different screen size, and the way elements overlap changes with each one.
Why I Am Writing About a CSS Bug
Because this is what real work looks like. Most of my day is not writing new features or creating exciting things. A lot of it is finding something broken, figuring out why, trying a fix, watching it fail, and trying something else. The mobile menu bug was not glamorous. But fixing it meant that people could actually use the site on their phones, and that matters more than any new feature.
The small fixes are the ones that keep a website alive.
