Skip to content
Submitted over 2 years ago

Intro section with dropdown navigation bar

Juca Perez•270
@jucajulian0907
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Intro section with dropdown navigation
  • HTML
  • CSS
  • JS
2junior

Design comparison

SolutionDesign

Solution retrospective

I have learned how it works and how to make a responsive navigation bar with javascript, I leave here the solution to this challenge. I couldn't think of another way to add the shading to the body when the side navigation bar is active, if anyone has any tricks and can teach me, I'd be very welcome! Cheers!

Community feedback

  • Elaine•11,400
    @elaineleungPosted over 2 years ago

    Hi Juca, good work on this challenge and also in learning how to put it together. About the overlay, I see that you have it but I'm not sure which container it's in, and for some reason it looks like it's there in the screenshot. Anyway, ideally the overlay should have position: fixed in order to fill the entire viewport. I have an example on CodePen that you can check out here: https://codepen.io/elaineleung/pen/poLpzge

    I've also completed this challenge but I wrote it in React and not plain JS; feel free to check it out also if you're interested.

    Good luck!

    Marked as helpful
    1
    Juca Perez•270
    @jucajulian0907Posted over 2 years ago

    Hello Elaine! Thank you very much for your comment! The overlay is made based on the box-shadow property of the lateral negation container, I see in your codepen example that you have done it basically the same and I am happy, of course my code lacks a lot of optimization. Previously I was looking for a way to do it with javascript but I have not been able to. Thanks again for your feedback, it has helped me a lot!

    1
    Elaine•11,400
    @elaineleungPosted over 2 years ago

    @jucajulian0907 Glad to help! Yes, I did have a box shadow, but it was more for the nav bar when it slides out, and I quite like that effect as well; the overlay itself just uses an opacity, which is something I rely on a lot. Also, I meant position:fixed for the overlay (I just fixed the comment above as well, no pun intended), but of course position:absolute works as well, depending on which object it's anchored to. Good luck working on that overlay 🙂

    Marked as helpful
    1
  • Rafael Macedo•30
    @strael12Posted over 2 years ago

    Your ul or ol tag should take just li, but your project is pretty nice, thanks for share.

    Marked as helpful
    0
    Juca Perez•270
    @jucajulian0907Posted over 2 years ago

    @strael12 Hi, thanks for your advice, I'll take note. Regards!

    1

Please log in to post a comment

Log in with GitHub

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