Responsive Design Issue: Side Menu Overlaps Content on Smaller Screens

[FaheemOnHub]

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.

[FaheemOnHub]

@leecalcote Could you please assign me this?