Responsive Bug: Navigation Links Overflow Horizontally on small screen devices

[ravikumar-prajapati-14]

Description

The navigation bar is not fully responsive on smaller screen sizes.

On mobile devices, navigation items overflow horizontally instead of adapting to the available viewport width. This affects usability and may prevent users from accessing navigation links properly.

Areas for Improvement

Mobile Navigation Responsiveness

The navigation menu should adapt correctly to smaller screen sizes.

Possible improvements include:

• Implementing a hamburger menu for mobile devices
• Preventing horizontal overflow of navigation items
• Improving navbar alignment and spacing
• Ensuring all navigation links remain accessible
• Maintaining consistency across different screen sizes

Steps to Reproduce

1. Open the application on a mobile device or responsive browser view.
2. Navigate to the homepage.
3. Observe the navbar section.

Expected Behavior

• Navigation items should fit within the viewport.
• The navbar should remain fully usable on mobile devices.
• No horizontal overflow should occur.

Actual Behavior

• Navigation links overflow horizontally.
• The navbar exceeds the viewport width.
• Mobile usability is affected.

Expected Outcome

• Fully responsive navigation bar
• Improved mobile user experience
• No horizontal scrolling caused by navbar elements
• Consistent layout across screen sizes

Screenshots

Desktop View

Mobile View

[ravikumar-prajapati-14]

Hi @Pushkarini579 ,

I would like to work on this issue under GSSoC'26.

I identified a mobile responsiveness issue in the navbar where navigation items overflow on smaller screens. I can fix the layout and ensure proper responsiveness while maintaining the existing design.

I have attached screenshots for reference.

Please assign this issue to me.

Thank you!