Skip to content
Submitted 12 months ago

Tailwind Hero Section with Drop Down Menu

tailwind-css, nuxt
Marvin Ranyaole•150
@VaalGeek
A solution to the Intro section with dropdown navigation challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

What are you most proud of, and what would you do differently next time?

I'm proud that for the 1st time, I was able to create a drop down menu without calling it from a build it class of any material ui library. I should stop assuming that I fully understand concepts.

What challenges did you encounter, and how did you overcome them?

Z index, I thought I understand how it works, but it was until I had to put it into practice with other components and with other classes that I realized that I don't fully understand.

Code

Please log in to post a comment

Log in

Community feedback

  • Koda👹•3,830
    @kodan96

    hi there! 👋

    z-index is a tricky property, because sometimes the rendering of the elements depend on the parent container's z-index or position properties. sometimes z-index will not make any difference if you apply it an element with static positioning. if you struggle with z-index, try to apply position: relative; or any other than static (which is the default) positioning to elements. I had a rally hard time figuring this out when I first created a semi-transparent overlay. elements with higher z-index just wouldn't appear above the overlay. then I just applied relative positioning to them and boom.

    the other thing is the isolation property, which also can mix things up, because if you apply isolation: isolate; to the parent element that will create an entirely new stacking context.

    So just check the position attributes of the elements if you get stuck with z-index, and make sure you don't apply isolation to parent elements unnecessarily.

    Hope this helped 🙏

    Good luck and happy coding! 🙌

    Marked as helpful
  • Marvin Ranyaole•150
    @VaalGeek

    @koda, but here is another question that has been bothering me, when it comes to the use of Z Index, inside the parent component, the Z index does not work when applied to child components within the parent component (page), you will have to apply it on child components respectively, why is that if you have any clue?

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