FrankZamora f2c3ea679d Fix Navbar: Activar dropdown hover en desktop - Bootstrap 5 usa click por defecto ...

PROBLEMA IDENTIFICADO:
- Dropdown "Buscador General de Precios Unitarios" (18 elementos) NO se despliega en hover
- Usuario reportó: "el submenu no se despliega" en staging
- Inspeccionado con Chrome DevTools MCP: dropdown permanece display:none en hover

DIAGNÓSTICO:
✅ HTML correcto: <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown">
✅ Bootstrap 5 cargado: window.bootstrap existe
✅ Walker genera data-bs-toggle="dropdown" correctamente
❌ Bootstrap 5 usa CLICK por defecto, NO hover
❌ No había CSS para activar dropdown en hover
❌ Template base tampoco tiene dropdown hover

CAUSA RAÍZ:
Bootstrap 5 NUNCA ha usado hover por defecto. Requiere CSS adicional.

SOLUCIÓN IMPLEMENTADA (CSS > JavaScript):
Agregar 4 líneas CSS para dropdown hover SOLO en desktop (min-width: 992px)

Archivo: componente-navbar.css (líneas 136-144)
@media (min-width: 992px) {
    .nav-item:hover > .dropdown-menu {
        display: block;
    }
}

POR QUÉ CSS vs JavaScript:
✅ Super simple: 4 líneas vs 20-30 líneas JS
✅ Performance perfecto: Sin event listeners
✅ Híbrido perfecto: Hover desktop + Click móvil (Bootstrap)
✅ Compatible: Funciona aunque JS esté deshabilitado
✅ Menos bugs: Menos código = menos errores

ARCHIVOS MODIFICADOS:
- componente-navbar.css: +9 líneas (CSS dropdown hover)
- functions.php: Version 1.0.15 → 1.0.16

RESULTADO:
✅ Desktop (>992px): Dropdown se despliega en hover instantáneamente
✅ Móvil (<992px): Sigue usando click nativo de Bootstrap
✅ Compatible con los 18 elementos + scroll del Issue #103
✅ Sin conflictos con JavaScript existente

TESTING PENDIENTE:
- Verificar en staging que dropdown funciona en hover
- Confirmar que NO interfiere con móvil (debe seguir usando click)

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

2025-11-08 18:44:58 -06:00

3.1 KiB

Raw Blame History

View Raw