¿Alguna vez navegó por un sitio web y descubrió que un menú de navegación siempre está visible en la parte superior?
En principio, los menús de navegación se muestran de tal forma que desaparecen al desplazarse por la página. Los menús de navegación siempre visibles flotan y lo son sin importar cómo se desplace el usuario hacia abajo.
En este tutorial, le mostraremos cómo crear fácilmente un menú flotante en su blog de WordPress.
Si aún no has creado un sitio web o un blog en WordPress, te invitamos a consultar Cómo instalar un blog en WordPress en 7 pasos a continuación, ¿Cómo encontrar, instalar y activar un tema de WordPress en tu blog
Si está hecho, entremos en lo que nos preocupa hoy.
Método 1: Cómo agregar un menú flotante en WordPress usando un complemento
Este método es más fácil y rápido. Si aún no ha configurado los menús de navegación, puede aprende a hacerlo.
Lo primero que debe hacer es instalar y activar el complemento " Menú pegajosa (o cualquier cosa!) Nosotros nos desplazamos ". Si no sabe cómo instalar un complemento, usted puede leer nuestro tutorial.
Después de la activación, debe visitar " Configuración »Menú fijo Para configurar los ajustes de este complemento.
Primero, debe ingresar los ID de CSS para el menú de navegación que desea flotar.
Deberá utilizar la herramienta "inspeccionar" de su navegador para encontrar el CSS utilizado.
Vaya a su sitio web y mueva su mouse al menú de navegación. Después de eso, debe hacer clic derecho y seleccionar "Inspeccionar".
Ve más allá descubriendo Cómo personalizar un tema de WordPress con el lápiz amarillo
Esto dividirá (por defecto) la pantalla de su navegador y podrá ver el código fuente de su menú de navegación. Debes encontrar una línea similar a esta:
En este ejemplo, la ID de CSS de nuestro menú de navegación es " Navegación en el sitio ".
Continúe e ingrese el ID de CSS del menú en la configuración del complemento de la siguiente manera "# site-navigation".
La siguiente opción en la configuración del complemento es establecer el espacio entre la parte superior de la pantalla y el menú de navegación flotante. Puede usar esta configuración si su menú se superpone con un elemento que no desea que se oculte. De lo contrario, ignore esta configuración.
Después de eso, debe hacer clic en el cuadro junto a la opción: "Comprobar administrador de la barra". Esto permite que el complemento agregue algo de espacio para la barra de herramientas de WordPress que se agrega para los usuarios registrados.
La siguiente opción en la página de configuración le permite ocultar el menú de navegación si un usuario está visitando su sitio web usando una pantalla más pequeña, como un dispositivo móvil.
Puede probar cómo se muestra este menú en dispositivos móviles y tabletas. Si no le gusta, puede agregar 780px en esta opción.
Descubrir también Cómo crear un menú sensible para WordPress móvil
No olvide hacer clic en el " Guardar configuración Para guardar tus cambios.
Ahora puede visitar su sitio web para ver su menú de navegación flotante en acción.
Método 2: Cómo agregar un menú de navegación manualmente
Este método requiere agregar un código CSS personalizado a su tema de WordPress.
Primero que nada tienes que visitar " Apariencia> Personalizar Para iniciar el Personalizador de WordPress.
Haga clic en " CSS adicional En el panel izquierdo, luego agregue este código CSS.
# Navegación del sitio {background: #fff; altura: 60px; z-index: 170; margen: 0 automático; border-bottom: 1px #dadada sólido; anchura: 100%; posición: fijo; superior: 0; izquierda: 0; derecha: 0; text-align: center; }
Reemplazar " Navegación en el sitio # Por el identificador de su menú de navegación y haga clic en el botón « Siguiente ".
Ahora puede visitar su sitio web para ver su menú de navegación flotante en acción.
Si su menú de navegación aparece normalmente después del encabezado del sitio web, este código CSS podría superponerse al título del sitio web y al encabezado.
Esto se puede ajustar fácilmente agregando un margen en el área de su encabezado usando el siguiente código:
.site de marca {margin-top: 60px; }
Aquí termina nuestro tutorial, ahora podrás crear o agregar un menú flotante en tu sitio web.
Si buscas otros plugins de WordPress que le permitirá administrar los menús, aquí hay algunos plugins de WordPress prima dedicada a esta tarea.
1. héroe menú
Este complemento le permite crear su propio menú personalizado de WordPress en unos pocos pasos bastante sencillos. En particular, le permite crear de manera fácil e intuitiva un menú de WordPress elegante y profesional. Desde el megamenú rico en funciones más complejo hasta el menú desplegable más simple, el Plugin de WordPress HeroMenu configura cualquier tipo de menú y lo pone en funcionamiento en minutos.
En términos de características que ofrece, entre otras cosas: perfectamente funcional en PC, tableta y teléfono inteligente, fácil de usar, contenido personalizable, CSS personalizado para agregar sus propios estilos de menú, diseñador de mega menú, navegadores compatibles: Chrome, Firefox, Safari , Opera, IE9 y más.
Descargar | Demo | alojamiento web
2. Slick Menu
Slick Menu no es solo un complemento de menú para WordPress. Se puede usar para crear múltiples niveles de menú de forma ilimitada, así como barras laterales con contenido enriquecido, múltiples opciones de estilo y efectos animados.
Cada nivel de menú se puede personalizar con colores de fondo, imágenes, videos, fuentes personalizadas y más. Este complemento es completamente sensible y tiene más de 45 animaciones para los elementos del menú.
Descargar | Demo | alojamiento web
3. Menú 8Degree Fly
8Degree Fly Menu es un Plugin de WordPress premium que le permite agregar un menú de lienzo a su sitio web, para darle un aspecto que resalte su información de una manera simple. Utiliza la función de menú predeterminada de WordPress para crear sus menús.
Podrá agregar elementos adicionales a los elementos de menú predeterminados, como iconos, lemas de menú, un encabezado de pseudogrupación y una descripción larga. También viene con un editor WYSIWYG para ayudarlo a comprender su descripción larga de una manera fácil de usar. Con este editor también puede usar códigos cortos.
Descargar | Demo | alojamiento web
Otros recursos recomendados
Si desea ir más allá en la creación o personalización de los menús de su blog o su sitio web, también le sugerimos que consulte los enlaces a continuación.
- Cómo añadir estilo a sus menús de navegación
- Cómo añadir un atributo de título en los menús de WordPress
- Los complementos de 8 WordPress para crear un megamenú en tu blog
Conclusión
Listo ! Eso es todo por este tutorial, espero que le permita agregar un menú flotante a su blog de WordPress. Te invitamos a comparte este artículo con tus amigos en tus redes sociales.
Si tiene alguna sugerencia o comentario, serán bienvenidos. Y si eres nuevo en WordPress, consulta esto recurso.
...
Hola,
En primer lugar, gracias por este tutorial que hace el trabajo a la perfección.
Pero no importa cuánto busqué en la red, no pude encontrar la respuesta a mi pregunta:
¿Cómo hago, una vez creado el menú flotante (en CSS o con la extensión, lo que sea), para que mis secciones aparezcan después del menú y no detrás del menú?
Es particularmente molesto en mi caso porque es una página y los elementos de mi menú, por lo tanto, se refieren a secciones de la página, que cada vez van detrás de mi menú ...
te habla?
Merci par avance!
Me preguntaba si era posible hacer que la tabla de contenido de una página fuera "pegajosa" ...
Hola,
Nunca probado todavía. No te puedo contestar.
Buenos dias; Hola
Intenté con un tema descargado (wallstreet) pero, mientras seguía tus instrucciones, nada cambia ... No sé qué falta ...
Me gusta y desearía poder usarlo ...
Merci
Raul
Hola,
Intente deshabilitar todos los demás complementos de WordPress y observe la pantalla a continuación.
Gracias por tu tutorial, ¡tan simple como hola todo es saber!
Hola,
Me alegro de haber sido útil.