Snap dropdown

Community feedback

• 

  Arshad Ali Kaldane•650

  @IamArshadAli

  Posted over 1 year ago

  Hello there! 👋

  Congratulations on completing this Challenge. 🎉

  I do have some suggestions that might interest you. 💡

  • To fix your dropdown menu, you can follow this:

  .dropdown-menu {
      ...
      min-width: 9rem;     // dynamic width to your dropdown
      position: absolute;   // to ensure absolute positioning to a relative parent
      margin-top: 2rem;   //  adds some space between the dropdown and the link
      padding: 2rem;
      ...
  }
  

  • Also your dropdown menu's position is set to absolute but it doesn't have any ancestor, due to which the menu will use the document body, and move along with page scrolling. Fix it by specifying the nearest relative parent like this:

  .navbar .container .main-menu ul li {
      position: relative;
  }
  

  • Now you can position your features dropdown as shown in the design like this:

  .features-menu {
      right: 0;
  }
  

  • One more tip: use CSS variables to reduce redundantly writing implicit values. For example:

  :root {
    --clr-almost-white: hsl(0, 0%, 98%);
    --clr-medium-gray: hsl(0, 0%, 41%);
    --clr-almost-black: hsl(0, 0%, 8%);
  }
  
  .navbar .main-menu ul a {
    color: var(--clr-medium-gray);
    ...
  }
  

  Now you can use these variables anywhere in your CSS file and you'll only need to change the values at one place and it will affect all other places in the code.

  Hope this helps to solve your problems. 🚀

  Happy Coding! 🤓

  00