Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

🐞[bug]: Navbar Design and Responsiveness Improvement #886

Open
4 tasks done
ShaliniKashyap717 opened this issue Jan 31, 2025 · 1 comment
Open
4 tasks done

🐞[bug]: Navbar Design and Responsiveness Improvement #886

ShaliniKashyap717 opened this issue Jan 31, 2025 · 1 comment
Labels
bug Something isn't working enhancement New feature or request SWOC

Comments

@ShaliniKashyap717
Copy link

Is there an existing issue for this?

  • I have searched the existing issues

Describe the bug

Description:

The current navbar design on the Retro website can be improved to enhance its visual appeal and usability. Below are the identified issues:

  1. The navbar is not positioned at the top of the page as expected.
  2. The navbar edges are curved, which does not convey a professional look.
  3. There is an unintended margin above the navbar that disrupts the layout.
  4. The navbar text is too large, making it visually overwhelming.
  5. The overall size of the navbar is excessively large.
  6. The navbar lacks proper responsiveness across different screen sizes.

Proposed Solution:

I will refactor the navbar to:

  • Ensure it is fixed at the top without any unwanted margin.
  • Modify the edges to a sharper, more professional style.
  • Adjust text and overall navbar size to be more visually balanced.
  • Improve responsiveness to ensure a seamless experience across various screen sizes.

This enhancement will significantly improve the website's user interface, providing a cleaner and more professional appearance.

Labels: Please assign intermediate and SWOC labels.

Expected behavior

Expected Behavior:
The navbar should have the following improvements after the proposed changes:

  1. The navbar is fixed at the top of the page without any unnecessary margins.
  2. The navbar edges are sharp and professional-looking.
  3. Text and overall navbar size are visually balanced.
  4. The navbar is fully responsive across all screen sizes, providing a smooth and user-friendly experience.

Add ScreenShots

Image Image

What browsers are you seeing the problem on?

Chrome

Record

  • I have read the Contributing Guidelines
  • I'm a SWOC contributor
  • I have starred the repository
@github-actions github-actions bot added SWOC enhancement New feature or request labels Jan 31, 2025
Copy link

Hi there! Thanks for opening this issue @ShaliniKashyap717!. We appreciate your contribution to this open-source project. We aim to respond or assign your issue as soon as possible.If belong's to SWOC program role ur self as Contributor in OS lead site Link : https://www.oslead.xyz/usertype , so that ur points will be assigned to the leaderboard. New to Open Source Contribution check out the below YT video , Happy Coding🚀💻🐛 🔗 Link : https://www.youtube.com/watch?v=3afUKB3guZA

@github-actions github-actions bot added the bug Something isn't working label Jan 31, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working enhancement New feature or request SWOC
Projects
None yet
Development

No branches or pull requests

1 participant