Design comparison
Solution retrospective
- I would like to know about what is the best practice for making the navbar for the mobile screens, how can we add some transition effects on them when they appear on the screen.
- What is the best practice for using the pictures? Should we use them as background or we should just render them using img tags?
- How have you used the svgs? with the img tags or have you used the inline-svgs? Whats the best practice to use the svgs in our projects?
Community feedback
- @darshii98Posted over 3 years ago
-
Set visibility to hidden below a certain screen length, preferably at tablet size(768), then you can make the container of the nav-links flex, with flex direction column, make position absolute, and give some padding to the links, to make it look like a list. To add transition effect either you can use transform translate or you can make the height of the container zero and when menu burger icon is clicked, set the height to unset or original and use transition to animate it.
-
Sometimes its better to use directly images, but in case of the design and photography section of your site, you can use image as background.
-
Svgs I have used in the sass itself and used filter property to change the color. (for icons I have used ion-icons, but you can also use the provided ones and change their color using filter when hovering)
Marked as helpful0 -
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