ThemeLocal: consejos de blog que funcionan como magiaThemeLocal: consejos de blog que funcionan como magia
  • Blogging
  • WordPress
  • Marketing por correo
  • SEO
  • Redes sociales
  • Más
    • Tutoriales
    • Shopify
    • Críticas
    • Consejo
    • Seguridad
    • Software y servicios
    • Generación de tráfico
    • Guia de principiantes
    • Escaparate
Search
  • Términos de Uso
  • Política de privacidad
  • Política de cookies
  • Contactar
© 2022 Themelocal. Reservados todos los derechos.
Lectura: Cómo crear un menú de navegación flotante fijo en WordPress
Cuota
Notificación Mostrar más
Últimas noticias
Revisión de la regleta de alimentación de carga rápida inteligente Meross MSP843P
Reseñas de tecnología
Recomendaciones de confianza: el televisor de 5 estrellas de Samsung deslumbra
Reseñas de tecnología
Primeras impresiones: revisión de Lenovo LOQ 15i (2023)
Reseñas de tecnología
Dolby Vision vs HDR10: ¿En qué se diferencian, cuál es mejor?
Versus
Finalmente, un contrato de iPhone 14 a un precio razonable
Ofertas
Aa
ThemeLocal: consejos de blog que funcionan como magiaThemeLocal: consejos de blog que funcionan como magia
Aa
  • Blogging
  • WordPress
  • Marketing por correo
  • SEO
  • Redes sociales
  • Más
Search
  • Blogging
  • WordPress
  • Marketing por correo
  • SEO
  • Redes sociales
  • Más
    • Tutoriales
    • Shopify
    • Críticas
    • Consejo
    • Seguridad
    • Software y servicios
    • Generación de tráfico
    • Guia de principiantes
    • Escaparate
Síganos
  • Términos de Uso
  • Política de privacidad
  • Política de cookies
  • Contactar
© 2022 Themelocal. Reservados todos los derechos.
ThemeLocal: consejos de blog que funcionan como magia > Blog > WordPress > Themes > Cómo crear un menú de navegación flotante fijo en WordPress
Themes

Cómo crear un menú de navegación flotante fijo en WordPress

Última actualización: noviembre 19, 2021 12:17 am
ThemeLocal hace 1 año 9 Minutos mínimos para leer
Cuota
9 Minutos mínimos para leer
Cuota

Recientemente, uno de nuestros usuarios nos preguntó cómo crear un menú de navegación fijo para su sitio.

Contents
¿Qué es un menú de navegación flotante fijo?Método 1: agregue su menú de navegación flotante adhesivo usando un complementoMétodo 2: agregar manualmente un menú de navegación flotante fijo

Los menús de navegación fijos permanecen en la pantalla mientras los usuarios se desplazan hacia abajo en la página. Esto hace que el menú superior esté siempre visible, lo cual es bueno para la experiencia del usuario porque contiene enlaces a las secciones más importantes de su sitio web.

En este artículo, le mostraremos cómo crear fácilmente un menú de navegación flotante pegajoso en WordPress.

¿Qué es un menú de navegación flotante fijo?

Un menú de navegación fijo o flotante es aquel que se ‘pega’ en la parte superior de la pantalla cuando el usuario se desplaza hacia abajo. Esto hace que su menú sea visible para los usuarios en todo momento.

Aquí hay un menú pegajoso en acción. Le mostraremos cómo crear un menú exactamente como este para su propio sitio:

Un menú de navegación pegajoso en acción en nuestro sitio web de demostración

¿Por qué y cuándo pueden resultar útiles los menús adhesivos?

Por lo general, el menú de navegación superior contiene enlaces a las secciones más importantes de un sitio web. Un menú flotante hace que esos enlaces estén siempre visibles, lo que evita que los usuarios se desplacen hacia la parte superior. También se ha comprobado que aumenta las conversiones.

Si tiene una tienda en línea, es probable que su menú de navegación superior incluya enlaces al carrito, categorías de productos y búsqueda de productos. Hacer que este menú sea pegajoso puede ayudarlo a reducir el abandono del carrito y aumentar las ventas.

Algunos de los mejores temas de WordPress tienen soporte incorporado para un menú de navegación pegajoso. Simplemente vea la configuración de su tema en Temas »Personalizar para habilitar esta función.

