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 menú de navegación principal en WordPress contiene enlaces al contenido más importante de tu 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 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 cómo puedes crear fácilmente un menú de navegación flotante fijo en cualquier tema de WordPress o tienda de WooCommerce. Simplemente usa los enlaces rápidos a continuación para ir al método que deseas usar:
- Método 1: Agregar un menú fijo usando la configuración de tu tema (Fácil)
- Método 2: Agrega tu menú de navegación fijo usando un plugin (Recomendado)
- Método 3: Agrega un menú de navegación flotante fijo usando código
- Extra: Haz que tus publicaciones de WordPress sean fijas
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 menús de navegación fijos. Dicho esto, vale la pena revisar la configuración de tu tema yendo a Temas » Personalizar en el panel de WordPress y buscando cualquier configuración etiquetada como 'Menús'.
Si no estás seguro de si tu tema admite menús fijos, puedes consultar la documentación del tema o incluso contactar al desarrollador para obtener ayuda. Para más información, consulta nuestra guía sobre cómo pedir 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 más fácil de agregar un menú de navegación fijo en WordPress es usando el plugin Sticky Menu & Sticky Header. Te permite hacer fijo cualquier elemento, incluidos los menús.
Primero, necesitarás instalar y activar el plugin. Si necesitas ayuda, consulta nuestra guía para principiantes sobre cómo instalar un plugin de WordPress.
Después de la activación, ve a Ajustes » Sticky Menu (or Anything!).
Para empezar, necesitarás obtener el ID de CSS del menú de navegación que deseas hacer fijo utilizando la herramienta de inspección 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 menús fijos pueden causar problemas en dispositivos con pantallas más pequeñas, como los dispositivos móviles. Teniendo esto en cuenta, es una buena idea verificar la versión móvil 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 código personalizado a WordPress es usando WPCode. Es el mejor plugin de fragmentos de código que te permite agregar CSS, PHP, HTML personalizados y más.
Dado que no estás editando directamente los archivos del tema, puedes evitar muchos errores comunes de WordPress. También puedes actualizar tu tema o cambiar a uno completamente diferente sin perder tu código personalizado.
También puedes activar y desactivar el menú fijo con un solo clic.
Primero, necesitarás instalar y activar el plugin gratuito WPCode. Para más información, consulta nuestra guía paso a paso sobre cómo 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, subir tipos de archivo que WordPress normalmente no soporta, deshabilitar páginas de adjuntos y mucho más.
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 dará un fondo blanco para el menú. Si no estás seguro de qué código hexadecimal usar, puedes consultar un recurso como código de color HTML.
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 que algunas de tus entradas de blog sean fijas. Estos pueden ser los artículos pilares que incluyen el contenido más importante de tu sitio o anuncios y publicaciones de sorteos con los que deseas que los usuarios interactúen.
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 fijas 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 agregar íconos de redes sociales al menú de WordPress.
Si te gustó este artículo, suscríbete a nuestro canal de YouTube para obtener 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 asignar 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 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