Fix : Navbar Alignment and Navbar Responsiveness for Medium Devices

[ShaliniKashyap717]

Pull Request Template

Summary

This pull request resolves responsiveness and alignment issues in the navbar:

• Overlapping of Mobile Menu Icon: On screens below 1175px width, the mobile menu icon overlapped with the expanded navbar items. This was fixed using media queries and an id selector within a div component to ensure proper spacing and alignment.
• Missing Navigation Items: On PC and desktop views, some navigation items were not visible. Adjustments were made to ensure all items are displayed correctly across all screen sizes.
  These changes were motivated by the need to improve the overall look and usability of the website, ensuring a responsive and user-friendly experience for all device sizes.

Fixes #389 #388

Type of Change

Please mark [X] for applicable items:

• [ x] Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to not work as expected)
• Documentation update
• Code refactoring
• Other (please describe):

Testing

To verify the changes, the following tests were performed:

1. Screen Width Below 1175px:

• Observed the alignment issues and overlapping of the mobile menu icon with the expanded navbar items.
• Applied media queries to address this issue, ensuring that the mobile menu icon does not overlap with other elements.
• Used a div component with an id selector to prevent overlapping, maintaining the overall visual consistency of the website.

2. Navigation Item Visibility:

• Identified that some navigation items were not displayed correctly on the screen, particularly for PC and desktop views.
• Adjusted the layout to ensure all navigation items are properly displayed, improving accessibility and user experience.

3. Cross--Device Testing:

• Tested the navbar on various devices and screen sizes (mobile, tablet, and desktop) to confirm consistent responsiveness and alignment across all breakpoints.
• Verified that the fixes maintain the original aesthetic and functionality of the website without introducing new issues.
• The navbar now adapts seamlessly to all screen sizes, with no overlapping elements or missing navigation items.

Screenshots/Videos

I am attaching some screenshots of the changes in the layout.

Before

After

_

Checklist

Please mark [X] for completed items:

• [ x] My code follows the project's style guidelines
• [x ] I have performed a self-review of my code
• [ x] I have commented my code, particularly in hard-to-understand areas
• [ x] I have updated the documentation accordingly
• [x ] My changes generate no new warnings
• [ x] I have added tests that prove my fix is effective or that my feature works

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
coffee-shop	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jan 25, 2025 8:41pm

[github-actions]

Thank you for your contribution! 🎉

PR Checklist

• Tests added/updated
• Documentation updated
• Changes follow coding standards
• Commit messages are clear

Next Steps

1. We will review your PR soon
2. Address any requested changes
3. Once approved, your PR will be merged

Need help? Check our Contributing Guide

Happy coding! 💻

[ShaliniKashyap717]

@Mujtabaa07 Hello there, I hope this message finds you well. I wanted to kindly inquire if the submitted PR is likely to be merged. If there are any concerns or suggestions for improvement, I am more than happy to make the necessary adjustments to align with the project's standards and expectations.

Thank you for taking the time to review my contribution. I look forward to your feedback.