[Feature]: Improve navbar responsiveness across all devices

[Dippp10-ally]

[ISSUE FORM] Pre-Submission Checks

• I have searched the existing issues and confirmed this request has not been raised already.
• I am willing to work on this issue if needed.

[ISSUE FORM] Contribution Program

GSSoC 2026

[ISSUE FORM] Difficulty Level

Intermediate

[ISSUE FORM] Problem Description

The current navbar does not provide a consistent experience across different screen sizes. On tablets and mobile devices, navigation items may become crowded, wrap unexpectedly, or be difficult to access. This affects usability and makes navigation less intuitive for users.

Improving the navbar's responsiveness will ensure a seamless navigation experience across desktop, tablet, and mobile devices.

[ISSUE FORM] Expected Solution

Implement a fully responsive navbar that adapts to different screen sizes by:

• Adding a mobile-friendly hamburger menu or navigation drawer.
• Ensuring proper spacing and alignment of navigation links.
• Preventing overlapping or overflowing navigation items.
• Improving touch targets for mobile users.
• Adding smooth transitions for opening and closing the mobile menu.
• Maintaining consistent styling across all breakpoints.
• Ensuring keyboard accessibility and proper focus states.

[ISSUE FORM] Alternatives Considered

Reducing the number of navigation links on smaller screens.

• Wrapping navigation items into multiple rows.
• Using a horizontal scrollable navigation menu.

These approaches improve specific cases but do not provide the same user experience as a fully responsive navigation menu.

[ISSUE FORM] Mockups, Screenshots, or References

Mockups, Screenshots, or References
No mockups are available at the moment.

Suggested references:

• Responsive navigation patterns used by modern websites.
• Mobile-first navigation with a collapsible hamburger menu.

[ISSUE FORM] Additional Context

The implementation should preserve the existing design language while improving responsiveness and accessibility. It should be tested across common desktop, tablet, and mobile screen sizes to ensure there are no layout issues, overflow, or horizontal scrolling.

[Dippp10-ally]

@Vaibhav-kesarwani ji , do assign above issue number 198 to me also....do assign labels called as gssoc:approved, level:intermediate, type:feature , quality:exceptional to above issue number 198 also....