¿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.

...