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 web.
El menú de navegación fijo permanece en la pantalla cuando el usuario se desplaza hacia abajo en la página. Esto hace que el menú superior esté siempre visible, lo que es bueno para la experiencia del usuario, ya que contiene enlaces a las partes más importantes de su sitio web.
En este artículo, le mostraremos cómo crear fácilmente un menú de navegación flotante fijo en WordPress.
¿Qué es un menú de navegación flotante fijo?
Un menú de navegación fijo o flotante es un menú que se “pega” a la parte superior de la pantalla cuando el usuario se desplaza hacia abajo. Esto mantiene su menú visible para el usuario en todo momento.
Este es un menú fijo en uso. Le mostraremos cómo crear exactamente el mismo menú para su propio sitio web:
¿Por qué y cuándo son útiles los menús fijos?
Por lo general, el menú de navegación superior contiene enlaces a las partes más importantes del sitio web. Un menú flotante mantiene estos enlaces visibles, lo que evita que los usuarios se desplacen hacia la parte superior. También se ha demostrado que aumenta las tasas de conversión.
Si tiene una tienda en línea, su menú de navegación superior puede incluir enlaces a carritos de compras, categorías de productos y búsquedas de productos. Hacer que este menú sea fijo puede ayudarlo a reducir el abandono del carrito y aumentar las ventas.
Algunos de los mejores temas de WordPress tienen soporte integrado para menús de navegación fijos.Simplemente verifique la configuración de su tema en Temas » Personalizar Habilite 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 fijo en cualquier tema de WordPress o tienda WooCommerce.
Método 1: agregar un menú de navegación flotante fijo usando un complemento
Esta es la manera más fácil. Lo recomendamos a todos los usuarios de WordPress, especialmente a los principiantes.
Si no ha configurado un menú de navegación, continúe y siga 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 lo que sea!) en el complemento Scroll. Para obtener más detalles, consulte nuestra guía paso a paso sobre cómo instalar complementos de WordPress.
Después de la activación, debe acceder Configuración »Menú fijo (¡o cualquier cosa!) página para configurar los ajustes del complemento.
Primero, debe ingresar la ID de CSS del menú de navegación que desea pegar.
Deberá usar el inspector de su navegador para encontrar la ID de CSS utilizada por el menú de navegación.
Simplemente visite su sitio web y mueva el mouse al menú de navegación. Después de eso, 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 del menú de navegación.
Debe encontrar la línea de código relacionada con su navegación o el título del sitio web. Se parece a esto:
<nav role="navigation">
Si tiene problemas para encontrarlo, coloque el cursor del mouse en una línea de código diferente en el panel Inspeccionar. Cuando tenga la línea de código correcta, el menú de navegación se resaltará por completo:
En este caso, el CSS ID de nuestro menú de navegación es site-navigation.
Todo lo que necesita hacer es ingresar la ID de CSS del menú en la configuración del complemento y agregar un hash al principio.En este caso lo es #site-navigation.
No olvide hacer clic en el botón “Guardar cambios” en la parte inferior de la página.
Ahora, continúe y vea su menú fijo en vivo en su sitio de WordPress. Cuando te desplazas hacia abajo, debería permanecer en la página de esta manera:
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 fijo. Solo necesita usar esta configuración si su menú se superpone a elementos que no desea ocultar. Si no, ignore esta configuración.
Recomendamos marcar la casilla junto a la siguiente opción: “Comprobar barra de administración”. Esto permite que el complemento agregue algo de espacio a 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 cancelar el menú de navegación si los usuarios usan una pantalla más pequeña (como un dispositivo móvil) para visitar su sitio:
Puede probar cómo se verá su sitio web en un dispositivo móvil o tableta. Si no le gusta su aspecto, simplemente agregue 780 px a 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 el menú de navegación flotante fijo
Este método requiere que agregue un código CSS personalizado a su tema. No lo recomendamos para principiantes.
También recomendamos consultar nuestra guía sobre cómo agregar fácilmente CSS personalizado a su sitio de WordPress antes de comenzar.
Primero, debes visitar Apariencia » Personalizar Inicie el personalizador de temas de WordPress.
A continuación, 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;
}
notas: Esto producirá un menú de navegación con un fondo negro.Si desea un color diferente, cambie el número junto a backgroundPor ejemplo, utilice background: #ffffff le dará un fondo de menú blanco.
solo reemplaza #site-navigation Use la ID de CSS para el menú de navegación y haga clic en el botón Publicar en la parte superior de la pantalla.
Continúe a su sitio web para ver su menú de navegación flotante fijo:
¿Qué sucede si su menú de navegación generalmente aparece debajo del encabezado del sitio en lugar de arriba? Si es así, este código CSS puede superponerse al título y encabezado del sitio, o aparecer demasiado cerca hasta que el usuario se desplace:
Esto se puede ajustar fácilmente agregando un margen al área del encabezado con algún código CSS adicional:
.site-branding {
margin-top:60px !important;
}
reemplazar site-branding Use clases CSS para el área del encabezado. Ahora el menú fijo de navegación ya no se superpondrá a su encabezado hasta que el usuario se desplace hacia abajo:
Esperamos que este artículo le haya ayudado a agregar un menú de navegación flotante fijo 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, así como nuestra comparación de los mejores complementos de creación de páginas de WordPress.
Si te gustó este artículo, suscríbete a nuestro canal de YouTube para videos tutoriales de WordPress.También puedes encontrarnos en Gorjeo y Facebook.
Los datos expuestos en este sitio web son de índole informativo, no necesariamente están actualizados. Esta información es una recopilación de información de internet.
