Design comparison
Solution retrospective
Close, no cigar. I tried a few solutions to get the mobile background to "dim" when the menu was opened to no avail. I'm sure the accessibility needs improving as well.
Otherwise, it was a fun one. Definitely challenging, but rewarding, too.
Community feedback
- @animalchin45Posted almost 2 years ago
For the dimming effect you can make a separate <nav> element for mobile with a css media query that switches between the two. I've found this a good approach because you can create separate layouts for each use case. Once you have that in place make the mobile nav into two elements, one with a transparent background color to "dim" the screen and a second that contains the hamburger menu. The menu should have a higher z-index then the background and both should be higher than the main content. After that you can apply transitions to make it look good.
1
Please log in to post a comment
Log in with GitHub
Join our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord