El menú de navegación principal en un sitio web suele tener enlaces a todas las páginas más importantes. Cuando haces que este menú sea fijo, puedes mantenerlo en la pantalla mientras el usuario se desplaza hacia abajo en la página. De esa manera, siempre está al alcance.
Esto hace que la navegación sea más accesible, permitiendo a los usuarios saltar rápidamente a diferentes secciones de tu sitio sin tener que desplazarse de nuevo hasta arriba. En nuestra opinión, usar un menú fijo puede ayudar a aumentar la participación y mejorar la usabilidad general del sitio web.
En este artículo, te mostraremos cómo agregar fácilmente un menú de navegación flotante fijo a tu sitio web de WordPress.
¿Qué es un menú de navegación flotante fijo?
Un menú de navegación fijo o flotante se 'pega' a la parte superior de la pantalla mientras el usuario se desplaza hacia abajo, por lo que está en pantalla en todo momento.
Por lo general, el men0 0 de navegaci0 0n superior en WordPress contiene enlaces al contenido m0 0s importante de tu sitio web. Al hacer que este men0 0 sea fijo, los visitantes pueden hacer clic en esos enlaces en cualquier momento sin tener que desplazarse.
Si tienes una tienda en línea, el menú de navegación principal suele tener enlaces a páginas diseñadas para convertir, como la página de pago y el carrito del cliente. Al hacer que el menú principal sea fijo, a menudo puedes reducir las tasas de abandono del carrito y obtener más ventas.
Dicho esto, veamos c0 0mo puedes crear f0 0cilmente un men0 0 de navegaci0 0n flotante fijo en cualquier tema de WordPress o tienda WooCommerce. Simplemente usa los enlaces r0 0pidos a continuaci0 0n para saltar al m0 0todo que deseas usar:
Método 1: Agregar un menú fijo usando la configuración de tu tema (Fácil)
Algunos de los mejores temas de WordPress tienen soporte integrado para men0 0s de navegaci0 0n fijos. Dicho esto, vale la pena revisar la configuraci0 0n de tu tema yendo a Temas » Personalizar en el panel de WordPress y buscando cualquier configuraci0 0n etiquetada como 'Men0 0s'.
Si no est0 0s seguro de si tu tema soporta men0 0s fijos, puedes consultar la documentaci0 0n del tema o incluso contactar al desarrollador para obtener ayuda. Para m0 0s informaci0 0n, consulta nuestra gu0 0a sobre c0 0mo solicitar soporte de WordPress correctamente y obtenerlo.
Si tu tema no tiene soporte integrado para menús fijos, entonces necesitarás usar uno de los otros métodos a continuación.
Método 2: Agrega tu menú de navegación fijo usando un plugin (Recomendado)
La forma m0 0s f0 0cil de agregar un men0 0 de navegaci0 0n fijo en WordPress es usando el plugin Sticky Menu & Sticky Header. Te permite hacer fijo cualquier elemento, incluidos los men0 0s.
Primero, necesitar0 0s instalar y activar el plugin. Si necesitas ayuda, consulta nuestra gu0 0a para principiantes sobre c0 0mo instalar un plugin de WordPress.
Después de la activación, ve a Ajustes » Sticky Menu (or Anything!).
Para empezar, necesitar0 0s obtener el ID de CSS del men0 0 de navegaci0 0n que deseas hacer fijo usando la herramienta de inspecci0 0n de tu navegador.
Simplemente visita tu sitio web y coloca el cursor del mouse sobre el menú de navegación. Luego, haz clic derecho y selecciona 'Inspeccionar' en el menú del navegador.
Esto abrirá un nuevo panel dentro del navegador, donde podrás ver el código fuente del menú de navegación.
Necesitas encontrar la línea de código que se relaciona con el menú o el encabezado de tu sitio. Se verá algo así:
<nav id="site-navigation" class="main-navigation" role="navigation">
Si tienes problemas para encontrar el código, coloca el cursor del mouse sobre las diferentes líneas de código en el panel 'Inspeccionar'. Cuando encuentres el código correcto, el navegador resaltará el menú de navegación, como puedes ver en la siguiente imagen.
En este caso, el ID CSS del menú de navegación es site-navigation.
Una vez que tengas esta información, regresa a tu panel de WordPress y agrégala al campo ‘Elemento fijo (Requerido)’.
También necesitarás agregar un signo de almohadilla (#) al principio, para que site-navigation se convierta en #site-navigation.
Después de eso, haz clic en el botón ‘Guardar Cambios’ en la parte inferior de la página para almacenar tus cambios.
Ahora, si visitas tu sitio web de WordPress y te desplazas, el menú debería permanecer en la parte superior.
A veces, el menú fijo puede superponerse con contenido que no deseas ocultar.
Si esto sucede, entonces necesitarás definir un espacio entre la parte superior de tu pantalla y el menú de navegación fijo escribiendo un número en el campo ‘Espacio entre la parte superior de la página y el elemento fijo’.
Los men0 0s fijos pueden causar problemas en dispositivos con pantallas m0 0s peque0 0as, como los dispositivos m0 0viles. Teniendo esto en cuenta, es una buena idea verificar la versi0 0n m0 0vil de tu sitio web de WordPress desde tu escritorio.
Si no estás satisfecho con cómo se ve el menú, puedes ‘desfijarlo’ para los usuarios móviles buscando el siguiente campo: ‘No fijar elemento cuando la pantalla sea menor que’.
Aquí, escribe ‘780px’.
Hay algunas configuraciones más para explorar, pero esto es todo lo que necesitas para crear un menú de navegación fijo que funcione.
Cuando estés satisfecho con la configuración del menú de navegación, haz clic en ‘Guardar Cambios’ para almacenar tu configuración.
Método 3: Agrega un menú de navegación flotante fijo usando código
También puedes crear un menú de navegación fijo usando CSS.
La mejor manera de agregar c0 0digo personalizado a WordPress es usando WPCode. Es el mejor plugin de fragmentos de c0 0digo que te permite agregar CSS, PHP, HTML personalizado y m0 0s.
Dado que no est0 0s editando los archivos del tema directamente, puedes evitar muchos errores comunes de WordPress. Tambi0 0n puedes actualizar tu tema o cambiar a un tema completamente diferente sin perder tu c0 0digo personalizado.
También puedes activar y desactivar el menú fijo con un solo clic.
Primero, necesitar0 0s instalar y activar el plugin gratuito WPCode. Para m0 0s informaci0 0n, consulta nuestra gu0 0a paso a paso sobre c0 0mo instalar un plugin de WordPress.
Una vez que el plugin esté activado, ve a la página Fragmentos de código » + Agregar fragmento, donde verás todos los fragmentos de WPCode listos para usar que puedes agregar a tu sitio.
Estos incluyen un fragmento que te permite deshabilitar completamente los comentarios, tipos de archivo de carga que WordPress no soporta habitualmente, deshabilitar p0 0ginas de adjuntos y mucho m0 0s.
Aquí, simplemente pasa el cursor del ratón sobre 'Agregar tu código personalizado (Nuevo fragmento)' y haz clic en el botón 'Usar fragmento' cuando aparezca.
En la siguiente pantalla, necesitas escribir un título para el fragmento de código. Esto es solo para tu referencia, así que puedes usar lo que quieras.
Luego, abre el menú desplegable 'Tipo de código' y elige 'Fragmento de CSS'.
Hecho esto, agrega el siguiente fragmento al editor de código de 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 fondo negro. Puedes usar cualquier color que desees cambiando el código hexadecimal junto a background.
Por ejemplo, usar background: #ffffff te dar0
0 un fondo de men0
0 blanco. Si no est0
0s seguro de qu0
0 c0
0digo hexadecimal usar, puedes consultar un recurso como HTML color code.
También necesitarás reemplazar #site-navigation con el ID CSS de tu menú de navegación. Para encontrar este código, simplemente sigue el mismo proceso descrito anteriormente.
Cuando estés satisfecho con el código, haz clic en el interruptor 'Inactive' para que cambie a 'Active', y luego haz clic en el botón 'Save Snippet'.
Ahora, si visitas tu blog o sitio web de WordPress, verás el menú de navegación flotante fijo en acción.
Dependiendo de tu tema, a veces el menú de navegación puede aparecer debajo del encabezado del sitio en lugar de encima. En este caso, el menú de navegación fijo podría aparecer demasiado cerca del título y encabezado del sitio o incluso superponerse a ellos.
Si esto sucede, puedes agregar lo siguiente a tu fragmento de CSS personalizado:
.site-branding {
margin-top:60px !important;
}
Simplemente reemplaza site-branding con la clase CSS de tu área de encabezado. Para obtener esta información, simplemente usa la herramienta ‘Inspeccionar’ de tu navegador y sigue el mismo proceso descrito en el Método 2.
Extra: Haz que tus publicaciones de WordPress sean fijas
Si tienes un blog de WordPress, es una buena idea hacer fijos algunos de tus art0 0culos. Estos pueden ser los art0 0culos pilares que incluyen el contenido m0 0s importante de tu sitio o anuncios y publicaciones de sorteos con los que deseas que los usuarios interact0 0en.
Cuando haces que una publicación de tu elección sea fija, permanecerá en la parte superior de la página de tu blog incluso cuando publiques contenido nuevo, el cual se mostrará debajo de la publicación fija.
Puedes hacer que tu entrada de blog sea fija fácilmente abriéndola en el editor de contenido. Una vez que lo hagas, simplemente expande la pestaña ‘Resumen’ en el panel de bloques y marca la opción ‘Fijar en la parte superior del blog’.
Después de eso, haz clic en el botón ‘Actualizar’ o ‘Publicar’ en la parte superior para guardar tu configuración. Ahora has creado con éxito una entrada de blog fija en tu sitio de WordPress.
Para más detalles, consulta nuestro tutorial sobre cómo hacer publicaciones fijadas en WordPress.
Esperamos que este artículo te haya ayudado a agregar un menú de navegación flotante y fijo a tu sitio de WordPress. También te puede interesar nuestra guía para principiantes sobre cómo agregar un menú de panel deslizante en temas de WordPress y nuestro tutorial sobre cómo agregar iconos de redes sociales al menú de WordPress.
Si te gustó este artículo, suscríbete a nuestro Canal de YouTube para ver tutoriales en video de WordPress. También puedes encontrarnos en Twitter y Facebook.
Dennis Muthomi
¿Hay alguna forma de que el menú fijo solo se aplique a ciertas publicaciones/páginas? Por ejemplo, que no sea fijo en la página de inicio de mi blog, pero sí en el resto del sitio web?
Soporte de WPBeginner
If your theme does not offer that option then we would recommend the plugin for a simple method to have that conditional display
Administrador
Mrteesurez
Bien hecho, me alegra ver el plugin que compartiste aquí "menú fijo o (cualquier cosa) al desplazarse". Eso significa que se puede usar para fijar cualquier elemento aparte del menú.
Inicialmente usé código crudo para esto, gracias por compartir este método fácil.
Dayo Olobayo
Estoy de acuerdo, Sr. Mrteesurez, los menús fijos son una característica valiosa de un sitio web. Además de crear un menú fijo, también podría considerar incorporar un efecto de "desplazamiento suave" para mejorar aún más la experiencia del usuario al navegar entre secciones en su página web.
Jiří Vaněk
Gracias por el tutorial. Siempre he estado buscando una plantilla que básicamente pueda hacer esto. Según esta guía, ya no tengo que hacerlo.
Soporte de WPBeginner
Glad we could help open up your theme options
Administrador
Paul
¿Dónde dejo las 5 estrellas... ¡¡muchas gracias!!
Soporte de WPBeginner
Glad our guide was helpful
Administrador
Jess
¡¡Muchas, muchas gracias por esta útil publicación!! Muy claro y fácil de seguir.
Soporte de WPBeginner
Glad our guide was helpful
Administrador
Ivaylo
Gran tutorial práctico. Hice el Método 2 y funcionó al instante, sin embargo, cuando abro el sitio web en el móvil, los botones del menú han desaparecido. ¿Alguien sabe por qué o cómo solucionarlo?
¡Salud!
Soporte de WPBeginner
Si aún no lo ha hecho, le recomendamos que consulte con el soporte de su tema específico para ver si podría haber un conflicto con el CSS de su tema
Administrador
Serena Richardson
Hola,
¿Cómo creo un menú flotante fijo en el lado derecho de una página en lugar de en la parte superior, para que se mueva hacia abajo a medida que desplazas hacia abajo?
¡Gracias!
Serena
Soporte de WPBeginner
Eso sería agregar un widget fijo, para lo cual tenemos una recomendación en nuestro artículo a continuación:
https://www.wpbeginner.com/plugins/how-to-create-a-sticky-floating-sidebar-widget-in-wordpress/
Administrador
Tom Browne
Funcionó al instante. Gracias
Soporte de WPBeginner
You’re welcome
Administrador
simran
nivel de perfección y la forma de presentar la información… ¡gracias!
Soporte de WPBeginner
Glad our guide was helpful
Administrador
Theo
¿Dónde encuentro el ID de mi barra de navegación?
No lo encuentro.
Soporte de WPBeginner
Para hacer eso, usarías la inspección de elementos. Tenemos una guía sobre cómo usar correctamente la inspección de elementos a continuación:
https://www.wpbeginner.com/wp-tutorials/basics-of-inspect-element-with-your-wordpress-site
Administrador
Natasha T
Me salvó la vida, no puedo agradecerles lo suficiente.
Soporte de WPBeginner
You’re welcome
Administrador
Tam
Hello!
Thanks for your help! It worked like magic :D.
I learn a little CSS and tried to make my nav sticky from a free theme (GeneratePress) but didn’t work. (I tried “position: sticky;” in CSS), but thank your code that helped me to fix it
Soporte de WPBeginner
Glad our article was helpful
Administrador
alexandre
¡Justo lo que estaba buscando! Gran plugin. ¡Gracias!
Soporte de WPBeginner
You’re welcome, glad you found our recommendation helpful
Administrador
Guy Bailey
Muchas gracias por tu ayuda – solo una pequeña pregunta; el fondo de mi menú es transparente al desplazarse hacia abajo. ¿Alguna solución rápida o truco para agregar un color sólido detrás (blanco en nuestro caso)?
Soporte de WPBeginner
Dependería de cómo esté configurado tu menú, pero puedes usar la inspección de elementos para encontrar el objeto al que puedes establecer la propiedad background-color: https://www.wpbeginner.com/wp-tutorials/basics-of-inspect-element-with-your-wordpress-site/
Administrador
Manish
Gracias. Cuando Wpbeginner escribe una publicación de blog sobre un tema, seguramente será útil.
Soporte de WPBeginner
Glad our content has been helpful
Administrador
Everest
Muchas gracias.
Me alegraste el día.
Soporte de WPBeginner
You’re welcome, glad we could help
Administrador
Tony Chung
El código CSS funcionó y tuve que agregar un margen al encabezado para que se mostrara el título completo. Mi barra de menú se extiende por la parte superior, pero los botones del menú comienzan a la izquierda y se detienen en el medio. ¿Cómo muevo los botones para que estén centrados en la página?
Soporte de WPBeginner
Eso variaría de un tema a otro en cuanto a los detalles, pero normalmente necesitarías modificar el CSS. Puedes probar los cambios usando la inspección de elementos: https://www.wpbeginner.com/wp-tutorials/basics-of-inspect-element-with-your-wordpress-site/
Administrador
Chinedu
¡Guau, esto funciona perfectamente!
Gracias
Soporte de WPBeginner
Glad our solution worked for you
Administrador
Gillian Davies
Tengo una lista de libros en una tabla. He importado las imágenes de sus portadas a Medios, ahora quiero que las imágenes aparezcan como un visor al desplazarse por la lista. Similar a un hover de fila, pero ¿cómo hago esto en una tabla creada en table maker?
Raul
¿Cómo puedo hacer que este menú de navegación fijo sea desplazable?
Así que lo usé para una barra lateral, pero cuando la barra lateral es demasiado larga, no cabe en la pantalla y no puedo desplazarla hacia abajo.
Rushikesh Thawale
Hola,
¿Cómo escribiste el código COMO UN CÓDIGO en esta publicación? Es decir, ¿cómo se muestran los códigos HTML como este en una publicación?
Gracias.
Tara
Probablemente ya lo descubriste, pero para quienes buscan, cómo mostrar tu código en tu publicación usa el carácter html para el corchete de apertura en las etiquetas html < ; sin el espacio.
Soporte de WPBeginner
Ese es un método, pero para esto, estamos usando el segundo método en nuestro artículo aquí: https://www.wpbeginner.com/wp-tutorials/how-to-easily-display-code-on-your-wordpress-site/
Administrador
Cesar
Great post! your CSS code works for me
dani
Alain
¡Muy útil!
gracias.
amin
También puedes usar "z-index: 999xxxx" para el logo o cualquier elemento que quieras poner en la barra de navegación
Sujith Reghu
Quiero saber cómo agregar un menú fijo dentro de una publicación o página de WordPress. Como para una publicación larga, los encabezados y subencabezados de la publicación en sí se presenten en el menú fijo para que un lector pueda navegar fácilmente de una sección de la publicación a otra. Gracias...
Zac
¡gracias por el tutorial!
lo que necesito es un poco diferente, necesito que aparezca un 'mini-menú' cuando pases el cursor sobre el menú... para que no se muestre hasta que pases el cursor... como un menú desplegable
si pudieras hacer este tutorial, te lo agradecería.
amin
puedes usar un plugin de mega-menú o un plugin uber-menu, pero puedes hacerlo sin plugin, con css o jquery, como el menú de bootstrap3