Si su tema no tiene esta opción, siga leyendo y le mostraremos cómo crear fácilmente un menú de navegación flotante pegajoso en cualquier tema de WordPress o tienda WooCommerce.

Método 1: agregue su menú de navegación flotante adhesivo usando un complemento

Este es el método más sencillo. Lo recomendamos para todos los usuarios de WordPress, especialmente para los principiantes.

Si aún no ha configurado su menú de navegación, continúe y hágalo usando nuestras instrucciones sobre cómo agregar un menú de navegación en WordPress.

Después de eso, debe instalar y activar el Menú fijo (¡o cualquier cosa!) En el desplazamiento enchufar. Para obtener más detalles, consulte nuestra guía paso a paso sobre cómo instalar un complemento de WordPress.

Tras la activación, debe visitar el Configuración »Menú fijo (¡o cualquier cosa!) página para configurar los ajustes del complemento.

La página de configuración del complemento Sticky Menu

Primero debe ingresar el ID de CSS del menú de navegación que desea que sea pegajoso.

Deberá utilizar la herramienta de inspección de su navegador para encontrar el ID de CSS utilizado por su menú de navegación.

Simplemente visite su sitio web y lleve el mouse al menú de navegación. Después de eso, debe hacer clic con el botón derecho y seleccionar Inspeccionar en el menú de su navegador.

Inspeccionar el elemento del menú de navegación en su sitio web

Esto dividirá la pantalla de su navegador y podrá ver el código fuente de su menú de navegación.

Necesita encontrar una línea de código que se relacione con su navegación o el encabezado de su sitio. Se verá algo como esto:

<nav id="site-navigation" class="main-navigation" role="navigation">

Si tiene dificultades para encontrarlo, coloque el cursor del mouse sobre las diferentes líneas de código en el panel Inspeccionar. El menú de navegación estará completamente resaltado cuando tenga la línea de código correcta:

Encontrar el ID del menú de navegación con la herramienta de inspección

En este caso, el ID de CSS de nuestro menú de navegación es site-navigation.

Todo lo que necesita hacer es ingresar la ID de CSS de su menú en la configuración del complemento con un hash al principio. En este caso, eso es #site-navigation.

Ingresando el ID del elemento que desea hacer pegajoso (en este caso, el menú de navegación)

No olvide hacer clic en el botón «Guardar cambios» en la parte inferior de la página.

Ahora, continúe y revise su menú fijo en vivo en su sitio web de WordPress. Debería permanecer en la página mientras se desplaza hacia abajo, así:

Ver el menú fijo en su sitio web

La siguiente opción en la página de configuración del complemento es definir el espacio entre la parte superior de la pantalla y el menú de navegación adhesivo. Solo necesita usar esta configuración si su menú se superpone a un elemento que no desea que se oculte. Si no es así, ignore esta configuración.

Recomendamos dejar marcada la casilla junto a la opción: ‘Buscar barra de administración’. Esto permite que el complemento agregue algo de espacio para la barra de administración de WordPress, que solo es visible para los usuarios registrados.

Aquí, puede ver que la barra de administración en nuestro sitio de prueba se muestra correctamente sobre el menú fijo:

La barra de administración de WordPress aparece encima del menú fijo

La siguiente opción le permite despegar 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:

El complemento de menú fijo también ofrece más opciones

Puede probar el aspecto de su sitio en dispositivos móviles o tabletas. Si no le gusta cómo se ve, simplemente agregue 780px para esta opción.

No olvide hacer clic en el botón Guardar cambios después de realizar cambios en sus opciones.

Método 2: agregar manualmente un menú de navegación flotante fijo

Este método requiere que agregue código CSS personalizado a su tema. No lo recomendamos para principiantes.

También le recomendamos que eche un vistazo a nuestra guía sobre cómo agregar fácilmente CSS personalizado a su sitio de WordPress antes de comenzar.

Primero, debes visitar Apariencia »Personalizar para iniciar el personalizador de temas de WordPress.

Agregar CSS personalizado en el tema de WordPress

A continuación, haga clic en ‘CSS adicional’ en el panel izquierdo y luego agregue este código CSS.

#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;
}

Nota: Esto producirá un menú de navegación con un fondo negro. Si desea un color diferente, cambie el número junto a background. Por ejemplo, usando background: #ffffff le dará un fondo de menú blanco.

