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>
This commit is contained in:
FrankZamora
2025-11-08 18:44:58 -06:00
parent ff3fb53282
commit f2c3ea679d
2 changed files with 11 additions and 1 deletions

View File

@@ -132,3 +132,13 @@
background-color: rgba(255, 133, 0, 0.1);
color: var(--color-orange-primary);
}
/* ========================================
Dropdown Hover (Desktop Only)
======================================== */
@media (min-width: 992px) {
.nav-item:hover > .dropdown-menu {
display: block;
}
}

View File

@@ -14,7 +14,7 @@ if (!defined('ABSPATH')) {
/**
* Theme Version
*/
define('APUS_VERSION', '1.0.15');
define('APUS_VERSION', '1.0.16');
/**
* Theme Setup