Cómo crear un menú de navegación flotante fijo en WordPress
¿Quiere crear un menú de navegación móvil fijo en WordPress?
El menú de navegación superior normalmente contiene enlaces a todas sus páginas más importantes. Al hacer que este menú sea fijo, puede mantenerlo en la pantalla mientras el usuario se desplaza hacia abajo en la página, por lo que siempre está a mano.
En este artículo, le mostraremos cómo agregar fácilmente un menú de navegación flotante fijo a su sitio web de WordPress.
¿Qué es un menú fijo de navegación móvil?
Un menú de navegación fijo o flotante “se pega” a la parte superior de la pantalla cuando el usuario se desplaza hacia abajo, por lo que siempre está en la pantalla.
Por lo general, el menú de navegación superior de WordPress contiene enlaces al contenido más importante de su sitio web. Al hacer que este menú sea fijo, los visitantes pueden hacer clic en esos enlaces en cualquier momento sin tener que desplazarse.
Si tiene una tienda en línea, el menú de navegación superior generalmente contiene enlaces a páginas diseñadas para la conversión, como la página de pago y el carrito del cliente. Al hacer que el menú superior sea fijo, a menudo puede reducir las tasas de abandono del carrito y obtener más ventas.
Dicho esto, veamos cómo crear fácilmente un menú de navegación flotante fijo en cualquier tema de WordPress o tienda WooCommerce. Simplemente use los enlaces rápidos a continuación para saltar al método que desea usar:
Algunos de los mejores temas de WordPress tienen soporte integrado para menús de navegación fijos. Dicho esto, vale la pena verificar la configuración de su tema yendo a Temas » Personalizar en su tablero de WordPress y buscando cualquier configuración etiquetada como “Menú”.
Si no está seguro de si su tema admite menús fijos, puede consultar la documentación del tema o incluso ponerse en contacto con el desarrollador para obtener ayuda. Para obtener más información, consulte nuestra guía sobre cómo solicitar y obtener soporte de WordPress correctamente.
Si su tema no tiene soporte incorporado para menús fijos, deberá usar uno de los otros métodos a continuación.
La forma más fácil de agregar un menú de navegación fijo en WordPress es usar el menú fijo (¡o cualquier cosa!) en Scroll. Este complemento le permite hacer que cualquier cosa sea pegajosa, incluidos los menús.
Primero, deberá instalar y activar el complemento. Si necesita ayuda, consulte nuestra guía sobre cómo instalar un complemento de WordPress.
Después de la activación, vaya a Configuración »Menú fijo (¡o cualquier cosa!).
Para comenzar, deberá obtener la ID de CSS del menú de navegación que desea hacer permanente utilizando la herramienta de inspección de su navegador.
Simplemente visite su sitio web y coloque el cursor sobre el menú de navegación. Después de eso, haga clic derecho y seleccione “Inspeccionar” en el menú del navegador.
Esto abrirá un nuevo panel dentro del navegador, donde podrá ver el código fuente del menú de navegación.
Debe encontrar la línea de código para el menú o encabezado de su sitio. Se verá así:
<nav id="site-navigation" class="main-navigation" role="navigation">Si tiene problemas para encontrar el código, desplace el cursor sobre las diferentes líneas de código en el panel “Inspeccionar”. El navegador resaltará el menú de navegación cuando encuentre el código correcto, como puede ver en la imagen a continuación.
En este caso, el ID de CSS del menú de navegación es site-navigation.
Una vez que tenga esta información, regrese a su panel de control de WordPress y agréguela al campo “Elemento fijo (requerido)”.
También deberá agregar un signo de libra (#) al principio, por lo que site-navigation se convierte #site-navigation.
Después de eso, haga clic en el botón “Guardar cambios” en la parte inferior de la página para almacenar sus cambios.
Ahora, si visita su sitio web de WordPress y se desplaza hacia abajo, el menú debería permanecer en la parte superior.
A veces, el menú fijo puede superponerse a algún contenido que no desea ocultar.
En ese caso, deberá definir un espacio entre la parte superior de la pantalla y el menú de navegación fijo escribiendo un número en el campo “Espacio entre la parte superior de la página…”.
Los menús fijos pueden causar problemas en los dispositivos con pantallas más pequeñas, como los dispositivos móviles. Con eso en mente, es una buena idea controlar la versión móvil de su sitio web de WordPress desde su escritorio.
Si no está satisfecho con el aspecto del menú, puede “desbloquearlo” para los usuarios móviles encontrando el siguiente campo: “No pegar elemento cuando la pantalla es más pequeña que”.
Aquí, escriba “780px”.
Hay otras configuraciones para explorar, pero eso es todo lo que necesita para hacer un menú de navegación fijo que funcione.
Cuando esté satisfecho con la configuración del menú de navegación, haga clic en “Guardar cambios” para almacenar su configuración.
También puede crear un menú de navegación fijo usando CSS.
La mejor manera de agregar código personalizado a WordPress es usar WPCode. WPCode es el mejor complemento de fragmentos que le permite agregar CSS, PHP, HTML y más personalizados.
Como no está editando los archivos del tema directamente, puede evitar muchos errores comunes de WordPress. También puede actualizar su tema o cambiar a un tema completamente diferente sin perder su código personalizado.
También puede activar y desactivar el menú fijo con un solo clic.
Primero, deberá instalar y activar el complemento gratuito WPCode. Para obtener más información, consulte nuestra guía paso a paso sobre cómo instalar un complemento de WordPress.
Una vez activado el complemento, vaya a Fragmentos de código » Agregar fragmento.
Aquí verá todos los fragmentos de WPCode listos para usar que puede agregar a su sitio. Estos incluyen un fragmento que le permite deshabilitar los comentarios por completo, cargar tipos de archivos que WordPress generalmente no admite, deshabilitar las páginas de archivos adjuntos y mucho más.
En la siguiente pantalla, coloque el cursor sobre “Agregar su propio código personalizado (nuevo fragmento)” y haga clic en el botón “Usar fragmento” cuando aparezca.
En la siguiente pantalla, debe escribir un título para el fragmento de código. Esto es solo para referencia, por lo que puede usar lo que quiera.
A continuación, abra el menú desplegable “Tipo de código” y elija “Fragmento de CSS”.
Una vez hecho esto, agregue el siguiente fragmento de código al editor de código WPCode:
#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;Esto creará un menú de navegación con un fondo negro. Puede usar cualquier color que desee cambiando el código hexadecimal junto a background.
Por ejemplo, usando background: #ffffff le dará un fondo blanco del menú. Si no está seguro de qué código hexadecimal usar, puede consultar un recurso como HTML Color Code.
También tendrás que reemplazar #site-navigation con el CSS ID del menú de navegación. Para encontrar este código, simplemente siga el mismo proceso descrito anteriormente.
Cuando esté satisfecho con el código, haga clic en el botón “Inactivo” para que cambie a “Activo”, luego haga clic en el botón “Guardar fragmento”.
Ahora, si visita su blog o sitio web de WordPress, verá el menú de navegación flotante fijo en acción.
Según el tema, a veces el menú de navegación puede aparecer debajo del encabezado del sitio en lugar de arriba. En este caso, el menú de navegación fijo puede aparecer demasiado cerca del título y el encabezado del sitio o incluso superponerse.
En este caso, puede agregar lo siguiente a su fragmento de CSS personalizado:
.site-branding margin-top:60px !important;solo reemplaza site-branding con la clase CSS de su área de encabezado. Para obtener esta información, simplemente use la herramienta “Inspeccionar” de su navegador y siga los mismos pasos que en el Método 2.
Esperamos que este artículo le haya ayudado a agregar un menú de navegación flotante fijo a su sitio de WordPress. También es posible que desee ver nuestra guía sobre cómo aumentar el tráfico a su blog y nuestra comparación de los mejores complementos de creación de páginas de WordPress.
Si disfrutó de este artículo, suscríbase a nuestro canal de YouTube para videos tutoriales de WordPress. También puedes encontrarnos en chirrido y Facebook.