Obs.: embora os nossos guias mais acessados tenham sido traduzidos para o português, outros guias estão disponíveis apenas em inglês.

Navegação de estilo

A navegação do seu site é um conjunto de links que direciona os visitantes para o conteúdo do seu site. A navegação normalmente é exibida na parte superior do seu site, embora alguns versão 7.0templates suportem navegação em rodapés ou barras laterais.

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 começar

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
  • A aparência da navegação em computadores em comparação com dispositivos móveis

Você também pode usar opções em Estilos do Site para alterar fontes e tamanhos. Para saber mais, consulte as seções abaixo.

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.

Veja como fica no template Thorne, parte da família Brine:

thorne_site_styles.gif

Altere a fonte e o tamanho

A maneira como você altera sua fonte de navegação depende da versão do seu site.

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

  1. Ao editar uma página, clique no ícone do pincel e, em seguida, clique em Fontes .
  2. Em Estilos gerais do texto, clique em Atribuir estilos.
  3. Click Site Navigation.
  4. Para alterar a fonte, clique em Estilo e, em seguida, escolha Personalizado. Escolha uma nova família de fontes, peso, estilo e outros detalhes. Clique em Salvar para aplicar suas alterações.
  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.
Dica: para saber como a versão 7.1 usa valores rem para tamanhos de fonte, visite Alterar fontes.

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:

  • Nomes de fontes
  • Estilo
  • Tamanho
  • Altura da Linha
  • Espaçamento entre as letras

Se precisar de mais ajuda, acesse Como alterar fontes.

Alteração de cor

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

Para mudar as cores dos links de navegação, altere o tema de cores da seção de cabeçalho. Também é possível alterar o tema de cores da sobreposição do cabeçalho da versão móvel.

Depois de definir um tema de cores, você pode personalizar ainda mais o tema definindo cores específicas para os links de navegação.

Para alterar as cores do link de navegação, clique em um ajuste de cor em Estilos do site. Escolha uma nova cor clicando em uma cor na parte superior do seletor e, em seguida, selecionando um tom dentro do quadrado. Você também pode inserir um valor específico no campo de texto. Para obter mais ajuda, visite Mudar as cores ou o Guia de templates do seu site.

Change the layout and spacing

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

Para alterar a posição e o espaçamento dos seus links de navegação, edite o cabeçalho do seu site. Você também pode personalizar a aparência e posicionamento do ícone do menu em dispositivos móveis.

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

O layout de navegação do seu site depende do template do seu site e é exibido de forma diferente em dispositivos móveis. Dispositivos móveis maiores, como tablets, podem exibir os estilos de computador.

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

Template

Layout

Adirondack

Horizontal, superior ao centro

Avenue

Horizontal, superior esquerda/centro/direita

Aviator

Vertical, superior esquerda (cartão de visita/offset); ou horizontal, superior ao centro (pôster)

Bedford

Horizontal, superior direita

Brine

Horizontal, superior esquerda/centro/direita, pode ser ocultado No painel de Páginas, chama-se Navegação Primária.

Farro

Horizontal, superior esquerda/centro/direita, pode ser ocultado

Five

Vertical, na barra lateral (Posição superior de navegação: Nenhuma); ou horizontal superior esquerda/centro/direita (acima do banner, abaixo do banner)

Flatiron

Horizontal, superior esquerda

Forte

Horizontal, superior direita

Galapagos

Horizontal, superior ao centro

Ishimoto

Horizontal, superior esquerda/centro/direita

Momentum

Horizontal, na barra de navegação

Montauk

Horizontal, superior esquerda/centro/direita

Native

Horizontal, superior ao centro

Pacific

Horizontal, top center, can be split around the site title

Skye

Vertical, dentro de uma sobreposição

Supply

Vertical, barra lateral à esquerda

Tremont

Horizontal, top left/right

Wells

Vertical, barra lateral à esquerda

Wexley

Horizontal, superior esquerda/centro/direita

York

Horizontal, superior esquerda/centro/direita, pode ser ocultado

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)

Na versão 7.1, não é possível definir cores diferentes para links de navegação ativa e foco. Os links ativos são sempre sublinhados.

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:

  • Pairar - o link muda quando um visitante paira sobre ele.
  • Ativo - quando um visitante visita uma página em sua navegação, o link muda de estilo.

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

Dica: links de navegação externos não exibem estilos ativos, mesmo se conectarem a uma página em seu site.

Navegação móvel

Em dispositivos móveis, os links de navegação principal colapsam atrás de um link de Menu ou ícone ☰ (também conhecido como ícone de "hambúrguer"). Um visitante pode clicar ou tocar nele para revelar o menu completo. Isso ajuda com a usabilidade e mantém seu site amigável para dispositivos móveis.

O link ou ícone também pode aparecer nos navegadores de computador, dependendo do tamanho do navegador do visitante, do número de links no menu ou do comprimento dos títulos de navegação.

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

Para estilizar a sua navegação móvel, edite o cabeçalho do seu site. No editor de cabeçalho, clique no botão Dispositivo móvel para definir estilos específicos para dispositivos móveis, incluindo o layout e o tipo de ícone de menu.

Lembre-se:

  • O ícone de menu sempre aparece no dispositivo móvel, mesmo que todas as páginas estejam na seção Não Vinculada.
  • Não é possível alterar o tamanho da fonte de navegação móvel.
  • Não é possível fazer com que o ícone do menu apareça sempre em um computador.

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. No Menu Inicial, clique em Design e depois em Estilos do Site. A navegação móvel permanecerá aberta.
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:

Família de template

Icon or link (Always shows on mobile)

Shows on computers...

Adirondack

☰ icon

  • In narrow browsers (640 px)
  • Para sempre mostrar o ícone nos computadores, marque Sempre mostrar navegação em Estilo do Site.

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:

  • Família Brine
  • Família 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

Dica: você pode ocultar o ícone de navegação móvel adicionando código personalizado. Para saber mais, visite esta publicação no Squarespace Forum.

Tenha em mente que nosso suporte não cobre modificações no código personalizado. Por isso, não podemos ajudar na configuração ou na resolução de problemas de soluções baseadas em 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.
  • Se o seu site estiver na versão 7.0, mude para um template diferente. Clique no botão Versão 7.0 acima e, em seguida, explore as opções do Exibir em computadores... .
Este artigo foi útil?
Utilizadores que acharam útil: 75 de 473
Navegação de estilo