[Bug] : Inconsistent Navbar Layout and Styling Across Pages

[devmdave]

🐛 Bug: Inconsistent Navbar Layout and Styling Across Pages

Description

The navigation bar is not visually and structurally consistent across different pages of the application. While browsing between pages (e.g., Home, Compare, Find Project, Contact), differences can be observed in spacing, alignment, sizing, and overall appearance, resulting in an inconsistent user experience.

Current Behavior

• Navbar height and padding vary between pages.
• Navigation links are not consistently aligned.
• Button styles (e.g., GitHub button, theme toggle) may differ in positioning or spacing.
• Background, shadow, or transparency effects are not uniform across routes.
• Active page indication is either inconsistent or missing on some pages.

Expected Behavior

• A single reusable navbar component should be used across all pages.
• Consistent:
  • Height and vertical spacing
  • Link alignment and gap
  • Button sizes and styling
  • Background color/blur/shadow effects
  • Active navigation state
  • Responsive behavior across breakpoints
• The navbar should remain visually identical when navigating between pages, unless intentional state changes (e.g., active route highlighting) are applied.

Steps to Reproduce

1. Open the application.
2. Navigate between Home, Compare, Find Project, and Contact pages.
3. Observe differences in navbar layout and styling.
4. Compare the navbar appearance across routes.

Suggested Fix

• Refactor the navbar into a single shared component used by all pages.
• Centralize navbar styles using a common CSS/Tailwind utility class or component variant.
• Ensure active route styling is handled consistently using the router.
• Verify responsiveness and spacing across desktop and mobile layouts.

Screenshot

Acceptance Criteria

• Navbar layout is identical across all pages.
• Navigation link spacing and alignment are consistent.
• GitHub button and theme toggle maintain the same styling and position.
• Active page is clearly highlighted in a consistent manner.
• Responsive behavior remains consistent across all routes.
• No layout shift occurs when navigating between pages.

Priority: Medium
Type: UI/UX Bug

Kindly assign this issue to me under GSSoC'26 labels.

[github-actions]

Thank you for opening your first issue in DevPath.

Please make sure to:

• Read CONTRIBUTING.md
• Wait for assignment before starting work
• Follow repository guidelines carefully

Happy contributing.

[adityasingh511]

/assign gssoc