💡[Feature]: Enhance Responsiveness & Accessibility of Navbar

[sonali131]

Is there an existing issue for this?

• I have searched the existing issues

Feature Description

Currently, the website navbar works fine on desktop, but the responsiveness and accessibility can be improved for mobile and tablet devices. On smaller screens, some items are overlapping or not aligned properly, and there is no proper focus/hover effect for keyboard navigation.

Suggested Enhancements:

Improve mobile responsiveness (hamburger menu alignment, smooth animation).

Ensure accessibility compliance (ARIA roles, focus states, tab navigation).

Add hover & active state animations for better UX.

Test across multiple breakpoints (320px, 768px, 1024px).

Why Important?
This will significantly improve the user experience and accessibility of the site, ensuring the navbar is intuitive and professional on all screen sizes.

Labels:
gssoc25 hacktoberfest-accepted level 3 area:UI

Use Case

A user accessing the website on a mobile device or using keyboard navigation will have a smoother, more professional, and more inclusive experience. This feature ensures the site is usable for a wider audience.

Benefits

Better cross-device usability (desktop, tablet, mobile).

Improved accessibility compliance (useful for differently-abled users).

More professional look & feel with smooth animations.

Enhances the overall reputation of the project in terms of quality 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.

[sonali131]

@sanjay-kv This issue is related to Frontend UI/UX improvement and should be considered as a level 3 feature. Kindly update the label accordingly. 🙏

[risrajawat]

/assign

[sanjay-kv]

can i see what you are planing to implement

[risrajawat]

@sanjay-kv Sure! I plan to improve mobile/tablet responsiveness, add proper ARIA roles, focus/tab navigation, and smooth hover/active animations for the navbar.

[sanjay-kv]

@risrajawat raise a new issue for this

[risrajawat]

@sanjay-kv As suggested, I’ve raised a new issue for the navbar responsiveness & accessibility improvements: #688
please check and assign me this one.

[github-actions]

✅ This issue has been closed. Thank you for your contribution!