Responsive Design Issue: Side Menu Overlaps Content on Smaller Screens #6153
Description
Description
When viewing the website on smaller screens, the side menu overlaps with the main content, causing the links in the background to become unreadable and blend into the side menu. This issue does not occur on larger screens but significantly impacts usability on devices with smaller resolutions.
Steps to Reproduce:
Open the website on a smaller screen or use browser dev tools to simulate a smaller resolution.
Open the side menu.
Observe that the links in the background are not visible due to overlapping and blending issues.
Expected Behavior
The side menu should remain visually distinct from the main content, with proper contrast and alignment to ensure readability.
Actual Behavior:
The side menu overlaps with the main content, making it difficult to interact with the links.
Screenshots
Screen Recording
Screen.Recording.2025-01-04.at.4.18.20.PM.mov
Environment:
- Host OS: Mac OS
- Browser: Chrome
Contributor Resources and Handbook
The layer5.io website uses Gatsby, React, and GitHub Pages. Site content is found under the master branch.
- 📚 See contributing instructions.
- 🎨 Wireframes and designs for Layer5 site in Figma (open invite)
- 🙋🏾🙋🏼 Questions: Discussion Forum and Community Slack.
Join the Layer5 Community by submitting your community member form.