Responsive intro section with dropdown

Community feedback

• 

  Elaine•11,400

  @elaineleungPosted about 2 years ago

  Hi cacosted, well done here! I've also done this challenge before, so I know there are a lot of different parts here that aren't easy to put together. I felt you did well on the whole, especially the positioning and responsiveness of the hero image section with the text, as I have seen many people struggle with this.

  One suggestion I can offer is, for navbar--main, on a wide screen the items look really spread out when it has a width of 50%. I suggest not giving it a fixed percentage width (to prevent it from spreading out), and instead, try to use a margin to put spacing between them. The same thing with the logo and the nav, I think you can add some margin between them to space things out, as right now the logo looks pretty close to the nav. In the mobile nav, you can also add some spacing for the "Careers" and "About" links so that things look more even and also spaced out.

  That's all for suggestions, great job again!

  Marked as helpful

  1

  ---

  

  cacosted•570

  @cacostedPosted about 2 years ago

  @elaineleung Thanks, I'll check out the width suggestion.

  0
• 

  Ibrahim San•230

  @ibra-sanPosted about 2 years ago

  Hey! Congrates on completing the project mate. To be quite honest, you have done a super job on this one. I know because I have done worse on this one haha.

  Just a small suggestion here is to take a look at the menu arrow button (Features and Company preciously). If I click on the text of those menu items the drop down appears and disappears, which is awesome. The issue is when I click on the arrows, the drop menu doesn't appear or disappear. A fast fix to this one is to just make the drop down arrow and menu name in one container, and throw and event listener onto the entire component; therefore, no matter the user clicks the drop menu will appear and disappear. The second suggestion is to make a menu disappear or close when another one opens. So let us say if I click on the company menu while the features menu is open, the features menu should close and the focus should only be on the newly opened company menu. This could be achieved by creating an event listener that listens to clicks or events happening on the nav bar. Check if the click happened on a dropdown menu item. If the click happened on a dropdown menu item then give that item a special class name, let us say opened. Once you click a item it should be closed by removing that special class name. The addition of that class name should be associated / targeted with the CSS styling created for the drop down menu. Meaning once the click happens on that item, then the dropdown menu and its display, features and styling should appear, that is controlled by the whether the class name is added to the tag element or not. In the CSS target the class name is already targeted and the styling is added to it. The JS controls whether this item should have that class name with the styling or not. This is just an overall concept, the details is up to you and you checkout some implementations of this concept on YouTube most definitely.

  Haha at this point I am just nit picking man. Overall your work is super, and wish you the best in your career man.

  Congrates!

  Marked as helpful

  0

  ---

  

  cacosted•570

  @cacostedPosted about 2 years ago

  @ibra-san Thanks I didn't notice that the dropdown didn't work by clicking on the arrow, I'll check out this.

  1