Responsive Intro section with dropdown navigation

Community feedback

• 

  Elaine•11,400

  @elaineleungPosted over 2 years ago

  Hi Agbortoko, this is a great attempt I think! It's not an easy challenge because there are so many things to put together, but you did well on the whole, even though there are some things you'll need to fix.

  Firstly, I would not put the hero image and text under header; they should be part of the main tag since they are the contents of the website, and right now you have some accessibility issues in your report because you don't have a main tag. I would only put the logo and the nav/login elements in the `header.

  About how to position the hero image and the text content, I used display: flex with justify-content: space-between. You can try that and see whether that helps.

  Lastly, for the dropdown navs, you can check out the CodePen I made as a draft/practice for this challenge, and see whether that gives you some ideas on how to make your dropdowns: https://codepen.io/elaineleung/pen/OJvaWNz

  Complete version here: https://codepen.io/elaineleung/pen/poLpzge

  Marked as helpful

  1

  ---

  

  RabbitMaid•1,020

  @AgbortokoPosted over 2 years ago

  @elaineleung Wow thanks very much! Very helpful

  0
• 

  Afolarin Oyeleke•130

  @Fola-rinPosted over 2 years ago

  Hello there, I checked your solution and it was really nice. I'd say how you went about the dropdown menu works unless you mean making it animated. If so you can easily set this to your dropdown .hide { height: 0; transition: 200ms ease; overflow: hidden; } .show { height: $dropdown-height transition: 200ms ease; } This solution works best when you have a defined height, which in your case you can easily get the height by inspecting your dropdown. I also noticed you do not have an overlay background when one opens the mobile menu. I feel having an overlay improves the user experience and also you can make it clickable as well. This can be done by having a .bg class.

  <div class="bg" onclick={closeModal}></div> .bg { position: fixed; height: 100%; width: 100%; top: 0; left: 0; z-index: 1; } and then you can easily add this to your mobile-menu .mobile-menu{ z-index: 2; // all your other styles }

  Any ways I really liked your work. Well done. Hope I was able to help?

  Marked as helpful

  1

  ---

  

  RabbitMaid•1,020

  @AgbortokoPosted over 2 years ago

  @Fola-rin Thanks very much

  0