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:
@@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -14,7 +14,7 @@ if (!defined('ABSPATH')) {
|
||||
/**
|
||||
* Theme Version
|
||||
*/
|
||||
define('APUS_VERSION', '1.0.15');
|
||||
define('APUS_VERSION', '1.0.16');
|
||||
|
||||
/**
|
||||
* Theme Setup
|
||||
|
||||
Reference in New Issue
Block a user