Navegação de estilo

Personalize a fonte, a cor e o tamanho dos links de navegação no seu site.

Ultima atualização 16 de fevereiro de 2025

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.

Todos os sites incluem opções para alterar a fonte, a cor e o tamanho dos links de navegação. Este guia explica como personalizar sua navegação em qualquer site.

Antes de começar

Encontre os ajustes de estilo de navegação

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

Os estilos de link de navegação são definidos principalmente pelo cabeçalho do site. No editor de cabeçalho, você pode alterar:

  • O layout de navegação
  • As cores de navegação
  • O espaçamento do link de navegação
  • A margem em torno do texto
  • Se a navegação for corrigida
  • A aparência da navegação em computadores em comparação com dispositivos móveis

Você também pode usar opções dos estilos do site para alterar fontes e tamanhos. Saiba mais nas seções abaixo.

Cada família de templates tem seus próprios estilos do site, portanto, não há uma única regra sobre como atualizar seus links de navegação. Use estas dicas para encontrar as opções de estilo aceitas pelo seu template:

  • Para abrir os estilos do site, abra o painel Design e clique em Estilos do site.
  • Role entre os ajustes à esquerda e procure os ajustes relacionados. Os ajustes geralmente incluem a palavra Navegação.
  • Você também pode passar o cursor sobre a navegação do site na visualização do site à direita. Quando uma caixa de marcador azul aparecer ao redor dela, clique num link de navegação. Isso filtra ajustes que não afetam os links de navegação. Ao terminar, clique em Mostrar tudo para voltar à exibição principal.

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.

Por padrão, sua fonte de navegação corresponde à fonte em todo o site. Para definir um tipo de fonte ou tamanho diferente para sua navegação:

  1. Ao editar uma página, abra "Estilos do site" e clique em > ao lado de "Fontes".
  2. Clique em "Alocar estilos".
  3. Clique em Navegação do site.
  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. Para alterar o tamanho, clique em Tamanho e escolha um tamanho de Parágrafo predefinido ou escolha Personalizado. Para definir um tamanho personalizado, use o controle deslizante ou insira manualmente um novo valor rem. Clique em Salvar para aplicar as alterações.

para saber como a versão 7.1 usa valores rem para tamanhos de fonte, visite Alterar fontes.

Para alterar a fonte de navegação, clique no ícone v ao lado do nome do ajuste para abrir o menu suspenso. Aqui é possível alterar:

  • 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

O modo de alterar a cor da navegação depende da versão do site e do estilo do cabeçalho.

Cheio e gradiente Temático e dinâmico
  1. Ao editar uma página, abra o editor do cabeçalho
  2. No editor do cabeçalho, clique em Estilo.
  3. Clique em Cor da navegação para editar a cor dos links de navegação e dos ícones de redes sociais integrados.
  1. Ao editar uma página, abra "Estilos do site" e clique em > ao lado de "Cores".
  2. Clique no ícone do lápis no tema de cores selecionado para o cabeçalho do site.
  3. Altere o ajuste dos links de navegação.
  4. Clique em Salvar para salvar as alterações e continuar editando; ou clique em Sair e depois em Salvar para fechar o editor.

Também é possível alterar o tema de cores da sobreposição do cabeçalho da versão móvel.

Para alterar as cores do link de navegação, clique em um ajuste de cor nos estilos do site. Para escolher outra cor, clique numa cor no topo do seletor e, em seguida, selecione um tom dentro do quadrado. Você também pode informar um valor específico no campo de texto. Saiba mais em Mudando as cores ou no Guia de templates do seu site.

Alterar o layout e o espaçamento

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

Para alterar a posição e o espaçamento dos links de navegação, edite como o cabeçalho do site aparece nos computadores. Você também pode personalizar o visual e o posicionamento do ícone do menu nos aparelhos móveis.

Em alguns modelos, você pode alterar a posição dos links. Nos estilos do site, procure por ajustes chamados Posição de navegação, Alinhamento de navegação ou algo semelhante. Para saber as posições disponíveis em seu template, consulte a tabela abaixo.

alguns templates aceitam navegação fixa ou “presa”, que permanece na mesma posição na parte superior do navegador enquanto você rola a página para baixo.

Exibição de navegação por 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.

Veja como a navegação principal é exibida em computadores nestas famílias de templates:

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, superior central, pode ser dividido em torno do título do site

Skye

Vertical, dentro de uma sobreposição

Supply

Vertical, barra lateral à esquerda

Tremont

Horizontal, superior direito/esquerdo

Wells

Vertical, barra lateral à esquerda

Wexley

Horizontal, superior esquerda/centro/direita

York

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

Alterar o espaçamento entre links

Para alterar o espaço em torno dos links de navegação, procure por ajustes nos estilos de site que alteram seu cabeçalho, banner ou navegação. Enquanto os ajustes variam de acordo com o template, os ajustes de espaçamento de links geralmente incluem palavras como preenchimento, espaçamento ou largura.

Opções ativas e de pairar (versão 7.0)

