No JS. Did the mobile nav with CSS (hidden checkbox)
Design comparison
Solution retrospective
Does anybody have a better way of implementing the grey background in the top right? I originally added it by using absolute positioning and top/right 0, but it goes beyond the body. I set the body to 1440px as the design says but my screen is larger. I found a solution which was to apply a background to the grid cells using ::before and ::after, but it feels like a bit of a hack. Also, it wouldn't work if I wasn't using CSS grid.
Code: .grid::before { content: ""; background-color: hsl(207, 33%, 95%); grid-column: 2/3; grid-row: 1 /2; z-index: -999; }
.grid::after { content: ""; background-color: hsl(207, 33%, 95%); grid-column: 2/3; grid-row: 2 /3; height: 50%; border-radius: 0 0 0 50px; z-index: -998; }
Community feedback
- @adarshcodesPosted over 4 years ago
Hi @InterplanetaryDragon, Great work on this solution.
- You can try
background-image: url('image-path');background-repeat: no-repeat;background-position: top right; - There is a text visible 'Hidden checkbox to display or hide mobile menu'.
- There is a space on the both of side
1@InterplanetaryDragonPosted over 4 years ago@adarshcodes Hi, thank you for he feedback. I'll experiment with background-image.
I added 'Hidden checkbox to display or hide mobile menu'. for accessibility but didn't realise it was visibile. I'll hide it.
0 - You can try
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