💡[Feature]: Enhance mobile/tablet responsiveness and accessibility of navbar

[risrajawat]

Is there an existing issue for this?

• I have searched the existing issues

Feature Description

The current navbar works fine on desktop, but on smaller screens (mobile/tablet) the responsiveness and accessibility need improvement. Some elements overlap or misalign, and there’s limited support for keyboard navigation.

Proposed Enhancements

• Improve mobile/tablet responsiveness: adjust hamburger menu alignment, smooth open/close animation.
• Add proper ARIA roles for better accessibility compliance.
• Ensure keyboard focus/tab navigation with visible focus states.
• Add smooth hover & active state animations for better UX.
• Test layout across breakpoints (320px, 768px, 1024px).

Use Case

A user accessing the website on a mobile device or via keyboard navigation will have a smooth, intuitive, and accessible navbar experience.

• Better cross-device usability.
• Improved accessibility compliance.
• Professional look and smoother UX.
• Wider audience reach and inclusivity.

Benefits

• Better cross-device usability.
• Improved accessibility compliance.
• Professional look and smoother UX.
• Wider audience reach and inclusivity.

Add ScreenShots

No response

Priority

High

Record

• I have read the Contributing Guidelines
• Are you a GSSOC'25 contributor
• I want to work on this issue

[github-actions]

Thanks for opening this issue! 🎉 We'll look into it as soon as possible, estimated time for response is 5–8 hrs.

Don't raise PR unless assigned to you.

In the meantime, please provide all necessary details and context to your issue — screenshots or videos of your changes help speed up the review and assignment. If you have questions, reach out to LinkedIn. Your contributions are highly appreciated!😊

Note: I maintain the repo issue every day twice at 8:00 AM IST and 9:00 PM IST. If your issue goes stale for more than one day, you can tag and comment on this same issue by tagging @sanjay-kv.

We are here to help you on this journey of open source. Consistent contributions are eligible for sponsorship 💰

🎁 check our list of amazing people we sponsored so far: GitHub Sponsorship. ✨

📚Resources which can help you know more about Github 👇🏻

1. End to End GitHub Beginner Playlist: GitHub Playlist.

2. Build your GitHub Profile: GitHub Profile Optimisation.

3. GitHub Handbook for dummies: GitHub Blog for Beginners.

[github-actions]

👤 Issue assigned to @risrajawat.