Navegação de estilo

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:

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, clique no ícone do pincel e, em seguida, clique em Fontes .
2. Em Estilos gerais do texto, clique em Atribuir 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.

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

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.

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 a aparência e o posicionamento do ícone do menu em dispositivos 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.

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

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.

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.

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

Í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

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.