Design comparison
Solution retrospective
I've encountered a bit of a bug with this one. I'm not a big fan of creating separate menus for desktop and mobile, so usually css for the menu changes, not html. But with animations this approach backfired, because when you resize window on desktop or tablet, when the menu becomes mobile, user can see it for a second. Hot fix for it was to remove transition, but I need it to stay for smooth and consistent experience. But when mobile menu was activated, the issue remains. I'll investigate it further on how to remove this bug, but any feedback on how to cope with this issue without changing html is welcome.
(On GitHub repo's I listed the code that is used for this hack)
PS: in order to see this bug, resize the window so you you can see burger menu icon, click it, close menu, and then resize back to desktop size, and back to mobile, you'll see menu for a split second being translated to the right outside of viewport.
Community feedback
Please log in to post a comment
Log in with GitHubJoin 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