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

¿Has notado que muchos sitios web populares están usando el menú de navegación pegajoso? Normalmente, los menús de navegación se muestran en la parte superior y desaparecen a medida que los usuarios se desplazan hacia abajo. Los menús de navegación pegajosos flotan a medida que los usuarios se desplazan hacia abajo y siempre están visibles en la pantalla. En este artículo, le mostraremos cómo crear fácilmente un menú de navegación flotante y pegajoso en WordPress.

Método 1: Añadir un menú de navegación flotante y pegajoso usando el plugin

Este método es más fácil y se recomienda para todos los usuarios. Si aún no ha configurado los menús de navegación, consulte nuestra guía sobre cómo añadir un menú de navegación en WordPress.

Lo primero que tienes que hacer es instalar y activar el Sticky Menu (o Anything!) en el plugin de Scroll. Para más detalles, vea nuestra guía paso a paso sobre cómo instalar un plugin de WordPress.

Tras la activación, debe visitar la página Configuración » Sticky Menu (or Anything!) para configurar la configuración del plugin.

En primer lugar, debe introducir el ID de CSS del menú de navegación que desea que sea pegajoso.

Necesitará 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 lleve el ratón al menú de navegación. Después de eso, debe hacer clic con el botón derecho del ratón 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. Necesitas encontrar una línea de código como esta:

1 «site-navigation «role=»navigation»>

En este ejemplo, el ID CSS de nuestro menú de navegación es navegación del sitio.

Adelante, introduzca el ID de CSS de navegación en la configuración del plugin, como este #site-navigation.

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 pegajoso. Puede utilizar esta opción si el menú se superpone a un elemento que no desea ocultar. Si no es así, ignore esta configuración.

A continuación, haga clic en la casilla de verificación situada junto a la opción: Check for Admin Bar. Esto permite que el plugin agregue algo de espacio para la barra de administración de WordPress, que sólo se agrega para los usuarios que han iniciado sesión.

La siguiente opción en la página de configuración le permite desmarcar 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 su aspecto en dispositivos móviles o tabletas. Si no te gusta, puedes añadir 780px para esta opción.

No olvide hacer clic en el botón Guardar configuración para guardar los cambios.

Ahora puede visitar su sitio web para ver su pegajoso menú de navegación flotante en acción.

Método 2: Añadir manualmente el menú de navegación flotante y pegajoso

Este método requiere que agregue código CSS personalizado al tema. Si no lo has hecho antes, por favor, consulta nuestra guía sobre cómo añadir fácilmente css personalizados a tu sitio de WordPress.

Primero debe visitar Apariencia » Personalizar para iniciar el personalizador de temas.

Haga clic enCSS Adicional en el panel izquierdo y luego agregue este código CSS.

12345678910111213#navegación del sitio { fondo:#fff; altura:60px; índice z:170; margen:0auto; fondo del borde:1pxsolid#dadada; anchura:100%; posición:fija; parte superior:0; izquierda:0; derecha:0; alineación del texto: centro;}

Reemplace #site-navigation con el ID de CSS de su menú de navegación y haga clic en el botón Guardar y publicar.

Ahora puede visitar su sitio web para ver su pegajoso menú de navegación flotante en acción.

Si su menú de navegación aparece normalmente después de la cabecera del sitio, entonces este código CSS podría solapar el título y la cabecera del sitio.

Esto puede ser fácilmente ajustado añadiendo un margen a su área de encabezado usando alguna CSS como esta:

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

Reemplace la marca del sitio con la clase CSS de su área de encabezado.

Esperamos que este artículo le haya ayudado a añadir un menú de navegación flotante y pegajoso a su sitio de WordPress. También puede ver nuestra lista de los 15 mejores tutoriales para dominar los menús de navegación de WordPress.

Si te ha gustado este artículo, suscríbete a nuestros tutoriales de vídeo de YouTube Channel for WordPress. También puede encontrarnos en Twitter y Facebook.

Deja un comentario