Navegación del estilo

Personaliza la fuente, el color y el tamaño de los enlaces de navegación de tu sitio.

Última actualización: 16 de febrero de 2025

La navegación del sitio es un conjunto de enlaces que dirige a los visitantes al contenido del sitio. La navegación suele aparecer en la parte superior del sitio, aunque algunas plantillas de la versión 7.0 admiten la navegación en pies de página o barras laterales.

Todos los sitios incluyen opciones para cambiar la fuente, el color y el tamaño de los enlaces de navegación. En esta guía, se explica cómo personalizar la navegación en cualquier sitio.

Antes de comenzar

Encontrar los ajustes de estilo de navegación

La forma en que cambias el estilo de navegación depende de la versión de tu sitio.

Los estilos de enlace de navegación se establecen principalmente en el encabezado de tu sitio. En el editor de encabezado, puedes cambiar:

  • El diseño de navegación
  • Los colores de navegación
  • Espaciado del enlace de navegación
  • El relleno alrededor del texto
  • Si la navegación está fija
  • Cómo se ve la navegación en equipos de escritorio frente a dispositivos móviles

También puedes utilizar las opciones de Estilos del sitio para cambiar fuentes y tamaños. Para obtener más información, revisa las secciones a continuación.

Cada familia de plantillas tiene sus propios estilos del sitio, por lo que no existe una sola regla para actualizar los enlaces de navegación. Sigue estos consejos para encontrar las opciones de estilo que admite tu plantilla:

  • Para abrir estilos de sitio, abre el panel Diseño y, a continuación, haz clic en Estilos del sitio.
  • Desplázate por los ajustes de la izquierda y busca los ajustes relacionados. Por lo general, los ajustes incluyen la palabra Navegación.
  • También puedes desplazar el cursor sobre los enlaces de navegación de tu sitio en la vista previa del sitio, que se encuentra a la derecha. Cuando aparece un cuadro de resaltado azul alrededor, haz clic en cualquier enlace de navegación. Esto ayuda a filtrar los ajustes que no afectan los enlaces de navegación. Cuando hayas terminado, haz clic en Mostrar todos para regresar a la vista principal.

Este es un ejemplo de cómo luce en la plantilla Thorne, que es parte de la familia Brine:

thorne_site_styles.gif

Cambia la fuente y el tamaño:

La forma en que cambia la fuente de navegación depende de la versión del sitio.

De forma predeterminada, la fuente de navegación coincide con la fuente de todo el sitio. Para configurar otro tipo de fuente o tamaño para la navegación:

  1. Mientras editas una página, abre Estilos del sitio y, a continuación, haz clic en > junto a Fuentes.
  2. Haz clic en Asignar estilos.
  3. Haz clic en Navegación del sitio.
  4. Para cambiar la fuente, haz clic en Estilo y, a continuación, elige Personalizado. Selecciona una nueva familia de fuentes, peso, estilo y otros detalles. Haz clic en Guardar para aplicar los cambios.
  5. Para cambiar el tamaño, haz clic en Tamaño y, a continuación, elige un tamaño de párrafo preestablecido o selecciona Personalizado. Para establecer un tamaño personalizado, utiliza el control deslizante o introduce manualmente un nuevo valor rem. Haz clic en Guardar para aplicar los cambios.

Para obtener información sobre cómo la versión 7.1 utiliza valores rem para tamaños de fuente, visita Cómo cambiar fuentes.

Para cambiar la fuente de navegación, haz clic en el ícono v junto al nombre del ajuste para abrir el menú desplegable. Desde aquí, puedes cambiar:

  • Los nombres de las fuentes
  • Estilo
  • Tamaño
  • La altura de las líneas
  • Los espacios entre las letras

Si necesitas más ayuda, consulta Cambiar fuentes.

Cambiar el color

La forma en que cambias el color de la navegación depende de la versión y el estilo de encabezado de tu sitio.

