Arshad Ali Kaldane• 650
@IamArshadAli
Posted
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 nearestrelative
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! 🤓
0