Submitted almost 2 years ago

Responsive landing page with mobile menu animation

#sass/scss

Trevor Merrick• 150

@tmerrick17

Preview site View code

This is a solution for...

Sunnyside agency landing page

HTML
CSS
JS

2junior

View challenge

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

@brasspetals

Posted almost 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

Trevor Merrick• 150

@tmerrick17

Posted almost 2 years ago

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

Anna Leigh• 5,135

@brasspetals

Posted almost 2 years ago

@tmerrick17 Awesome! Glad it worked! 😄

Please log in to post a comment

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