Como Estilizar Menus de Navegação do WordPress (Atualizado)

Um menu bem estilizado pode fazer uma grande diferença. Ele pode melhorar a aparência geral do seu site, facilitar para os visitantes encontrarem o que procuram e até mesmo incentivá-los a clicar em certas páginas.

Aqui na WPBeginner, vimos todo tipo de maneiras criativas de estilizar menus. Também experimentamos com a estilização do nosso próprio menu de navegação várias vezes ao longo dos anos. Portanto, queremos compartilhar o que funciona melhor para diferentes situações.

Neste artigo, mostraremos como estilizar seu menu de navegação do WordPress de 5 maneiras diferentes.

Por Que Estilizar Seu Menu de Navegação do WordPress?

Seu menu de navegação do WordPress é o mapa do seu site, guiando os visitantes para as páginas mais importantes. Ele aparece no topo da maioria dos sites, tornando-se um local privilegiado para chamar a atenção e influenciar como os usuários exploram seu conteúdo.

Estilizar seu menu de navegação vai além de apenas torná-lo bonito. Ele pode melhorar significativamente a experiência do usuário do seu site e, por sua vez, impulsionar sua otimização para mecanismos de busca (SEO).

Se o design do seu menu for difícil de usar, os visitantes podem ter dificuldade em encontrar o que procuram e sair frustrados. Por outro lado, um menu claro e visualmente atraente pode incentivá-los a clicar em diferentes seções e passar mais tempo no seu site.

Como resultado, você pode aumentar as visualizações de página do seu site e reduzir sua taxa de rejeição.

Este guia detalhará diferentes métodos para estilizar seu menu de navegação, dependendo do seu tema WordPress e nível de conforto. Você pode usar os links rápidos abaixo para navegar por este tutorial e encontrar o método que funciona melhor para você:

• Método 1: Personalize seu Menu de Navegação com o Editor de Site Completo (Temas de Bloco)
• Método 2: Personalize seu Menu de Navegação com o Personalizador de Tema (Temas Clássicos)
• Método 3: Personalize seu Menu de Navegação com um Plugin Page Builder (Recomendado)
• Método 4: Personalize seu Menu de Navegação com o Editor CSS Visual (Mais Personalizável)
• Method 5: Customize Your Navigation Menu With Code (Advanced)

Método 1: Personalize seu Menu de Navegação com o Editor de Site Completo (Temas de Bloco)

Se você estiver usando um tema de bloco e quiser estilizar o menu de navegação do seu site usando o Editor de Site Completo, este é o método para você.

Primeiro, acesse seu painel do WordPress e navegue até Aparência » Editor.

Aqui, você verá opções para personalizar diferentes partes do seu tema de bloco.

Clique em ‘Navegação’.

Na página seguinte, clique no ícone de lápis ‘Editar’.

Isso abrirá o editor de blocos, onde você pode editar seu bloco de Navegação.

Uma vez no editor de blocos, clique no bloco ‘Lista de Páginas’ que exibe as páginas do seu site WordPress como itens do menu de navegação.

Em seguida, clique em ‘Editar’.

Uma janela pop-up aparecerá agora, informando que você pode editar o bloco Lista de Páginas. Você pode editar, remover, reordenar e adicionar novos itens ao menu no bloco.

Clique em ‘Editar’ para continuar.

O editor de blocos para o menu de navegação funciona como ao editar uma página ou postagem. Sinta-se à vontade para adicionar outros elementos de menu como links personalizados, um botão de chamada para ação, um formulário de pesquisa, um logotipo do site e muito mais.

Se você quiser um mergulho mais profundo no gerenciamento de menus com o Editor de Site Completo, confira a seção sobre como editar seu menu de navegação em nosso guia de Edição de Site Completo. Essa seção também fala sobre a criação de submenus.

Agora, vamos ao estilo. Clique em qualquer bloco para começar.