Estilos de encabezado Sólido y Degradado Estilos de encabezado Tema y Dinámico
  1. Mientras editas una página, abre el editor de encabezado
  2. En el editor de encabezado, haz clic en Estilo.
  3. Haz clic en Color de navegación para editar el color de los enlaces de navegación e iconos de redes sociales integrados.
  1. Mientras editas una página, abre Estilos del sitio y, a continuación, haz clic en > junto a Colores.
  2. Haz clic en el icono del lápiz en la paleta de colores seleccionada para el encabezado de tu sitio.
  3. Cambia el ajuste de Enlaces de navegación.
  4. Haz clic en Guardar para guardar tus cambios y seguir editando, o haz clic en Salir y luego en Guardar para cerrar el editor.

También puedes cambiar el tema cromático de la superposición de encabezado para dispositivo móvil.

Para cambiar los colores de los enlaces de navegación, haz clic en un ajuste de color en estilos del sitio. Elige un color nuevo haciendo clic en uno de los colores que se encuentran en la parte superior del selector y, luego, elige un tono en el recuadro. También puedes ingresar un valor específico en el campo de texto. Para obtener más ayuda, visita Cómo cambiar colores o la guía de plantillas de tu sitio.

Cambiar el diseño y el espaciado

La forma de cambiar el diseño de navegación depende de la versión de tu sitio.

Para cambiar la posición y el espaciado de los enlaces de navegación, edita cómo aparece el encabezado de tu sitio en computadoras de escritorio. También puedes personalizar el aspecto y la ubicación del ícono del menú en dispositivos móviles.

En algunas plantillas, puedes cambiar la posición de los enlaces. En los estilos del sitio, busca los ajustes Posición de navegación, Alineación de navegación o algo similar. Para conocer las posiciones disponibles en la plantilla, revisa la tabla a continuación.

Algunas plantillas admiten navegación fija, que permanece en la misma posición en la parte superior del navegador mientras te desplazas hacia abajo por la página.

Aspecto de la navegación en cada plantilla

El diseño de navegación del sitio depende de la plantilla del sitio y se muestra de forma diferente en los dispositivos móviles. Los dispositivos móviles más grandes, como tabletas, pueden mostrar los estilos de un equipo de escritorio.

A continuación, se muestra la navegación principal en los equipos de estas familias de plantillas:

Plantilla

Diseño

Adirondack

Horizontal, parte superior central

Avenue

Horizontal, parte superior izquierda/central/derecha

Aviator

Vertical, parte superior izquierda (Tarjeta de negocio/Posición de desplazamiento); u horizontal, parte superior central (Póster)

Bedford

Horizontal, parte superior derecha

Brine

Horizontal, parte superior izquierda/central/derecha, puede ocultarse En el Panel de páginas, se denomina "Navegación principal".

Farro

Horizontal, parte superior izquierda/central/derecha, puede ocultarse

Five

Vertical, en la barra lateral (Posición de la navegación superior: Ninguna); u horizontal parte superior izquierda/central/derecha (Arriba del banner, abajo del banner)

Flatiron

Horizontal, parte superior izquierda

Forte

Horizontal, parte superior derecha

Galapagos

Horizontal, parte superior central

Ishimoto

Horizontal, parte superior izquierda/central/derecha

Momentum

Horizontal, en la barra de navegación

Montauk

Horizontal, parte superior izquierda/central/derecha

Native

Horizontal, parte superior central

Pacific

Horizontal, parte superior central, puede dividirse alrededor del título

Skye

Vertical, dentro de un recuadro superpuesto

Supply

Vertical, barra lateral izquierda

Tremont

Horizontal, arriba a la izquierda/derecha

Wells

Vertical, barra lateral izquierda

Wexley

Horizontal, parte superior izquierda/central/derecha

York

Horizontal, parte superior izquierda/central/derecha, puede ocultarse

Cambiar el espaciado entre enlaces

