Skip to content
Submitted over 2 years ago

Responsive landing page with mobile menu animation

Trevor Merrick•150
@tmerrick17
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Agency landing page
  • HTML
  • CSS
  • JS
2junior

Design comparison

SolutionDesign

Solution retrospective

I was pretty happy with this one.

The only thing is I wanted the mobile menu to go back up after I scroll down a little first. Right now, when you push the hamburger, the menu comes down, but when you scroll down, right away it goes back up, I wanted to scroll down say 200px and THEN it goes back up.

Anyway super fun to replicate and used CSS flex and CSS grid a lot.

Community feedback

  • Anna Leigh•5,135
    @brasspetalsPosted over 2 years ago

    Hi, Trevor! Congrats on completing another solution!

    If you use window.scrollY>=400 rather than window.scrollY=400 in your scroll event listener, it should work. Remember, one equals sign is not "equality" in JS. While using "===" should also work, the behavior you're really going for is to have the mobile menu move back up if the user has scrolled up to or past 400, so I think >= is better used here.

    Marked as helpful
    0
    Trevor Merrick•150
    @tmerrick17Posted over 2 years ago

    @brasspetals Worked like a charm...you rock!

    1
    Anna Leigh•5,135
    @brasspetalsPosted over 2 years ago

    @tmerrick17 Awesome! Glad it worked! 😄

    0

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