Design comparison
Solution retrospective
I was able to add animation to the navbar when it expands on click, but I wasn't able to do the same when closing the navbar. If anyone can provide me with a resource on how to do so, I will be extremely grateful. Also, if anyone can tell me how to add a backdrop when the navbar expands on click, that will be of huge help. Any other suggestions or tips are welcome as well.
Community feedback
- @pankajrampawarPosted 11 months ago
hey Aayush, for the backdrop use a position-fixed div with screen height and width, reduce its opacity and give it a light grey or slate colour, make sure it has a Index higher than page but lower than sidebar. toggle the visibility of the backdrop based on visibility of the sidebar. and there you go.. I hope you find this helpful.
Marked as helpful0@Aayush895Posted 11 months ago@pankajrampawar Hey, thanks for the suggestion. I understand what to do now. So thanks for taking the time out and dropping the suggestion. I appreciate it.
0 - @AGutierrezRPosted 11 months ago
Hello there! 👋 Great job on completing the challenge!
I have some suggestions regarding your code that might be of interest to you.
When working with animations to show and hide elements, the
display
rule primarily aids in displaying elements. If an element'sdisplay
is not set tonone
, the animation will activate, displaying the element. However, settingdisplay: none
hides the element before the exit animation can take effect.To address this issue, consider adding a new class,
something--closing
, specifically designed to animate the element's exit. You can then utilize theanimationend
event to wait for this animation to conclude before applying thedisplay: none
rule.I hope you find this suggestion helpful! 😁 Your submitted solution is fantastic!
Happy coding!
Marked as helpful0@Aayush895Posted 11 months ago@AGutierrezR Hey, thanks for taking the time out and dropping your suggestion. I appreciate it, and your suggestion gave me some understanding of what I was doing wrong. So thank you once again. Have a great day.
0
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