Solo reemplaza #site-navigation con el ID de CSS de su menú de navegación y luego haga clic en el botón Publicar en la parte superior de la pantalla.

Continúe y visite su sitio web para ver su menú de navegación flotante en acción:

Un menú de navegación fijo / flotante creado con CSS

¿Qué pasa si su menú de navegación aparece normalmente debajo del encabezado del sitio en lugar de encima de él? Si es así, este código CSS podría superponerse al título y el encabezado del sitio o aparecer demasiado cerca antes de que el usuario se desplace:

El menú de navegación pegajoso se superpone ligeramente al título del sitio.

Esto se puede ajustar fácilmente agregando un margen al área de su encabezado usando algún código CSS adicional:

.site-branding {
margin-top:60px !important;
}

Reemplazar site-branding con la clase CSS de su área de encabezado. Ahora, el menú de navegación fijo ya no se superpondrá a su encabezado antes de que el usuario se desplace hacia abajo:

Ahora hay espacio para el título debajo del menú de navegación fijo.

Esperamos que este artículo le haya ayudado a agregar un menú de navegación flotante pegajoso a su sitio de WordPress. Es posible que también desee ver nuestra guía sobre cómo crear un tema personalizado de WordPress sin escribir ningún código, y nuestra comparación de los mejores complementos de creación de páginas de WordPress.

También podría gustarte

Cómo convertir RAW a JPG

Cómo usar la herramienta Black Point para editar fotos de iPhone y por qué es posible que desee hacerlo

Cómo responder llamadas con AirPods usando Siri

Cómo habilitar el modo oscuro en NordVPN

Cómo cambiar el fondo de escritorio en Windows 11

ETIQUETADO: Cómo, crear, fijo, flotante, menú, navegación, WordPress
ThemeLocal noviembre 19, 2021
Comparte este artículo
Facebook Twitter Pinterest Whatsapp Whatsapp
Cuota
¿Qué piensas?
Amor0
Triste0
Contento0
Somnoliento0
Enfadado0
Sin comentarios0
Guiño0
Artículo anterior Cómo configurar el ancho máximo de oEmbed en WordPress (4 métodos sencillos)
Artículo siguiente Cómo agregar fácilmente fuentes de iconos en su tema de WordPress
Deja un comentario

Deja una respuesta Cancelar la respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Publicación popular

SharePlay: Cómo hacer ejercicio con amigos usando Apple Fitness Plus
Cómo
HP Envy vs HP Pavilion: ¿Cuál es mejor?
Versus
Revisión de Philips Hue Centris
Reseñas de tecnología
Cómo cambiar el fondo del iPhone según la hora del día (2023)
Cómo
Revisión de la lámpara de mesa Philips Hue Go
Reseñas de tecnología
Esta oferta de Pixel 6a le brinda datos ilimitados a bajo precio
Ofertas

También podría gustarte

Cómo

Cómo convertir RAW a JPG

hace 10 horas 2 Minutos mínimos para leer
Cómo

Cómo usar la herramienta Black Point para editar fotos de iPhone y por qué es posible que desee hacerlo

hace 20 horas 3 Minutos mínimos para leer
Cómo

Cómo responder llamadas con AirPods usando Siri

hace 1 día 3 Minutos mínimos para leer
Cómo

Cómo habilitar el modo oscuro en NordVPN

hace 1 día 2 Minutos mínimos para leer
Cómo

Cómo cambiar el fondo de escritorio en Windows 11

hace 1 día 3 Minutos mínimos para leer
Cómo

Cómo duplicar fotos y videos en iPhone y iPad

hace 2 días 2 Minutos mínimos para leer
Cómo

iOS 16.4 Beta: Cómo atenuar automáticamente el video cuando se detectan destellos de luz

hace 2 días 2 Minutos mínimos para leer
Cómo

Cómo corregir el seguimiento de pasos inexacto de Apple Watch

hace 2 días 7 Minutos mínimos para leer
Mostrar más
ThemeLocal: consejos de blog que funcionan como magiaThemeLocal: consejos de blog que funcionan como magia
Síganos

© 2022 Themelocal. Reservados todos los derechos.

  • Términos de Uso
  • Política de privacidad
  • Política de cookies
  • Contactar

Removed from reading list

Deshacer
Welcome Back!

Sign in to your account

¿Perdiste tu contraseña?