Correct Navbar Misalignment on Small Screens (#396)

[dipexplorer]

Fixes #396

This PR addresses issue #396, where the navbar elements become misaligned and overlap on small screens, negatively affecting both the visual appearance and functionality of the navigation. The fix ensures that the navbar remains well-aligned and fully functional across all screen sizes, with special attention to small screens and mobile devices.

Changes Made

• Adjusted CSS media queries to make the navbar responsive across all screen sizes, ensuring alignment on small screens.
• Fixed the toggle button functionality to collapse and expand the menu without affecting the positioning of other navbar elements.

Testing Instructions

1. Pull this branch.
2. Run npm install to install dependencies.
3. Run npm test to execute the test suite.
4. Verify that ...

Screenshots (if applicable)

](https://github.com/user-attachments/assets/626bb181-c06c-46aa-8300-ed782c5f0ba5)

Checklist

• I have performed a self-review of my code
• I have commented my code, particularly in hard-to-understand areas
• My changes generate no new warnings
• I am working on this issue under GSSOC

[vercel]

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

Name	Status	Preview	Comments	Updated (UTC)
wanderlust-2024	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Nov 6, 2024 3:56pm

[github-actions]

Thank you for submitting your pull request! 🙌 We'll review it as soon as possible. In the meantime, please ensure that your changes align with our CONTRIBUTING.md. If there are any specific instructions or feedback regarding your PR, we'll provide them here. Thanks again for your contribution! 😊

[Soujanya2004]

@dipexplorer screenshot

[dipexplorer]

06.11.2024_21.10.03_REC.mp4