Preliminary Check

• I have searched the existing issues
• This issue is reproducible

Bug Summary

Bug Summary

While checking the GlassyUI website on mobile view, I noticed that the navbar is not fully responsive. The navigation links overflow horizontally, and the "Contact Us" section gets partially cut off on smaller screens.

I expected the navbar items to adjust properly within the mobile screen width, but instead some items move outside the viewport.

Steps to Reproduce

1. Open the GlassyUI website
2. Switch to mobile view using browser DevTools or open on a mobile device
3. Navigate to the homepage
4. Observe the navbar layout on smaller screen sizes

Expected Behavior

• Navbar items should fit properly within the mobile screen width
• Navigation links should wrap, collapse, or align responsively
• "Contact Us" section should remain fully visible

---

Actual Behavior

• Navbar links overflow horizontally
• Some items move outside the viewport
• "Contact Us" section appears partially cut off

---

Possible Cause

• Missing responsive flex wrapping or media query adjustments
• Navbar width/padding may exceed mobile viewport size
• Improper handling of overflow in smaller breakpoints

---

Suggested Fix

The navbar is currently using a fixed flex layout with larger gaps and margins:

justifyContent: 'space-around'
marginRight: '50px'
gap: '20px'

Because of this, the navbar items overflow on smaller screen sizes and some sections like "Contact Us" get partially hidden.

This can be improved by:

• Adding responsive media queries
• Reducing spacing on smaller screens
• Using flex-wrap
• Adjusting alignment for mobile view
• Optionally adding a hamburger menu for better responsiveness

Example:

const navStyle: React.CSSProperties = {
  display: 'flex',
  flexWrap: 'wrap',
  justifyContent: 'space-between',
  alignItems: 'center',
};

const ulStyle: React.CSSProperties = {
  display: 'flex',
  flexWrap: 'wrap',
  gap: '10px',
};

This may help keep all navbar items inside the viewport on mobile devices.

Screenshots/Logs

Additional Information

• I agree to follow this project's Code of Conduct
• I'm a GSSOC'24 contributor
• I want to work on this issue
• I can provide more details if needed