Dependendo do bloco, a barra de ferramentas pode oferecer algumas opções de personalização. Por exemplo, se você selecionar um Link de Página, poderá negritar, itálicar, riscar e reordenar conforme necessário.

Você pode usar essas ferramentas para destacar um único item do menu em relação aos outros.

No painel de configurações à direita, mude para a aba ‘Bloco’ e, abaixo dela, navegue até a aba ‘Estilos’.

Aqui, você pode personalizar a cor, tipografia, dimensões, bordas e sombras do seu bloco.

Blocos tendem a ter configurações de Estilos padrão. Por exemplo, se você estiver editando um Link de Página, poderá ver apenas opções como ‘Tamanho da Fonte’ e ‘Largura’.

Mas não se preocupe. Basta clicar no menu de três pontos ao lado dessas opções para habilitar mais possibilidades de personalização, como alterar a família da fonte e o espaçamento entre letras.

Da mesma forma, se você tiver um bloco de Botão no seu menu de navegação, clicar nele revelará opções para personalizar seu estilo, texto, cor de fundo, tipografia, dimensões, borda e até sombra.

Você pode ler nosso guia sobre como adicionar um botão de chamada para ação para mais informações.

Se você quiser alterar a cor de fundo do seu menu de navegação, você terá que fazer isso editando o template de cabeçalho do seu tema.

Para abri-lo, basta clicar no campo de busca de comandos no topo que diz ‘Navegação’. Em seguida, digite ‘Cabeçalho’ e pressione a tecla Enter.

Agora, abra a Visualização de Lista e selecione Grupo.

Este grupo consiste no título do site do seu cabeçalho e no menu de navegação.

Em seguida, abra a aba ‘Estilos’ na barra lateral de configurações do Bloco e clique em ‘Fundo’ na seção Cor.

Depois disso, basta escolher uma cor de fundo para o seu modelo de cabeçalho.

Assim que estiver satisfeito com o estilo do seu menu de navegação, basta clicar no botão ‘Salvar’, e seu novo menu e cabeçalho estarão ativos no seu blog WordPress ou site.

Veja como nosso menu de navegação aparece em nosso site de demonstração:

Lembre-se de que as escolhas de estilo que você terá dependem das opções de estilo gerais do seu tema específico.

Se você quiser personalizar os estilos globais do seu tema, precisará clicar no botão ‘Estilos’ no canto superior direito.

A partir daqui, você pode alterar a tipografia, as cores e o layout de todo o site.

Para mais informações, confira a seção sobre como alterar os estilos globais do seu site no guia de Edição Completa do Site.

Método 2: Personalize seu Menu de Navegação com o Personalizador de Tema (Temas Clássicos)

Este método é para usuários com temas clássicos do WordPress que desejam estilizar seu menu de navegação usando o Personalizador de Tema integrado.

Assim como no método anterior, focaremos em estilizar a aparência do menu em vez de gerenciar os próprios itens do menu.

Se você quiser aprender como criar menus e gerenciá-los em temas clássicos, confira nosso guia sobre como adicionar um menu de navegação no WordPress. Ele cobre a criação de menus com o Personalizador, a atribuição deles a diferentes locais de menu e a adição de menus como widgets.

Para usar o Personalizador de Temas, vá para o seu painel do WordPress e navegue até Aparência » Personalizar. Em seguida, clique no botão ‘Personalizar’ ao lado do seu tema ativo.

Aqui, você verá opções para personalizar vários aspectos do seu tema, o que dependerá do tema que você está usando. Na maioria dos casos, os temas do WordPress têm uma opção ‘Menus’, mas desenvolvedores de terceiros podem adicionar outras configurações também.

Por exemplo, o tema Sydney tem um Construtor de Cabeçalho dedicado para personalização de menus. Certifique-se de consultar a documentação do seu tema para ver se eles adicionam configurações especiais de menu.

Se o seu tema não tiver essas opções de personalização, não se preocupe. Podemos estilizar facilmente o menu usando CSS personalizado.

Primeiro, clique na seção 'Menus'.

