One thing I found difficult for this project was making the mobile menu's grey/black overlay extend the whole height of the page. I currently have the height as a variable in JS that calculates the window's height, but are there any better solutions for this?
@coderboi559
Posted
Hello, with the overlay and mobile menu. You can use position: fixed to cover everything up. Using media queries if you want it just for mobile. Overall pretty good job. I would use display: grid; to line everything up. Make 3 grid-columns and align everything according to the design to make it look cleaner.
Marked as helpful
@amalkarim
Posted
Hi Amya,
That's an interesting solution.
If you want to make the overlay extends the whole height of the page, there's approach other than using javascript. I don't know if this is better solution or not, but I think it's more concise. Just add this to the existing style:
body {
...
position: relative;
}
.menu-overlay {
....
height: 100%;
}
Change height of navigation mobile too:
nav.navigation.mobile {
...
height: 100%;
}
That's it. Hope this helps. Happy coding!
Marked as helpful
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
