[BUG] Navbar is not in proper alignment.

[ShaliniKashyap717]

Description

The current navbar design in the coffee shop project has a few usability and design issues:

1. Improper Alignment: The tabs (e.g., Home, About, Contact etc.) are not aligned properly, leading to an inconsistent appearance.
2. Spacing Issues: The spacing between the navbar items is uneven, which affects the overall readability and aesthetics.
3. Oversized Navbar: The navbar occupies too much vertical space, making it distracting and reducing the focus on the content below.

Proposed Solution:

1. Adjust the alignment of the navbar items to ensure proper distribution and consistent spacing.
2. Revisit padding and margins to make the spacing between items more visually appealing.
3. Reduce the height of the navbar to make it less intrusive while maintaining accessibility and functionality.
4. Test for responsiveness on different screen sizes to ensure the navbar adapts well across devices.

I will ensure the design aligns with the theme and style of the coffee shop project. So kindly assign it to me under SWOC label.

Screenshots

Any additional information?

No response

What browser are you seeing the problem on?

Chrome

[Mujtabaa07]

Welcome @ShaliniKashyap717! 🌟

Thank you for opening This issue! We're excited to have you here.

A few quick things:

• 📝 Please check if this issue has been reported before
• ✅ Follow our issue template if provided
• ⏳ We'll review your issue as soon as possible

Need help? Check our Contributing Guidelines
Keep coding! 💻

[ShaliniKashyap717]

can u please assign this issue to me

[Mujtabaa07]

@ShaliniKashyap717 assigned

[ShaliniKashyap717]

I have added the PR, please check. I have resolved 2 of the issues in a single PR.