Design comparison
SolutionDesign
Solution retrospective
Any advices is welcome ! :)
Community feedback
- @GrzywNPosted over 2 years ago
Hey, well done @RadeQu!
I can suggest you to put empty links instead of paragraphs (Careers, About, Login) and add hover states to them, it can be easily done by using
href="#"
in the<a>
tag.Also, I think it's worth to improve your mobile navigation UI/UX. Things which are worth improving:
- Fixing animations, so they appear always, not only when you close the menu. (change the place of transitions/animations properties which are in
:hover
to hover state element selectors) - Making hamburger menu up top and appear in the same place as before opening the menu. Consider using
z-index
property (it cannot be opened and closed with the same position of the mouse cursor) - Check your website using
Tab
key. Some weird things happen like the menu appearing on the right side of the screen, unexpected overflow which is hidden (navigation and scroll doesn't work). It's good to make user able to navigate your website/app with only keyboard without any problems by pressing tab and enter. You can sometimes usepointer-events: none
in situations like this. - Remove overflow: hidden, try to handle it in a different way. Maybe put
display: none
to your navigation or usevisibility
property. There are many options. You can also useoverflow-x: hidden
property, so overflow will be hidden only in the X axis.
Hope this helps! Have a nice day and happy coding 😁!
0 - Fixing animations, so they appear always, not only when you close the menu. (change the place of transitions/animations properties which are in
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