Intro Section With Dropdown Navigation (challenging but rewarding)
Design comparison
Solution retrospective
Hi everyone,
It's been a while because this challenge was quite difficult for me. I've finally finished (and very proud of myself hehe). Please take some time to review my solution. I'd love to receive as many feedbacks as possible.
One thing I noticed is that, when on a few specific mobile devices (iphone SE, next hub, and galaxy S8+), the overlay effect acted weird. There was a white part at the top of the page. This doesn't happen in other mobile devices though. Any help on this issue would be greatly appreciated.
Any other feedbacks are welcome. Thank you in advance!
Happy coding :)
Community feedback
- @Yehan20Posted over 2 years ago
Hey Congratulations on Completing the Challenge , I noticed that the nav bar did not expand on my laptop and once i inspected it , it expanded once it exceeds 1400px , i think you could add your break point on around 768 px , and in my laptop there were some side scrolling as well , in addition if your wanted to rotate the arrow near the navlink your could do that using js when you add the click effect for the drop down you can select the image next to it and change the src to the new arrow and when you click it again change the src back.
For the overlay you could use the help of pseudo selectors to generate it , for an example when your nav is open you could add a class may be opened/toggled and for that add a pseudo selector. i did some testing and found this will make a full size overlay
div#nav-menu:before { content: ''; position: absolute; top: 0; width: 79%; height: 100%; left: 0; background: rgba(0,0,0,0.5); transform: translateX(-99%); }
you could try this. I Hope by answer was helpful , good luck for the next challenge
Marked as helpful0@jesuisbienbienPosted over 2 years ago@Yehan20 thank you for your feedbacks. I really appreciate it. Will work on this more.
1@Yehan20Posted over 2 years ago@jesuisbienbien Thanks so much , good luck for the rest of the challenges
0 - @yhas14Posted over 2 years ago
Wow you've come a long way, I remember commenting on your first project and I can see the major improvements you've made. Keep up the great work.
1
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