Header Ads Widget

Ticker

6/recent/ticker-posts

Cómo crear un menú de navegación flotante fijo 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 fijos permanecen en la pantalla mientras los usuarios se desplazan hacia abajo en la página. Esto hace que el menú superior esté siempre visible, lo que 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 flotante pegajoso en WordPress.

Crear 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:

Un menú de navegación pegajoso en acción en nuestro sitio web de demostración

¿Por qué y cuándo pueden resultar útiles 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 esos enlaces estén siempre visibles, lo que evita que los usuarios se desplacen hacia la parte superior. También está comprobado 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. Simplemente vea la configuración de su tema en 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 flotante pegajoso en cualquier tema de WordPress o tienda WooCommerce .

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

Este es el método más sencillo. Lo recomendamos para todos los usuarios de WordPress, especialmente para los principiantes.

Si aún no ha configurado su menú de navegación, continúe y hágalo usando 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 .

Tras la activación, debe visitar la página Configuración »Menú fijo (o ¡Cualquier cosa!) Para configurar los ajustes del complemento.

La página de configuración del complemento Sticky Menu

Primero debe ingresar la ID de CSS del menú de navegación que desea que sea 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 lleve el mouse al menú de navegación. Después de eso, debe hacer clic derecho y seleccionar Inspeccionar en el menú de su navegador.

Inspeccionar el elemento del menú de navegación en su sitio web

Esto dividirá la pantalla de su navegador y podrá ver el código fuente de su menú de navegación.

Debe encontrar una línea de código que se relacione con su navegación o el encabezado de su sitio. Se verá algo como esto:

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

Si tiene dificultades 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:

Encontrar el ID del menú de navegación con la herramienta de inspección

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

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

Ingresando el ID del elemento que desea hacer pegajoso (en este caso, el menú de navegación)

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í:

Ver el menú fijo en su sitio web

La siguiente opción en la página de configuración del complemento es definir el espacio entre la parte superior de la pantalla y el menú de navegación adhesivo. Solo necesita usar esta configuración si su menú se superpone a un elemento que no desea que se oculte. Si no es así, ignore esta configuración.

Recomendamos dejar marcada la casilla junto a la opción: 'Buscar barra de administración'. Esto permite que el complemento 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 barra de administración de WordPress aparece encima del menú fijo

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

El complemento de menú fijo también ofrece más opciones

Puede probar el aspecto de su sitio en dispositivos móviles o tabletas. 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 sus opciones.

Método 2: agregar manualmente un menú de navegación flotante fijo

Este método requiere que agregue código CSS personalizado a su tema. No lo recomendamos para principiantes.

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

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

Agregar CSS personalizado en el tema de WordPress

A continuación, haga clic en 'CSS adicional' en el panel izquierdo y luego 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 fondo negro. Si desea un color diferente, cambie el número junto a backgroundPor ejemplo, el uso background: #ffffffle dará un fondo de menú blanco.

Simplemente reemplácelo #site-navigationcon el ID de CSS de su menú de navegación y 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 flotante en acción:

Un menú de navegación fijo / flotante creado con CSS

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

El menú de navegación pegajoso se superpone ligeramente al título del sitio.

Esto se puede ajustar fácilmente agregando un margen al área de su encabezado usando algún código CSS adicional:

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

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

Ahora hay espacio para el título debajo del menú de navegación fijo

Publicar un comentario

0 Comentarios