Para cambiar el espacio alrededor de los enlaces de navegación, busca ajustes en los estilos del sitio que cambien el encabezado, el banner o la navegación. Si bien los ajustes varían según la plantilla, los ajustes de espaciado de vínculos suelen incluir palabras como Relleno, Espaciado o Ancho.

Opciones activas y de desplazamiento (versión 7.0)

Cómo acceder a esta función

En la versión 7.1 , no es posible establecer diferentes colores para los enlaces de navegación activos y de posicionar el cursor. Los enlaces activos siempre están subrayados.

En algunas plantillas, hay más opciones para los enlaces de navegación según si se ha hecho clic en ellos. En ocasiones a esto se le llama su “estado“ o “fase“. Si bien los ajustes varían según la plantilla, busca estas palabras:

  • Posicionar el cursor: El enlace cambia cuando el visitante posiciona el cursor sobre él.
  • Activo: Cuando la persona que visita el sitio ingresa en una de las páginas de tu navegación, su enlace cambia de estilo.

Para obtener ayuda con tu plantilla, consulta la guía de plantillas.

Los enlaces de navegación externa no mostrarán los estilos activos, incluso si dirigen a una página de tu sitio.

Navegación en dispositivos móviles

En dispositivos móviles, los enlaces de navegación principal se contraen detrás de un enlace o ícono ☰ (también conocido como ícono de hamburguesa) en Menú. Un visitante puede hacer clic en este o pulsarlo para mostrar el menú completo. Esto ayuda con la usabilidad y mantiene al sitio apto para dispositivos móviles.

El enlace o ícono también puede aparecer en los navegadores de escritorio dependiendo del tamaño del navegador del visitante, el número de enlaces del menú o la longitud de los títulos de navegación.

La forma en que diseñas tu navegación móvil depende de la versión de tu sitio.

Para dar estilo a la navegación móvil, edita el encabezado del sitio. En el editor de encabezados, haz clic en el ícono Móvil para establecer estilos específicos para dispositivo móviles, incluidos el diseño y el tipo de ícono de menú.

Ten en cuenta lo siguiente:

  • Los botones de encabezado siempre aparecen con los enlaces de navegación detrás del enlace Menú o el ícono ☰.
  • No es posible cambiar el tamaño de la fuente de navegación móvil.
  • No es posible hacer que el ícono del menú aparezca siempre en un equipo.
  • Para eliminar el ícono de menú del encabezado, asegúrate de que todas las páginas estén en la sección No vinculadas y desactiva todos los elementos del encabezado, excepto el carrito de compras. Si habilitas el carrito, no aparecerá el ícono del menú.

En muchos casos, la navegación móvil hereda estilos de la pantalla del equipo para mantener la coherencia de la gestión de marca. Algunas plantillas tienen opciones avanzadas de estilo para dispositivos móviles, lo que te da un mayor grado de control. Para obtener más información, visita la guía de tu plantilla.

Para explorar qué ajustes afectan la navegación en dispositivos móviles, abre la navegación en la vista de teléfono antes de abrir los estilos del sitio:

  1. Cambia la vista en dispositivo a teléfono.
  2. Haz clic en el enlace de navegación (por lo general, un ☰) para que aparezca la navegación en dispositivos móviles.
  3. En el menú de Inicio, haz clic en Sitio web, en Diseño y, luego, en Estilos del sitio. La navegación en dispositivos móviles continuará abierta.

Si no puedes ver tu navegación en los dispositivos móviles, cerciórate de no haber configurado el color de fondo o del encabezado con el mismo color que el texto de la navegación. Los enlaces podrían aparecer sobre este color en los dispositivos móviles.

Diseño de ícono de menú o enlace por plantilla

A continuación, se muestra cómo se ve el ícono ☰ o el enlace de menú en estas familias de plantillas:

Familia de plantillas

Ícono o enlace (se muestra siempre en dispositivo móvil)

Se muestra en equipos...

Adirondack

Ícono ☰

  • En navegadores estrechos (640 px)
  • Para mostrar siempre el ícono en equipos de escritorio, marca Mostrar siempre navegación en Estilos del sitio.

