Problem
On screens narrower than 768px, the LearnSphere navbar has no mobile adaptation. All navigation links and auth buttons render in a single horizontal row that overflows the viewport, making navigation impossible without horizontal scrolling.
Current Behavior
- Nav links and "Log in / Sign up" buttons overflow off-screen on mobile
- No hamburger menu or collapsible navigation exists
- Horizontal scrollbar appears on narrow screens
- Keyboard users cannot access nav links reliably
Why This Improvement Is Needed
Over 60% of web traffic comes from mobile devices. A broken navbar on mobile means the majority of potential users cannot navigate the platform. This is a critical UX issue.
Proposed Solution
- Add a
.hamburger button (3-line icon) visible only on mobile via @media (max-width: 768px)
- Nav slides in below the header when toggled
- Hamburger animates into X when open (CSS transform)
- ARIA:
aria-expanded, aria-controls, aria-label on toggle button
- Escape key closes menu and returns focus
- Nav links auto-close menu on click
Expected Outcome
A smooth, accessible mobile navigation experience. No overflow on any screen size.
Problem
On screens narrower than 768px, the LearnSphere navbar has no mobile adaptation. All navigation links and auth buttons render in a single horizontal row that overflows the viewport, making navigation impossible without horizontal scrolling.
Current Behavior
Why This Improvement Is Needed
Over 60% of web traffic comes from mobile devices. A broken navbar on mobile means the majority of potential users cannot navigate the platform. This is a critical UX issue.
Proposed Solution
.hamburgerbutton (3-line icon) visible only on mobile via@media (max-width: 768px)aria-expanded,aria-controls,aria-labelon toggle buttonExpected Outcome
A smooth, accessible mobile navigation experience. No overflow on any screen size.