Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

News Homepage Solution (HTML, CSS, JS)

@Leskim

Desktop design screenshot for the News homepage coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
2junior
View challenge

Design comparison


SolutionDesign

Solution retrospective


Any feedback on majorly how I would have tackled the mobile navbar to have an overlay when open and no vertical scroll showing the rest of the page will be greatly welcomed.

Thanks 🤜🏽

Community feedback

KiddAlexx 150

@KiddAlexx

Posted

Nice work! Looks really good!

To lock vertical scroll when the menu is out you can create a class such as:

.lock-scroll {
  overflow: hidden;
}

and then toggling this class on the body.

For mine I added a blur as opposed to the overlay shown in the design, but this could be achieved using something like the following: W3Schools-How TO - Overlay

I hope that is of some help :)

Marked as helpful

0

@Leskim

Posted

@KiddAlexx Thanks🤝🏾 ..I've added the edits just researching on how to add a bit of animation when the navigation opens up

1

Please log in to post a comment

Log in with GitHub
Discord logo

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