Cómo Crear un Menú Horizontal Desplazable en WordPress

¿Te gustaría darle a tu sitio web un toque moderno con un menú horizontal desplazable? ¡Es más fácil de lo que piensas, especialmente si usas WordPress y Elementor! En esta entrada, te guiaré paso a paso para que logres ese efecto de manera rápida y sencilla.

¿Por Qué Usar un Menú Horizontal Desplazable?

Un menú horizontal desplazable es una excelente manera de mejorar la experiencia del usuario en dispositivos móviles. Permite a los visitantes navegar fácilmente por todas las opciones del menú sin que todo se vea abarrotado. Además, es una tendencia de diseño que está en auge, y tenerlo en tu sitio web puede hacerlo lucir más moderno y profesional.

Paso 1: Configuración Básica del Menú en Elementor

Primero, asegúrate de tener Elementor instalado y activado en tu sitio de WordPress. Si no lo tienes, ve a «Plugins» > «Añadir nuevo» y busca Elementor. Instálalo y actívalo.

Ahora, crea o edita una página con Elementor y añade el widget de «Menú de navegación». Asegúrate de que el diseño del menú esté configurado como «Horizontal».

Paso 2: Agregar CSS Personalizado para Desplazamiento Horizontal

Para hacer que tu menú sea desplazable horizontalmente, necesitas agregar un poco de CSS personalizado. Aquí te dejo el código que debes usar:

.elementor-nav-menu {
    white-space: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    flex-wrap: inherit !important;
}

.elementor-nav-menu::-webkit-scrollbar {
    display: none !important;
}

Este código asegura que el menú se desplaza horizontalmente y oculta la barra de desplazamiento para una apariencia más limpia.

Paso 3: Añadir JavaScript para Desplazamiento Automático

Queremos que el menú se desplace automáticamente al elemento de la página actual cuando navegas entre las páginas. Para esto, necesitamos añadir un poco de JavaScript. A continuación te muestro cómo hacerlo:

  1. Ve a «Apariencia» > «Editor de Temas».
  2. Abre el archivo footer.php (o usa un plugin como «Insert Headers and Footers»).
  3. Añade el siguiente código justo antes de la etiqueta de cierre :
<script>
document.addEventListener('DOMContentLoaded', function() {
    const menus = document.querySelectorAll('.elementor-nav-menu');
    const menuContainer = menus[1];  // Ajusta el índice según sea necesario

    if (menuContainer) {
        const currentItem = menuContainer.querySelector('.current-menu-item');
        if (currentItem) {
            const scrollAmount = currentItem.offsetLeft - (menuContainer.clientWidth / 2) + (currentItem.clientWidth / 2);
            menuContainer.scrollTo({
                left: scrollAmount,
                behavior: 'smooth'
            });
        }
    }
});
</script>

Caso Especial: Páginas con Dos Menús

Si tienes una página con más de un menú y necesitas asegurarte de que el código JavaScript se aplique al menú correcto, puedes modificar el script para seleccionar el contenedor principal del menú específico utilizando un ID. Aquí te dejo un ejemplo ajustado:

  1. Agrega un ID al contenedor del menú en tu configuración de Elementor. Si no puedes hacerlo directamente, asegúrate de identificar el contenedor de alguna manera.
  2. Usa el siguiente código JavaScript, asegurándote de que apunta al contenedor correcto:
<script>
document.addEventListener('DOMContentLoaded', function() {
    const menuContainerDiv = document.querySelector('.elementor-element-8d67a19');  // Ajusta el selector según tu contenedor

    if (menuContainerDiv) {
        const currentItem = menuContainerDiv.querySelector('.elementor-nav-menu .current-menu-item');
        if (currentItem) {
            const menuContainer = currentItem.closest('.elementor-nav-menu');
            const scrollAmount = currentItem.offsetLeft - (menuContainer.clientWidth / 2) + (currentItem.clientWidth / 2);
            menuContainer.scrollTo({
                left: scrollAmount,
                behavior: 'smooth'
            });
        }
    }
});
</script>

Paso 4: Prueba y Ajuste

¡Y eso es todo! Ahora solo queda probar tu menú para asegurarte de que todo funciona correctamente. Navega entre las páginas y verifica que el menú se desplaza automáticamente al elemento activo.

Conclusión

Implementar un menú horizontal desplazable en tu sitio de WordPress usando Elementor es una excelente manera de mejorar la navegación y la experiencia del usuario, especialmente en dispositivos móviles. Con un poco de CSS y JavaScript, puedes lograr un efecto moderno y funcional que hará que tu sitio se destaque.

Espero que esta guía te haya sido útil. Si tienes alguna pregunta o necesitas más ayuda, ¡no dudes en dejar un comentario!

Entradas relacionadas