Na próxima página, clique no ícone de engrenagem 'Configurações' e depois selecione 'Classes CSS'.

Isso permite que você atribua uma classe CSS exclusiva a cada item do menu, permitindo que você os estilize individualmente mais tarde.

Em seguida, role o painel para baixo.

Em seguida, abra seu menu principal.

O que você quer fazer agora é encontrar o item do menu que deseja modificar e clicar para expandi-lo.

Você verá uma nova opção para adicionar uma classe CSS personalizada. No exemplo abaixo, estamos apenas adicionando a classe CSS contact-us à nossa página Fale Conosco.

Depois de atribuir classes CSS aos seus itens de menu, volte ao menu principal no Personalizador de Temas.

Em seguida, clique em 'CSS Adicional'.

Aqui, você pode adicionar código CSS personalizado para estilizar seu menu de navegação.

Vamos explorar alguns exemplos e sinta-se à vontade para alterar as classes CSS e o código de cor hexadecimal:

Alterar a Cor de Fundo do Item do Menu

O trecho de código a seguir altera a cor de fundo do item do menu com a classe CSS contact-us para verde (#E3FFA8) e adiciona cantos arredondados (border-radius: 5px):

.contact-us {
  background-color: #E3FFA8;
  border-radius: 5px;
}

Alterar a Cor Padrão do Link do Menu

Este trecho de código altera a cor de todos os links do menu dentro da lista do menu principal (#primary-menu-li a) para vermelho (#ff0000):

.primary-menu li a {
    color: #ff0000; 
}

Observe que a classe CSS para o menu principal do seu tema pode ser diferente da nossa.

Para ver qual é a classe CSS do menu principal do seu tema, você pode usar a ferramenta de inspeção na área do seu menu de navegação.

Em seguida, procure por um código HTML que diga 'menu' ou 'navigation-menu'. Deve haver uma classe CSS que o define ao lado dele.

Adicionar Efeitos de Hover aos Itens do Menu

Este trecho de código tem como alvo todos os itens do menu dentro da lista do menu principal (#primary-menu li) e adiciona um efeito de hover:

.primary-menu li a:hover {
  background-color: #a6e4a5;
	color: #666;
	border-radius: 5px;
	}

Quando um usuário passa o mouse sobre o item do menu, a cor de fundo muda para um verde claro (#a6e4a5), a cor do texto muda para um cinza escuro (#666) e cantos arredondados são adicionados (border-radius: 5px).

Criar Menus de Navegação Transparentes no WordPress

Este trecho de código CSS pode tornar seu menu de navegação transparente:

#site-navigation { 
background-color:transparent; 
}

Usar este efeito o misturará com a imagem de fundo para dar ao seu site uma aparência limpa e moderna.

Para mais inspiração, você pode conferir nossos guias abaixo:

• Como Adicionar a Primeira e a Última Classe CSS aos Itens do Menu do WordPress
• Como Destacar um Item do Menu no WordPress

Lembre-se, estes são apenas alguns exemplos para você começar. Se você gostaria de usar esses mesmos métodos, mas não consegue encontrar a seção CSS Adicional, confira nosso guia sobre como corrigir o problema do personalizador de tema ausente.

Método 3: Personalize seu Menu de Navegação com um Plugin Page Builder (Recomendado)

Este método é perfeito para quem deseja mais controle sobre a aparência do menu de navegação, mas ainda prefere uma experiência amigável para iniciantes. Também é uma ótima opção se você ainda estiver nas fases iniciais da construção do seu site e ainda não o lançou.

Um construtor de páginas (page builder) é um plugin que permite projetar visualmente o layout do seu site usando funcionalidade de arrastar e soltar, sem a necessidade de escrever código. Isso o torna ideal para iniciantes completos.

Nesta seção, usaremos o SeedProd como nosso plugin construtor de páginas. O SeedProd oferece uma interface amigável e inclui blocos e recursos extras para fazer seu menu de navegação se destacar.

Etapa 1: Instalar e Ativar o SeedProd

Primeiro, instale e ative o plugin SeedProd no seu site WordPress. Você pode ler nosso guia sobre como instalar um plugin do WordPress para mais informações.

Após a ativação, navegue até SeedProd » Configurações no seu painel do WordPress. Em seguida, insira sua chave de licença do SeedProd e clique no botão ‘Verificar chave’.

Etapa 2: Escolher um Kit de Modelo do SeedProd

Agora, vá para SeedProd » Theme Builder. É aqui que você pode criar um tema personalizado do WordPress do zero.

Clique no botão ’Kits de Modelos de Tema’ para navegar por uma galeria de modelos pré-projetados.

Para este tutorial, usaremos o Tema de Site Médico Smile Craft. No entanto, sinta-se à vontade para escolher qualquer modelo que se adapte ao seu negócio.

Você pode visualizar esses kits de modelos de tema clicando no ícone de lupa para ver qual deles se encaixa no estilo do seu site.

Depois de encontrar um modelo de tema que você goste, clique no ícone de marca de seleção laranja para importar as partes do modelo.

O SeedProd agora criará as seções essenciais do site, como cabeçalho, rodapé, página inicial e assim por diante. Todos eles podem ser editados visualmente usando o construtor de arrastar e soltar.

Etapa 3: Personalize o Design do Menu

Assim que o modelo de tema for instalado, você retornará à página do Theme Builder.

Em um modelo de tema SeedProd, o menu de navegação está localizado na parte do modelo de cabeçalho.

Para editar seu modelo de cabeçalho, basta passar o mouse sobre ele e clicar no link ‘Editar Design’. Isso abrirá o modelo no editor de arrastar e soltar.

Agora você verá uma seção de cabeçalho que consiste no bloco Nav Menu (que é o seu menu de navegação) e outros blocos, dependendo do tema.

Para editar o menu, clique no bloco Nav Menu. A barra lateral esquerda mostrará uma lista de configurações de bloco.

Por padrão, o SeedProd usa o menu ‘Simples’ para criar um menu baseado no template de tema que você usa. No entanto, você também pode optar pela opção ‘Menu do WordPress’ para usar um menu pré-existente que você já criou usando o editor de menus padrão do WordPress (Aparência » Menus).

Vamos detalhar a diferença entre os dois. O método Simples permite que você adicione, edite e remova links diretamente na interface do construtor de páginas.

Para criar um novo item de menu, clique no botão ‘+ Adicionar Novo Item’.

Aqui, você pode inserir o rótulo do texto e o URL do link.

Em seguida, escolha abrir o link em uma nova janela e adicionar um atributo nofollow (se necessário). Assim:

Você também pode reorganizar os itens do menu clicando no botão de três linhas ao lado de um item e arrastando-o para cima ou para baixo.

Para excluir um item do menu, basta passar o mouse sobre ele e clicar no ícone de lixeira ao lado dele.

A desvantagem desta opção é que você não pode criar menus suspensos. É por isso que é chamado de 'Simples'.

Por outro lado, a opção 'Menu do WordPress' não permite que você gerencie os itens do menu diretamente do editor SeedProd. Você tem que fazer isso no editor de menu.

A boa notícia é que, se o seu menu preexistente for um menu suspenso, você pode exibi-lo usando este método.

Qualquer método que você escolher, você pode personalizar o tamanho da fonte e o espaçamento entre os itens do menu, adicionar um divisor de texto ou ajustar o alinhamento.

A aba 'Avançado' oferece ainda mais opções de personalização.

Você pode alterar o layout da lista de horizontal para vertical, ajustar a tipografia, modificar as cores do texto e do hover, e até mesmo adicionar sombras de texto.

Se você rolar para baixo, poderá controlar o preenchimento e as margens para dispositivos desktop, tablet e mobile.

Dessa forma, seu menu é fácil de navegar em qualquer tamanho de tela.

Quer fazer seu menu se destacar?

O SeedProd permite que você adicione animações para uma experiência de usuário mais envolvente. Você pode ler nosso guia passo a passo sobre como adicionar animações CSS no WordPress para mais informações.

Se você quiser adicionar um novo botão de call-to-action na sua barra de navegação, você pode usar o bloco de Botão do SeedProd.

Basta abrir o localizador de blocos na barra lateral esquerda e encontrar o bloco Botão na barra lateral esquerda.

Em seguida, arraste o bloco para qualquer lugar do seu cabeçalho.

Depois de pronto, basta personalizar a chamada para ação, o link, a estilização e outras configurações do botão.

Você também pode criar um menu fixo que permanece no topo da página conforme o usuário rola para baixo. Dessa forma, ele não precisará voltar sempre que quiser ir para uma página diferente.

Para fazer isso, basta passar o mouse sobre a seção até que uma linha roxa apareça e, em seguida, clique no ícone de engrenagem 'Configurações'.

Agora, mude para a aba 'Avançado'.

Em seguida, role para baixo até o menu 'Posição'.

Aqui, escolha 'Fixo'.

Depois disso, adicione um zero ao deslocamento superior e um número de índice z alto (como 999). Isso é para garantir que o cabeçalho sempre apareça logo acima da página.

Quando estiver satisfeito com seu menu de navegação personalizado, clique no botão 'Salvar'.

Etapa 4: Publique seu tema personalizado do WordPress

Nesta fase, você está pronto para usar seu novo tema personalizado do WordPress. Para ativá-lo, volte para a página 'Theme Builder' e ative o botão 'Habilitar tema SeedProd'.

Tudo o que você precisa fazer agora é visualizar seu site e conferir seu novo menu de navegação personalizado.

Veja como nosso menu de navegação aparece em nosso site de demonstração:

Método 4: Personalize seu Menu de Navegação com o Editor CSS Visual (Mais Personalizável)

Este método oferece mais opções de personalização do que os recursos integrados do WordPress, mas não é tão flexível quanto usar um plugin construtor de páginas. Dito isso, é uma ótima solução se você quiser fazer alguns ajustes de design no seu menu de navegação sem substituir completamente seu tema.

Este método também é uma boa alternativa para aqueles que usam temas clássicos que carecem de opções de estilo, mas não se sentem confortáveis com a edição de CSS no Método 2.

Aqui, vamos guiá-lo através do uso de um plugin premium de editor visual CSS para WordPress chamado CSS Hero. Ele permite que você crie o design do seu site visualmente, sem escrever nenhum código. Nenhum conhecimento de HTML ou CSS é necessário.

Primeiro, prossiga e instale o plugin CSS Hero no WordPress. Você pode ler nosso guia sobre como instalar um plugin do WordPress para mais informações.

Assim que você ativar o plugin CSS Hero, verá um novo botão chamado ‘CSS Hero’ na sua barra de administração do WordPress. Clique neste botão para iniciar o editor visual.

O CSS Hero usa uma interface WYSIWYG. Clicar no botão abrirá seu site ao lado do painel do CSS Hero no lado esquerdo da sua tela.

Para editar seu menu de navegação, você pode mover o mouse sobre ele. O CSS Hero o destacará com uma borda. Clique na área destacada para começar a personalizar o menu.

O CSS Hero permite que você edite vários aspectos do contêiner do seu menu de navegação, incluindo fundo, tipografia, bordas, espaçamento, listas e até efeitos extras.

Por exemplo, digamos que você queira modificar a cor de fundo do menu. Clicar em ‘Background’ abrirá uma interface amigável onde você pode escolher uma nova cor, gradiente ou imagem.

À medida que você faz alterações, verá que elas são refletidas ao vivo na prévia do site à direita.

Ou, você pode adicionar uma sombra de caixa aos seus itens de menu para torná-los mais atraentes.

Para fazer isso, navegue até a aba ‘Extra’.

Em seguida, clique em ‘Make Shadow’.

Aqui, você poderá editar as configurações da sombra.

Agora, você pode simplesmente brincar com a aparência da sombra.

Sinta-se à vontade para arrastar a orientação da sombra, a qualidade de desfoque e propagação, e a posição.

Você pode alterar o que quiser com a interface do CSS Hero, assim você pode experimentar para encontrar o que funciona melhor para o seu site.

Assim que estiver satisfeito com seu menu personalizado, clique no botão 'Salvar' para armazenar suas modificações.

Você pode ler estes guias para saber mais sobre o que você pode fazer com o CSS Hero:

• Como Alterar o Tamanho do Logo do Seu WordPress (Funciona com Qualquer Tema)
• Como Adicionar Efeitos de Hover de Imagem no WordPress (Passo a Passo)

Método 5: Personalize Seu Menu de Navegação Com Código (Avançado)

Este método é mais adequado para usuários que se sentem confortáveis com código. Ele também permite que você crie um menu personalizado se o seu tema não incluir um por padrão.

Adicionar trechos de código personalizados pode parecer assustador no início, pois envolve a edição de arquivos de tema como functions.php e header.php. No entanto, existem maneiras de facilitar isso.

Recomendamos o uso de um plugin chamado WPCode. Ele oferece uma maneira segura e fácil de usar para adicionar código personalizado ao seu site WordPress sem modificar os arquivos principais.

Nosso guia sobre como adicionar um menu de navegação personalizado em temas do WordPress pode guiá-lo pelos passos para criar um menu com o WPCode.

Depois de criar o menu, você pode explorar estes tutoriais.

• Como Adicionar Ícones de Imagem com Menus de Navegação no WordPress
• Como Adicionar um Botão ao Menu do Cabeçalho do Seu WordPress
• Como Criar um Menu de Navegação Flutuante Fixo no WordPress

Cada um inclui um método para personalizar o menu usando o WPCode.

Guias Definitivos para Personalizar o Menu de Navegação do WordPress

Agora que você explorou os conceitos básicos de estilização do seu menu de navegação do WordPress, aqui estão alguns guias adicionais que você pode ler para levar seu menu para o próximo nível:

• Como Adicionar um Mega Menu no Seu Site WordPress. Mega menus permitem incluir subcategorias, oferecendo uma maneira amigável de organizar conteúdo extenso do site.
• Como Criar um Menu WordPress Responsivo e Pronto para Dispositivos Móveis. Este guia mostra como criar um menu responsivo que se adapta a diferentes tamanhos de tela.
• Como Adicionar um Menu Responsivo em Tela Cheia no WordPress. Este tutorial ensinará como implementar um menu em tela cheia que se expande por toda a tela quando ativado, oferecendo uma experiência de navegação ousada.
• Como Adicionar um Menu de Painel Deslizante em Temas WordPress. Menus de painel deslizante são uma solução que economiza espaço, ocultando a navegação principal até que o usuário deslize ou clique em um botão para revelá-la.
• Como Criar um Menu de Navegação Vertical no WordPress. Menus de navegação vertical podem ser uma ótima maneira de exibir um grande número de itens de menu em uma barra lateral ou outro espaço vertical em seu site.
• Como Adicionar Ícones de Mídia Social aos Menus do WordPress. Integre ícones de mídia social diretamente ao seu menu de navegação para facilitar a conexão dos visitantes com você.
• Como Criar um Menu Colapsável na Barra Lateral do WordPress. Tem muitas páginas? Facilite a navegação dos usuários em seu site adicionando um menu colapsável à sua barra lateral.

Esperamos que este artigo tenha ajudado você a aprender como estilizar menus de navegação do WordPress. Você também pode querer conferir nosso guia definitivo sobre elementos de design do WordPress e nosso guia para iniciantes sobre como criar uma página personalizada no WordPress.

Se você gostou deste artigo, por favor, inscreva-se em nosso Canal do YouTube para tutoriais em vídeo do WordPress. Você também pode nos encontrar no Twitter e no Facebook.