Cómo crear un menú de navegación móvil 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 permanentes permanecen en pantalla a medida que los usuarios se desplazan hacia abajo en la página. Esto hace que el menú superior esté siempre visible, lo cual es bueno para la experiencia del usuario porque 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 móvil pegajoso en WordPress.

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

Un menú de navegación fijo o flotante es lo que «permanece» 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 sitio:

¿Por qué y cuándo pueden ser útiles los menús permanentes?

Normalmente, el menú de navegación superior contiene enlaces a las secciones más importantes de un sitio web. Un menú flotante hace que esos enlaces estén siempre visibles, lo que evita que los usuarios regresen a la parte superior. También se ha demostrado que aumenta las conversiones.

Si tiene una tienda en línea, es probable que su menú de navegación superior incluya enlaces al carrito, categorías de productos y búsqueda de productos. Hacer que este menú sea pegajoso puede ayudarlo a reducir el abandono del carrito y aumentar las ventas.

Algunos de los mejores temas de WordPress tienen soporte incorporado para un menú de navegación pegajoso. Solo mira la configuración de tu tema a continuación Temas »Personalizar para habilitar 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 móvil pegajoso en cualquier tema de WordPress o tienda WooCommerce.

Método 1: agregue su menú de navegación móvil pegajoso usando un plugin

Este es el método más simple. 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.

A continuación, debe instalar y activar el Menú fijo (¡o lo que sea!) En desplazamiento conectar. Para obtener más detalles, consulte nuestra guía paso a paso sobre cómo instalar un plugin de WordPress.

Después de la activación, debe visitar el Configuración »Menú fijo (¡o lo que sea!) página para configurar los ajustes del plugin.

Primero debe ingresar la ID CSS del menú de navegación que desea hacer pegajoso.

Deberá utilizar el inspector de su navegador para encontrar el ID de CSS utilizado por el menú de navegación.

Simplemente visite su sitio web y coloque el mouse sobre el menú de navegación. A continuación, debe hacer clic derecho y seleccionar Inspeccionar en el menú del 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á así:

<nav id="site-navigation" class="main-navigation" role="navigation">

Si tiene problemas para encontrarlo, coloque el cursor del mouse sobre las diferentes líneas de código en el panel Inspeccionar. El menú de navegación estará completamente resaltado cuando tenga la línea de código correcta:

En este caso, el ID CSS de nuestro menú de navegación es site-navigation.

Todo lo que necesita hacer es ingresar la ID CSS de su menú en la configuración del plugin con un hash al principio. En este caso, eso es todo #site-navigation.

No olvide hacer clic en el botón «Guardar cambios» en la parte inferior de la página.

Ahora continúe y revise su menú fijo en vivo en su sitio web de WordPress. Debería permanecer en la página a medida que se desplaza hacia abajo, así:

La siguiente opción en la página de configuración del plugin es definir el espacio entre la parte superior de la pantalla y el menú de navegación fijo. Debe utilizar esta configuración solo si el menú se superpone a un elemento que no desea ocultar. Si no es así, ignore esta configuración.

Le recomendamos que deje marcada la casilla junto a la opción: «Verificar la barra de administración». Esto permite que el plugin agregue algo de espacio para la barra de administración de WordPress, que solo es visible para los usuarios registrados.

Aquí puede ver que la barra de administración en nuestro sitio de prueba se muestra correctamente sobre el menú fijo:

La siguiente opción le permite desbloquear el menú de navegación si un usuario está visitando su sitio web utilizando una pantalla más pequeña, como un dispositivo móvil:

Puede probar el aspecto de su sitio en un dispositivo móvil o tableta. Si no le gusta cómo se ve, simplemente agregue 780px para esta opción.

No olvide hacer clic en el botón Guardar cambios después de realizar cambios en las opciones.

Método 2: agregar manualmente un menú de navegación móvil pegajoso

Este método requiere agregar CSS personalizado al tema. No lo recomendamos para principiantes.

También le recomendamos que consulte nuestra guía sobre cómo agregar fácilmente CSS personalizado a su sitio de WordPress antes de comenzar.

Primero, debes visitar Apariencia »Personalizar para iniciar el personalizador de temas de WordPress.

Luego, haga clic en «CSS adicional» en el panel izquierdo y agregue este código CSS.

#site-navigation {
    background:#00000;
    height:60px;
    z-index:170;
    margin:0 auto;
    border-bottom:1px solid #dadada;
    width:100%;
    position:fixed;
    top:0;
    left:0;
    right:0;
    text-align: center;
}

Nota: Esto producirá un menú de navegación con un fondo negro. Si desea un color diferente, cambie el número junto a background. Por ejemplo, usando background: #ffffff le dará un fondo de menú blanco.

Solo reemplaza #site-navigation con el ID de CSS del menú de navegación, luego haga clic en el botón Publicar en la parte superior de la pantalla.

Continúe y visite su sitio web para ver su menú de navegación móvil fijo en acción:

¿Qué pasa si el menú de navegación aparece normalmente debajo del encabezado del sitio en lugar de arriba? Si es así, este código CSS puede superponerse al título y el encabezado del sitio o aparecer demasiado cerca antes de que el usuario se desplace:

Esto se puede ajustar fácilmente agregando un margen al área del encabezado usando código CSS adicional:

.site-branding {
margin-top:60px !important;
}

Reemplazar site-branding con la clase CSS de su área de encabezado. Ahora, el menú de navegación fijo ya no se superpondrá al encabezado antes de que el usuario se desplace hacia abajo:

Esperamos que este artículo le haya ayudado a agregar un menú de navegación móvil pegajoso a su sitio de WordPress. También puede consultar nuestra guía sobre cómo crear un tema de WordPress personalizado sin escribir ningún código y nuestra comparación de los mejores plugins de creación de páginas de WordPress.