🪲[Bug]: #2023
Description
🐛 Bug: Wrong hover underline on "Contact Us" button in navbar
Description
Hovering over the “Contact Us” navbar button shows a long full-width underline instead of the intended short centered yellow underline used for CTAs.
Steps to Reproduce
Open any page with the navbar (e.g. volunteer.html).
Hover over “Contact Us.”
See a full-width underline instead of the short centered one.
Expected Behavior
CTA navbar items should show a ~64px centered yellow underline, aligned with a 6px gap, and not shift on hover.
Environment
OS: Windows 10/11
Browser: Chrome 120+, also test Firefox/Edge
Root Cause
Two underline styles overlap:
#navbar a::after → full-width underline
.btn-underline::after → centered CTA underline
CTA links are still affected by the navbar selector or inconsistent padding.
Suggested Fix
#navbar a:not(.btn-underline)::after { ... }
Use display: inline-flex; align-items: center;
Ensure .btn-underline::after is centered:
left: 50%;
transform: translateX(-50%);
margin-top: 6px;
Please assign this issue to me.
I have a PR ready for resolving these issues.