Skip to content
Submitted about 3 years ago

Responsive dropdown navbar using pure CSS

Rendrol•80
@Rendrol
A solution to the Intro section with dropdown navigation challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

In order to finish this site in pure CSS, I used a hacky way to make the animation slide effect by hiding the menu on the right side of the viewport and disabling the scroll x. I wonder if there is any better solution to make the animation slide effect on mobile?

Code

Please log in to post a comment

Log in

Community feedback

  • Cats-n-coffee•670
    @Cats-n-coffee

    Hi Rendrol!

    Nice solution overall! Your mobile sliding menu could use the 'left' CSS property (https://developer.mozilla.org/en-US/docs/Web/CSS/left), but transition 'translateX' is also a good option I think. Maybe you could use 'width', but that might give a different effect (?, you'll have to try).

    The responsiveness breaks around 375px, and everything looks good again around 1200px I believe. You could add another breakpoint for tablets, or switch your logic using min-width and keep the mobile layout for larger viewports? There are many solutions for this.

    The "Learn more" button is missing a 'cursor: pointer' and hover state (I'm sure you forgot). The div with a class of 'main' could actually be a 'main' html element.

    Hope that helps! Good work!

    Marked as helpful

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