Dropdown menus on Services and Industries nav items are unclickable #132

New Issue

Closed

opened 2026-05-18 09:10:21 -05:00 by null · 0 comments

null commented

2026-05-18 09:10:21 -05:00

Owner

Bug

The dropdown menus that appear under Services and Industries in the desktop header navigation cannot be clicked. Hovering reveals the menu, but moving the cursor from the nav link into the dropdown causes the menu to close before any item can be clicked.

Root Cause

In src/components/layout/Header.jsx, the dropdowns use pure CSS group-hover with a mt-2 (8px) gap between the nav link and the dropdown panel. When the cursor crosses this gap, the group-hover state is lost and the menu closes immediately.

<div className="relative group">
  <Link ...>{link.name}</Link>
  <div className="... hidden group-hover:block">  {/* mt-2 gap kills hover */}
    ...
  </div>
</div>

Fix Options

Replace mt-2 gap with padding — use pt-2 on an invisible hover bridge or top-full without margin, with internal padding so the hover zone is contiguous
Use @radix-ui/react-navigation-menu or a proper dropdown component with click/hover state logic instead of pure CSS
Add an invisible hover bridge — a ::after pseudo-element or padding-top zone that fills the gap

Option 1 or 3 is the quickest fix. Option 2 is the most robust long-term.

Steps to Reproduce

Go to any page on the site
Hover over "Services" or "Industries" in the top nav
Try to move the mouse down to click a dropdown item
Menu closes before the cursor reaches it

Environment

Desktop browsers (all) — the issue is in the CSS hover logic
Mobile nav (Sheet) is unaffected since it uses a different layout

## Bug The dropdown menus that appear under **Services** and **Industries** in the desktop header navigation cannot be clicked. Hovering reveals the menu, but moving the cursor from the nav link into the dropdown causes the menu to close before any item can be clicked. ## Root Cause In `src/components/layout/Header.jsx`, the dropdowns use pure CSS `group-hover` with a `mt-2` (8px) gap between the nav link and the dropdown panel. When the cursor crosses this gap, the `group-hover` state is lost and the menu closes immediately. ```jsx <div className="relative group"> <Link ...>{link.name}</Link> <div className="... hidden group-hover:block"> {/* mt-2 gap kills hover */} ... </div> </div> ``` ## Fix Options 1. **Replace `mt-2` gap with padding** — use `pt-2` on an invisible hover bridge or `top-full` without margin, with internal padding so the hover zone is contiguous 2. **Use `@radix-ui/react-navigation-menu`** or a proper dropdown component with click/hover state logic instead of pure CSS 3. **Add an invisible hover bridge** — a `::after` pseudo-element or padding-top zone that fills the gap Option 1 or 3 is the quickest fix. Option 2 is the most robust long-term. ## Steps to Reproduce 1. Go to any page on the site 2. Hover over "Services" or "Industries" in the top nav 3. Try to move the mouse down to click a dropdown item 4. Menu closes before the cursor reaches it ## Environment - Desktop browsers (all) — the issue is in the CSS hover logic - Mobile nav (Sheet) is unaffected since it uses a different layout