Navegación del estilo

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:

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. Al editar una página, haz clic en el ícono del pincel y, a continuación, en Fuentes.
2. En Estilos globales de texto, 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.

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.

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.

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.

Para cambiar la posición y el espaciado de los enlaces de navegación, edita cómo aparece el encabezado de tu sitio en equipos. 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.

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

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.

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.

Nota: 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:

Í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

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.