Acessando o recurso

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.

Alguns templates oferecem mais opções aos links de navegação, dependendo se foram clicados (o "estado" ou "fase" deles). Como os ajustes variam de acordo com o template, procure por estas palavras:

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

Para obter ajuda com seu template, acesse o guia de templates.

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.

A maneira como você estiliza sua navegação móvel depende da versão do seu site.

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:

  • Os botões de cabeçalho sempre aparecem com os links de navegação atrás do link Menu ou do ícone ☰.
  • 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 sempre apareça em um computador.
  • Para remover o ícone de menu do cabeçalho, certifique-se de que todas as suas páginas estejam na seção Não vinculadase desative todos os elementos do cabeçalho, exceto o carrinho de compras. Habilitar o carrinho não fará com que o ícone do menu apareça.

Em muitos casos, a navegação móvel herda estilos da tela do computador para manter sua marca consistente. Alguns templates têm opções avançadas de estilos móveis, que oferecem um grau mais fino de controle. Para saber mais, acesse o guia do template.

Para explorar quais ajustes afetam sua navegação móvel, abra sua navegação na visualização do telefone antes de abrir os Estilos do Site:

  1. Mude a visualização do dispositivo para o telefone.
  2. Clique no link de navegação (geralmente um ☰) para que a navegação móvel apareça.
  3. No Menu Inicial, clique em Site, depois em Design e por último em Estilos do site. A navegação móvel permanecerá aberta.

caso não veja a navegação no na versão móvel, veja se você não deixou a cor do fundo ou do cabeçalho igual à do texto da navegação. Na versão móvel, os links podem aparecer sobre essa cor.

Ícone de menu ou design de link por template

Veja como o ícone ☰ ou o link Menu é exibido nestas famílias de templates:

Família de template

Ícone ou link (sempre aparece em dispositivos móveis)

É exibido em computadores...

Adirondack

☰ ícone

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

Avenue

Link do menu

  • Em navegadores estreitos (640 px)

Aviator

Link do menu

  • Em navegadores estreitos (640 px)

Bedford

☰ ícone

  • Automaticamente quando os links não se encaixam
  • Em navegadores estreitos (640 px)

Brine

☰ ícone. Altere o estilo com a seção do ícone do menu Móvel: nos estilos do site.

  • Em navegadores estreitos (640 px por padrão. Altere isso com o ajuste de ponto de interrupção móvel.)

Farro

☰ ícone

  • Em navegadores estreitos (640 px)

Five

☰ ícone

  • Em navegadores estreitos (640 px)

Flatiron

Link do menu

  • Em navegadores estreitos (640 px)

Forte

☰ ícone

  • Em navegadores estreitos (768 px)

Galapagos

☰ ícone

  • Em navegadores estreitos (724 px)

Ishimoto

Link do menu

  • Em navegadores estreitos (800 px)

Momentum

☰ ícone

  • Em navegadores estreitos (736 px)

Montauk

Link do menu

  • Em navegadores estreitos (640 px)

Native

Link do menu

  • Em navegadores estreitos (640 px)

Pacific

☰ ícone

  • Em navegadores estreitos (768 px)
  • Para sempre mostrar o ícone em computadores, selecione Sempre usar sobreposição nav em Estilos do Site.

Skye

☰ ícone

  • Sempre exibe

Supply

☰ ícone

  • Em navegadores estreitos (1024 px)

Tremont

☰ ícone

  • Em navegadores estreitos (640 px)
  • Automaticamente quando os links não se encaixam
  • Para sempre mostrar o ícone em computadores, selecione Estilo de navegação: ícone em Estilos do Site..

Wells

Link do menu

  • Em navegadores estreitos (800 px)

Wexley

Link do menu

  • Em navegadores estreitos (640 px)

York

☰ ícone

  • Em navegadores estreitos (768 px)

Ícones de navegação móvel vazios

Em alguns templates, o ícone sempre aparece no celular, mesmo que todas as suas páginas estejam na seção Não vinculada.

É possível ocultar o ícone de menu nessas famílias de templates:

  • Família Brine
  • Família Farro

Abra o painel Design e clique em Estilos do site. Role até a seção Versão móvel: ícone do menu e defina o ajuste Posição do Ícone do Menu como Ocultar.

Nessas famílias de templates, não há uma maneira integrada de ocultar o ícone de navegação móvel:

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

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.

Ocultar o menu recolhido em computadores

Para evitar que o link ou o ícone apareça nos computadores:

  • Mantenha os títulos de navegação curtos.
  • Reduza o número de links no menu. Você pode agrupar páginas relacionadas em uma lista suspensa ou, se o site estiver na versão 7.0, transferir páginas para a navegação secundária ou o rodapé.
  • 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... .
Footer Image
  • Peça ajuda à nossa comunidade

  • Peça ajuda à nossa comunidade sobre personalizações avançadas.

  • Contrate um Squarespace Expert

  • Ganhe destaque on-line com a ajuda de um designer ou desenvolvedor experiente.