Avenue

Enlace de menú

  • En navegadores estrechos (640 px)

Aviator

Enlace de menú

  • En navegadores estrechos (640 px)

Bedford

Ícono ☰

  • Automáticamente cuando los enlaces no se ajustan
  • En navegadores estrechos (640 px)

Brine

Ícono ☰. Cambia el estilo con la sección Dispositivo móvil: ícono de menu en estilos del sitio.

  • En navegadores estrechos (640 px de forma predeterminada. Cambia esto con el ajuste Punto de ruptura en dispositivo móvil.)

Farro

Ícono ☰

  • En navegadores estrechos (640 px)

Five

Ícono ☰

  • En navegadores estrechos (640 px)

Flatiron

Enlace de menú

  • En navegadores estrechos (640 px)

Forte

Ícono ☰

  • En navegadores estrechos (768 px)

Galapagos

Ícono ☰

  • En navegadores estrechos (724 px)

Ishimoto

Enlace de menú

  • En navegadores estrechos (800 px)

Momentum

Ícono ☰

  • En navegadores estrechos (736 px)

Montauk

Enlace de menú

  • En navegadores estrechos (640 px)

Native

Enlace de menú

  • En navegadores estrechos (640 px)

Pacific

Ícono ☰

  • En navegadores estrechos (768 px)
  • Para mostrar siempre el ícono en un equipo, selecciona Usar siempre navegador superpuesto en estilos del sitio.

Skye

Ícono ☰

  • Siempre aparece

Supply

Ícono ☰

  • En navegadores estrechos (1024 px)

Tremont

Ícono ☰

  • En navegadores estrechos (640 px)
  • Automáticamente cuando los enlaces no se ajustan
  • Para mostrar siempre el ícono en un equipo, selecciona Estilo de navegación: ícono en estilos del sitio.

Wells

Enlace de menú

  • En navegadores estrechos (800 px)

Wexley

Enlace de menú

  • En navegadores estrechos (640 px)

York

Ícono ☰

  • En navegadores estrechos (768 px)

Íconos de navegación en dispositivos móviles vacíos

En algunas plantillas, el ícono siempre aparece en dispositivos móviles, incluso si todas las páginas están en la sección No vinculada.

Puedes ocultar el ícono de menú en estas familias de plantillas:

  • Familia Brine
  • Familia Farro

Abre el panel Diseño y, a continuación, haz clic en Estilos del sitio. Desplázate hasta la sección de Ícono de menú Móvil: y configura el ajuste de Posición del ícono de menú en Ocultar.

En estas familias de plantillas, no existe una forma integrada de ocultar el ícono de navegación en dispositivos móviles:

  • Bedford
  • Forte
  • Galapagos
  • Montauk
  • Wells
  • York

puedes ocultar el ícono de navegación móvil añadiendo código personalizado. Para obtener más información, visita esta publicación en el Squarespace Forum.

Ten en cuenta que las modificaciones al código personalizado están fuera del alcance de nuestro soporte técnico. Esto significa que no podemos ayudarte a configurar ni resolver problemas de las soluciones basadas en código.

Ocultar el menú contraído en los equipos

Para evitar que el enlace o el ícono se muestren en los equipos:

  • Mantén breves los títulos de navegación.
  • Reduce el número de enlaces del menú. Puedes agrupar páginas relacionadas en menús desplegables o, si tu sitio está en la versión 7.0, mover páginas a navegación secundaria o pie de página.
  • Si el sitio está en la versión 7.0, cambia de plantilla. Haz clic en la pestaña Versión 7.0 anterior y, a continuación, explora las opciones Se muestra en equipos....
Footer Image
  • Recibe ayuda de nuestra comunidad

  • Recibe la ayuda de nuestra comunidad para personalizaciones avanzadas.

  • Contrata a un Squarespace Expert

  • Destácate en línea con la ayuda de un diseñador o desarrollador con experiencia.