Fix Responsiveness for Navigation Bar on Mobile Devices

[JollyJolli]

The navigation bar is not displaying properly on mobile devices. It looks really messy and doesn't adjust to smaller screens. We need to improve the responsiveness to ensure a better user experience on mobile.

Expected Behavior

• The navigation bar should adapt seamlessly to different screen sizes.
• It should look clean and organized on mobile devices.

Current Behavior

• On mobile, the navigation bar becomes cluttered and does not fit properly on the screen.
• The layout is inconsistent and makes it hard to navigate.

Steps to Reproduce

1. Open the site on a mobile device (or use dev tools in your browser to simulate a mobile screen).
2. Observe how the navigation bar appears.
3. Notice the poor layout and unresponsiveness.

---

📷 Screenshot

Add a screenshot here to illustrate the issue:

---

📋 Task List

• Ensure the navigation bar scales correctly on mobile.
• Use media queries to handle screen sizes under 768px.
• Test responsiveness on multiple devices (phones, tablets).
• Make sure no content is cut off or distorted.
• Ensure the navigation buttons or links are easily clickable.
• Verify alignment and spacing across different mobile resolutions.

---

💡 Potential Solutions

• Consider using flexbox or grid for better layout control.
• Refactor the CSS to include proper media queries for mobile views.
• Add a hamburger menu if needed to simplify the design on smaller screens.

---

Additional Context

This issue is only observed on mobile devices. On desktop, the navigation bar looks great. We need to make sure it’s just as good on mobile!

---

Let me know if you need anything

[PAVAN507-STAR]

Hii @JollyJolli I would like to work on this.Can u assign this to me?

[JollyJolli]

Happy contributing!