Cómo crear un menú de navegación flotante pegajoso en WordPress

Recientemente, uno de nuestros usuarios nos preguntó cómo crear un menú de navegación fijo para su sitio. Los menús de navegación persistentes permanecen en pantalla mientras los usuarios se desplazan por la página. Esto hace que el menú superior esté siempre visible, lo cual es bueno para la experiencia del usuario, ya que contiene enlaces a las secciones más importantes de su sitio web. En este artículo, le mostraremos cómo crear fácilmente un menú de navegación flotante pegajoso en WordPress.

¿Qué es un menú de navegación flotante fijo?

Un menú de navegación fijo o flotante es aquel que «se pega» en la parte superior de la pantalla cuando el usuario se desplaza hacia abajo. Esto hace que su menú sea visible para los usuarios en todo momento. Aquí hay un menú pegajoso en acción. Le mostraremos cómo crear un menú exactamente como este para su propio sitio:

¿Por qué y cuándo pueden ayudar los menús adhesivos?
Por lo general, el menú de navegación superior contiene enlaces a las secciones más importantes de un sitio web. Un menú flotante hace que estos enlaces estén siempre visibles, lo que evita que los usuarios regresen a la parte superior. También está demostrado que aumenta las conversiones. Si opera una tienda en línea, su menú de navegación superior probablemente incluya enlaces al carrito, categorías de productos y búsqueda de productos. Hacer que ese menú sea pegajoso puede ayudarlo a reducir el abandono del carrito y aumentar las ventas. Algunos de los mejores temas de WordPress tienen soporte integrado para un menú de navegación pegajoso. Solo revisa la configuración de tu tema en TemasPersonalizar para activar esta función. Si su tema no tiene esta opción, siga leyendo y le mostraremos cómo crear fácilmente un menú de navegación flotante pegajoso en cualquier tema de WordPress o tienda WooCommerce.

Método 1: agregue su menú de navegación flotante pegajoso usando un complemento

Este es el método más sencillo. Se lo recomendamos a todos los usuarios de WordPress, especialmente a los principiantes. Si aún no ha configurado su menú de navegación, continúe y hágalo siguiendo nuestras instrucciones sobre cómo agregar un menú de navegación en WordPress. Después de eso, debe instalar y activar el menú fijo (¡o cualquier cosa!) En el complemento Scroll. Para obtener más detalles, consulte nuestra guía paso a paso sobre cómo instalar un complemento de WordPress. Durante la activación, debe visitar el Configuración »Menú fijo (¡o lo que sea!) página para configurar los ajustes del complemento.

Primero debe ingresar el ID de CSS del menú de navegación que desea hacer pegajoso. Deberá utilizar la herramienta de inspección de su navegador para encontrar el ID de CSS utilizado por su menú de navegación. Simplemente visite su sitio web y coloque el mouse sobre el menú de navegación. Después de eso, debe hacer clic derecho y seleccionar Inspeccionar en el menú de su navegador.

Esto dividirá la pantalla de su navegador y podrá ver el código fuente de su menú de navegación. Necesita encontrar una línea de código relacionada con su navegación o el encabezado de su sitio. Se verá algo como esto: