Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Intro Section With Dropdown Navigation (challenging but rewarding)

Nguyen Nguyen• 340

@jesuisbienbien

Desktop design screenshot for the Intro section with dropdown navigation coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
2junior
View challenge

Design comparison


SolutionDesign

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

Yehan Nilanga• 690

@Yehan20

Posted

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 helpful

0

Nguyen Nguyen• 340

@jesuisbienbien

Posted

@Yehan20 thank you for your feedbacks. I really appreciate it. Will work on this more.

1
Yehan Nilanga• 690

@Yehan20

Posted

@jesuisbienbien Thanks so much , good luck for the rest of the challenges

0
Yahya• 80

@yhas14

Posted

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

Nguyen Nguyen• 340

@jesuisbienbien

Posted

@yhas14 Thank you so much!!

0

Please log in to post a comment

Log in with GitHub
Discord logo

Join 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