Improve navbar scroll behavior, alignment, and active menu states #264
Description
Problem
The main navigation bar currently:
- Scrolls away instead of staying visible
- Keeps the same vertical height even after scrolling which doesn't appear good
- Right-aligns all desktop menu items instead of centering them (except CTA)
- Only marks menu items as active on exact route matches, not child routes
These points are also mentioned in the TODO comment in the navbar component.
Proposed changes
- Make the navbar fixed at the top after scrolling
- Reduce vertical padding when the page is scrolled
- Center desktop navigation items while keeping the "Get involved" CTA right-aligned
- Mark a top-level menu item as active when a child route is active
Status
I have implemented these changes locally and submitting a PR if this approach looks good.
Let me know if you’d like any adjustments.
