Skip to content

Fix: Enhance Navbar Text Visibility with Brighter Hover Color #114#125

Open
priyanshu1044 wants to merge 1 commit intoDeadmanAbir:mainfrom
priyanshu1044:fix-navbar-hover-effect
Open

Fix: Enhance Navbar Text Visibility with Brighter Hover Color #114#125
priyanshu1044 wants to merge 1 commit intoDeadmanAbir:mainfrom
priyanshu1044:fix-navbar-hover-effect

Conversation

@priyanshu1044
Copy link
Copy Markdown

Fix #114 Improve Navbar Hover Interaction

Summary

This PR updates the hover effect styles for navigation links in the main-nav.tsx component to enhance visual feedback and improve user interaction.


Changes Made

  • Updated hover text color to use text-primary instead of text-foreground/80
  • Increased font weight on hover using hover:font-medium for a bolder feel
  • Enhanced background color on hover:
    • Light mode: hover:bg-neutral-100
    • Dark mode: hover:dark:bg-neutral-700
  • Added a bottom border highlight on hover: hover:border-b-2 hover:border-primary
  • Retained spacing and rounded corners for consistent design: px-2 py-1 rounded-lg

These changes apply to:

  • All main navigation links
  • The "Contact Us" mail link

Why This Matters

  • Improves accessibility and UX by making hover state more visually distinct
  • Creates a more modern, polished look
  • Aligns hover behavior across all navigation elements for consistency

Files Updated

  • src/components/main-nav.tsx

In Light Mode
This pull request includes changes to the src/components/main-nav.tsx file to enhance the visual styling of navigation items and the "Contact Us" link. The most important changes include updating the hover effects to improve user experience.

Styling improvements:

In Dark Mode
image

@vercel
Copy link
Copy Markdown

vercel bot commented Apr 11, 2025

@priyanshu1044 is attempting to deploy a commit to the Sanjay Dutt's projects Team on Vercel.

A member of the Team first needs to authorize it.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Enhance Navbar Text Visibility with Brighter Hover Color

1 participant