Responsive dropdown navigation homepage using Sass, html & javaScript
Design comparison
Solution retrospective
Hey awesome folks! 🌟 Just wanted to share my excitement—I just wrapped up this cool dropdown navigation homepage challenge. 🚀 While figuring out the dropdown positioning, I faced a bit of a challenge, but I managed to tackle it in the end! 🎉 It might not be flawless, but I'm still in the learning zone. 📚💡 Open to any tips or corrections you might have! Let's learn and grow together! 🌱💪😊
Community feedback
- @JBleziPosted about 1 year ago
Hi Gift! It looks great overall, really good work :)
Apart from the advice already given by Matias, the only thing I would change is that you can make it so the menus close when you open another menu, so when the 'Features' menu is open and you click on the 'Company' menu, then the 'Features' menu closes. This helps the user focus better on the menu they just clicked on.
By doing that it is also easier to align the dropdown with the menu item, because then the other dropdown won't be in the way ;)
Hope this helps, keep up the good work!
Marked as helpful1 - @matiasluduena23Posted about 1 year ago
Hi Gift Amachree’s! Nice work!!! Just one advice that might help you.
- In desktop design the both side of the page looks like two boxes with the same width. One has the image, the other one the text. To approach this you can use grid or flex. Since you used flex let look at it with flex
you have @media (min-width: 768px) { main { display: flex; gap: 2rem; flex-direction: row-reverse; padding-left: 3rem; padding-right: 3rem; } (and add) .main-section-texts, .wrapper-figure { width: 50%; } (I thing is better to use a wrapper for you picture tag.)
We set the width of the children elements to 50%.
Hope this help you!
Good code!
Matias
Marked as helpful1
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