Enhancing Navbar Readability, Layout, and Responsiveness

[Safa-khanum]

Hello maintainers,

I would like to request to work on improving the navbar UI as part of my SWoC 2026 contribution.

After reviewing the current navbar (as shown in the attached screenshot), I noticed a few UI and UX issues that can be improved for better clarity and balance.

Issues observed:

• The dark gradient background reduces text and icon readability
• Navigation items (Home, About, Contact, RateUs, Contributors) feel unevenly spaced
• Icons and text alignment are not visually balanced
• The toggle/CTA element on the right does not stand out clearly
• Responsiveness can be improved for smaller screen sizes

Proposed changes:

• Improve contrast between the navbar background and text/icons
• Properly align logo, navigation links, and action elements
• Adjust padding and spacing for consistent visual hierarchy
• Enhance the visibility of the CTA / toggle button
• Ensure the navbar remains responsive and accessible across devices

Here is the issue screenshot:

This will be a frontend-only UI enhancement, with no backend or logic changes involved.

Please let me know if I can proceed with this issue.

Thank you,
Safakhanum
SWoC 2026 Contributor
Kindly add the SWOC label.

[github-actions]

Hello @Safa-khanum Thank you for creating a new issue! 🎉 Your issue is currently under review.
Please wait till the issue is reviewed and assigned.

[github-actions]

Congratulations, @Safa-khanum! 🎉 Thank you for creating your issue. Your contribution is greatly appreciated and we look forward to working with you to resolve the issue. Keep up the great work!

We will promptly review your changes and offer feedback. Keep up the excellent work! Kindly remember to check our contributing guidelines

[Amangp]

hi @apu52 ,
would you please assign this issue to me

[Safa-khanum]

Hi @Amangp would you please look for other issues , its raised by me