Nota: Si bien hemos traducido las guías más populares al español, algunas guías están disponibles solamente en inglés.

Navegación del estilo

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.

All sites include options for changing the font, color, and size of your navigation's links. This guide explains how to customize your navigation on any site.

Antes de comenzar

Find the navigation style tweaks

The way that you change your navigation style depends on your site's version.

Navigation link styles are primarily set by your site's header. In the header editor, you can change:

  • The navigation layout
  • The navigation colors
  • The padding around text
  • Whether the navigation is fixed
  • 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 las fuentes y los tamaños. Para obtener más información, consulta las secciones a continuación.

Every template family has its own Site Styles, so there isn't one single rule for how to update your navigation links. Use these tips to find the style options your template supports:

  • To open Site Styles from the Home Menu, click Design, then Site Styles.
  • Scroll through the tweaks on the left and look for related tweaks. The tweaks usually include the word Navigation.
  • You can also hover over your site's navigation in the site preview on the right. When a blue highlighter box appears around it, click any navigation link. This helps filter out tweaks that don't affect the navigation links. When you're done, click Show All to go back to the main view.

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.

By default, your navigation font matches your site-wide font. To set a different font type or size for your navigation:

  1. Al editar una página, haz clic en el ícono del pincel y, a continuación, en Fuentes.
  2. En Estilos globales del texto, haz clic en Asignar estilos.
  3. Click Site Navigation.
  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. To change the size, click Size, then choose a preset Paragraph size, or choose Custom. To set a custom size, use the slider or manually enter a new rem value. Click Save to apply your changes.
Consejo: 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.

To change your navigation font, click the v icon next to the tweak name to open its drop-down menu. From here, you can change:

  • 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

The way you change your navigation color depends on your site's version.

Para cambiar los colores del enlace de navegación, cambia el tema cromático de la sección de encabezado. También puedes cambiar el tema cromático de la superposición de encabezado para dispositivo móvil.

Después de establecer un tema cromático, puedes personalizar aún más el tema estableciendo colores específicos para los enlaces de navegación.

Para cambiar los colores de los enlaces de navegación, haz clic en un ajuste de color en Estilos del sitio. Elige un nuevo color haciendo clic en un color en la parte superior del selector y, a continuación, seleccionando un tono dentro del cuadrado. También puedes introducir 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 del sitio.

Change the layout and spacing

The way you change the navigation layout depends on your site's version.

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

In some templates, you can change the position of the links. In Site Styles, look for tweaks called Navigation Position, Navigation Alignment, or something similar. To see what positions are available in your template, see the table below.

Tip: Some templates support fixed, or "sticky" navigation, that stays in the same position at the top of the browser while you scroll down the page.

Navigation display by template

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.

Here's how the Main Navigation displays on computers in these template families:

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, top center, can be split around the site title

Skye

Vertical, dentro de un recuadro superpuesto

Supply

Vertical, barra lateral izquierda

Tremont

Horizontal, top left/right

Wells

Vertical, barra lateral izquierda

Wexley

Horizontal, parte superior izquierda/central/derecha

York

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

Change link spacing

To change the space around navigation links, look for tweaks in Site Styles that change your header, banner, or navigation. While the tweaks vary by template, link spacing tweaks typically include words like Padding, Spacing, or Width.

Active and hover options (version 7.0)

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.

In some templates, there are additional options for navigation links depending on if they've been clicked. This is sometimes called their "state" or "phase." While the tweaks vary by template, look for these words:

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

For help with your template, visit its template guide or list of Site Styles tweaks.

Consejo: 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.

The way that you style your mobile navigation depends on your site's version.

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:

  • El ícono de menú siempre aparece en un dispositivo móvil, incluso si todas las páginas están en la sección no Vinculadas.
  • 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 de escritorio.

In many cases, mobile navigation inherits styles from the computer display to keep your branding consistent. Some templates have advanced mobile style options, which give you a finer degree of control. To learn more, visit your template's guide.

To explore which tweaks affect your mobile navigation, open your navigation in phone view before opening Site Styles:

  1. Switch the Device View to phone.
  2. Click the navigation link (usually a ☰) so your mobile navigation appears.
  3. Desde el Menú de Inicio, haz clic en Diseño y, luego, en Estilos del sitio. La navegación en dispositivos móviles continuará abierta.
Tip: If you can’t see your navigation on mobile, ensure that you haven’t set your background or header color to the same color as your navigation text. The links may display over this color on mobile.

Menu icon or link design by template

Here's how the ☰ icon or Menu link displays in these template families:

Familia de plantillas

Icon or link (Always shows on mobile)

Shows on computers...

Adirondack

☰ icon

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

Avenue

Menu link

  • In narrow browsers (640 px)

Aviator

Menu link

  • In narrow browsers (640 px)

Bedford

☰ icon

  • Automatically when links won't fit
  • In narrow browsers (640 px)

Brine

☰ icon. Change the style with the Mobile: Menu Icon section in Site Styles.

  • In narrow browsers (640 px by default. Change this with the Mobile Breakpoint tweak.)

Farro

☰ icon

  • In narrow browsers (640 px)

Five

☰ icon

  • In narrow browsers (640 px)

Flatiron

Menu link

  • In narrow browsers (640 px)

Forte

☰ icon

  • In narrow browsers (768 px)

Galapagos

☰ icon

  • In narrow browsers (724 px)

Ishimoto

Menu link

  • In narrow browsers (800 px)

Momentum

☰ icon

  • In narrow browsers (736 px)

Montauk

Menu link

  • In narrow browsers (640 px)

Native

Menu link

  • In narrow browsers (640 px)

Pacific

☰ icon

  • In narrow browsers (768 px)
  • To always show the icon on computers, select Always Use Overlay Nav in Site Styles.

Skye

☰ icon

  • Always displays

Supply

☰ icon

  • In narrow browsers (1024 px)

Tremont

☰ icon

  • In narrow browsers (640 px)
  • Automatically when links won't fit
  • To always show the icon on computers, select Nav Style: Icon in Site Styles

Wells

Menu link

  • In narrow browsers (800 px)

Wexley

Menu link

  • In narrow browsers (640 px)

York

☰ icon

  • In narrow browsers (768 px)

Empty mobile navigation icons

In some templates, the icon always appears on mobile, even if all your pages are in the Not Linked section.

You can hide the menu icon in these template families:

  • Familia Brine
  • Familia Farro

Go to the Home Menu, click Design, then click Site Styles. Scroll to the Mobile: Menu Icon section and set the Menu Icon Position tweak to Hide.

In these template families, there isn't a built-in way to hide the mobile navigation icon:

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

Consejo: 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.

Hide the collapsed menu on computers

To prevent the link or icon from showing on computers:

  • Keep navigation titles short.
  • Reduce the number of links in the menu. You can use folders to group related pages into drop-down menus, or, if your site is on version 7.0, move pages to Secondary or Footer Navigation.
  • 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....
¿Fue útil este artículo?
Usuarios a los que les pareció útil: 77 de 494
Navegación del estilo