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

Responsive Dropdown Navigation SASS/JS

#sass/scss

@Nghuynh07

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


This was a fun/challenge project. The difficult part was mobile navigation. I wanted the parent element to expand its height and the dropdown animates in; however, I couldn't it get it to work. Right now, the height is fixed and it looks funny . Any idea how to improve this?

At a larger screen the design suffers. I had to readjust the main content to a smaller width. Any suggestion to improve?

Any feed back on DOM traversing? What consider as best practice for DOM traversing?

Community feedback

@SohaibSEG

Posted

Hello, I like how your design looks 100% same as the challenge when it comes to spacing and sizing. Did you just eyeball it ? As for the navigation items you can add a class and override its max-height to 0 and then toggle it using js onclick you can check my solution for this though i didn't use scss just css. and about your dom traversing I'd recomment using meaningful function names just for sake of readability. cheers ! keep coding.

1

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