Como estilizar os 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 estão procurando e até mesmo incentivá-los a clicar em determinadas páginas.

Aqui no WPBeginner, vimos todos os tipos de maneiras criativas de estilizar menus, por isso queremos compartilhar o que funciona melhor em diferentes situações.

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

Por que estilizar seu menu de navegação do WordPress?

O menu de navegação do WordPress é o roteiro do seu site, orientando os visitantes para as páginas mais importantes. Ele aparece na parte superior da maioria dos sites, o que o torna um local privilegiado para chamar a atenção e influenciar a forma como os usuários exploram seu conteúdo.

A estilização do menu de navegação vai além de apenas deixá-lo bonito. Ele pode melhorar significativamente a experiência do usuário do seu site e, por sua vez, impulsionar a otimização do mecanismo de pesquisa (SEO).

Se o design do menu for difícil de usar, os visitantes poderão ter dificuldade para encontrar o que estão procurando e sairão 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 do WordPress e do seu 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 Full-Site Editor (Block Themes)

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

Primeiro, vá até o painel do WordPress e navegue até Appearance ” Editor.

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

Vá em frente e clique em “Navegação”.

Na página seguinte, clique no ícone de lápis “Editar”.

Isso abrirá o editor de blocos, onde você poderá editar o bloco de navegação.

Quando estiver no editor de blocos, clique no bloco “Page List” (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 será exibida, informando que agora você pode editar o bloco Page List. Você pode editar, remover, reordenar e adicionar novos itens de menu ao bloco.

Clique em “Edit” (Editar) para continuar.

O editor de blocos do menu de navegação funciona como quando você edita 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 quiser se aprofundar no gerenciamento de menus com o Full-Site Editor, consulte a seção sobre como editar o menu de navegação em nosso guia Full-Site Editing. 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á colocar em negrito, itálico, tachado e reordená-lo, se necessário.

Você pode usar essas ferramentas para destacar um único item de menu dos demais.

No painel de configurações à direita, vá para a guia “Block” (Bloco) e, abaixo dela, navegue até a guia “Styles” (Estilos).

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

Os blocos tendem a ter configurações padrão de Styles. Por exemplo, se você estiver editando um link de página, poderá ver apenas opções como “Font Size” (tamanho da fonte) e “Width” (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 as letras.

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

Para obter mais informações, leia nosso guia sobre como adicionar um botão de call-to-action.

Se você quiser alterar a cor do plano de fundo do menu de navegação, precisará fazer isso editando o modelo de cabeçalho do tema.

Para abri-lo, basta clicar no campo de pesquisa de comando na parte superior que diz “Navegação”. Em seguida, digite “Header” e pressione a tecla Enter.

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

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

Em seguida, abra a guia “Styles” (Estilos) na barra lateral de configurações do bloco e clique em “Background” (Plano de fundo) na seção Color (Cor).

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

Quando estiver satisfeito com o estilo do menu de navegação, basta clicar no botão “Save” (Salvar) e o novo menu e cabeçalho estarão disponíveis no blog ou site do WordPress.

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

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

Se quiser personalizar os estilos globais do seu tema, clique no botão “Styles” (Estilos) no canto superior direito.

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

Para obter mais informações, consulte a seção sobre como alterar os estilos globais do seu site no guia Edição completa do site.

Método 2: Personalizar seu menu de navegação com o personalizador de temas (temas clássicos)

Esse método é para usuários com temas clássicos do WordPress que desejam estilizar o menu de navegação usando o Theme Customizer integrado.

Como no método anterior, vamos nos concentrar em estilizar a aparência do menu em vez de gerenciar os próprios itens de menu.

Se você quiser saber como criar menus e gerenciá-los em temas clássicos, confira nosso guia sobre como adicionar um menu de navegação no WordPress. Ele aborda a criação de menus com o Customizer, atribuindo-os a diferentes locais de menu e adicionando menus como widgets.

Para usar o personalizador de temas, vá até o painel do WordPress e navegue até Appearance ” Customize.

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

Por exemplo, o tema Astra tem um Header Builder dedicado para personalização do menu. Não deixe de consultar a documentação do seu tema para ver se ele adiciona 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 página seguinte, clique na engrenagem “Settings” (Configurações) e selecione “CSS Classes” (Classes CSS).

Isso permite que você atribua uma classe CSS exclusiva a cada item de 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 é localizar o item de 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 Contact Us.

Depois de atribuir classes CSS aos itens de menu, volte ao menu principal no Theme Customizer.

Em seguida, clique em “Additional CSS”.

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

Vamos explorar alguns exemplos e fique à vontade para alterar as classes CSS e o código de cores hexadecimais:

Alterar a cor de fundo do item de menu

O trecho de código a seguir altera a cor do plano de fundo do item de 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

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

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

Observe que a classe CSS do menu principal de 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 menu de navegação.

Em seguida, procure um código HTML que diga “menu” ou “navigation-menu”. Deve haver uma classe CSS que a defina ao lado dela.

Adicionar efeitos Hover a itens de menu

Esse trecho de código tem como alvo todos os itens de menu na lista do menu principal(#primary-menu li) e adiciona um efeito de foco:

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

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

Criar menus de navegação transparentes no WordPress

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

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

O uso desse efeito o mesclará com a imagem de fundo para dar ao seu site um toque limpo e moderno.

Para obter mais inspiração, consulte nossos guias abaixo:

• Como adicionar a primeira e a última classe CSS aos itens de menu do WordPress
• Como destacar um item de menu no WordPress

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

Método 3: personalizar seu menu de navegação com um plug-in do Page Builder (recomendado)

Esse método é perfeito para quem deseja ter 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 nos estágios iniciais da criação do seu site e ainda não o lançou.

Um plug-in de construtor de páginas permite que você crie visualmente o layout do seu site usando a funcionalidade de arrastar e soltar sem precisar escrever nenhum código. Isso o torna ideal para iniciantes.

Nesta seção, usaremos o SeedProd como nosso plug-in de construtor de páginas. O SeedProd oferece uma interface fácil de usar e inclui blocos e recursos extras para destacar seu menu de navegação.

Etapa 1: Instalar e ativar o SeedProd

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

Depois de ativado, navegue até SeedProd ” Settings (Configurações ) no painel do WordPress. Em seguida, insira sua chave de licença do SeedProd e clique no botão “Verify key” (Verificar chave).

Etapa 2: Escolha um kit de modelo de tema do SeedProd

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

Clique no botão “Theme Template Kits” (Kits de modelos de temas) para navegar por uma galeria de modelos pré-concebidos.

Para este tutorial, usaremos o tema de site médico Smile Craft. No entanto, fique à vontade para escolher qualquer modelo que se adapte ao seu negócio.

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

Depois de encontrar um modelo de tema de sua preferência, 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. Todas elas podem ser editadas visualmente usando o construtor de arrastar e soltar.

Etapa 3: Personalizar o design do menu

Depois que o modelo de tema tiver sido instalado, você retornará à página Theme Builder.

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

Para editar o modelo de cabeçalho, basta passar o mouse sobre ele e clicar no link “Edit 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 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 do bloco.

Por padrão, o SeedProd usa o menu “Simple” (Simples) para criar um menu com base no modelo de tema que você usa. No entanto, você também pode usar a opção “WordPress Menu” para usar um menu pré-existente que você já criou usando o editor de menu padrão do WordPress(Appearance ” 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 “+ Add New Item”.

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

Em seguida, opte por abrir o link em uma nova janela e adicione 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 de menu, basta passar o mouse sobre ele e clicar no ícone de lixeira ao lado dele.

A desvantagem dessa opção é que você não pode criar menus suspensos. É por isso que ela é chamada de “Simples”.

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

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

Seja qual for o método escolhido, você pode personalizar o tamanho da fonte e o espaçamento entre os itens de menu, adicionar um divisor de texto ou ajustar o alinhamento.

A guia “Advanced” 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 mouse e até mesmo adicionar sombras ao texto.

Se você rolar a tela para baixo, poderá controlar o preenchimento e as margens para desktop, tablet e dispositivos móveis.

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

Quer que seu cardápio se destaque?

O SeedProd permite adicionar animações para proporcionar uma experiência de usuário mais envolvente. Para obter mais informações, leia nosso guia passo a passo sobre como adicionar animações CSS no WordPress.

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

Basta abrir o localizador de blocos na barra lateral esquerda e localizar o bloco Button na barra lateral esquerda.

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

Depois disso, basta personalizar a chamada para ação, o link, o estilo e outras configurações do botão.

Você também pode criar um menu fixo que permaneça na parte superior da página à medida que o usuário rola a página para baixo. Dessa forma, o usuário não precisará subir sempre que quiser ir para uma página diferente.

Para isso, basta passar o mouse sobre a seção até aparecer uma linha roxa e, em seguida, clicar no ícone de engrenagem “Configurações”.

Agora, vá para a guia “Advanced” (Avançado).

Em seguida, role a tela para baixo até o menu “Position” (Posição).

Aqui, escolha “Sticky”.

Depois disso, adicione um zero ao deslocamento superior e um número de índice z alto (como 999). Isso serve 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 “Save” (Salvar).

Etapa 4: Publique seu tema personalizado do WordPress

Nesta etapa, você está pronto para usar seu novo tema personalizado do WordPress. Para ativá-lo, volte à página “Theme Builder” e ative o botão “Enable SeedProd Theme” (Ativar tema SeedProd).

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

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

Método 4: Personalize seu menu de navegação com o Visual CSS Editor (mais personalizável)

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

Esse método também é uma boa alternativa para quem usa temas clássicos que não têm opções de estilo, mas não se sente confortável com a edição de CSS no Método 2.

Aqui, vamos orientá-lo a usar um plug-in premium de editor visual de CSS para WordPress chamado CSS Hero. Ele permite que você crie visualmente seu site sem escrever nenhum código. Não é necessário nenhum conhecimento de HTML ou CSS.

Primeiro, vá em frente e instale o plug-in CSS Hero no WordPress. Você pode ler nosso guia sobre como instalar um plug-in do WordPress para obter mais informações.

Depois de ativar o plug-in CSS Hero, você verá um novo botão chamado “CSS Hero” na barra de ferramentas de administração do WordPress. Clique nesse botão para iniciar o editor visual.

O CSS Hero usa uma interface WYSIWYG. Ao clicar no botão, seu site será aberto ao lado do painel do CSS Hero no lado esquerdo da tela.

Para editar o menu de navegação, passe 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 menu de navegação, incluindo plano de fundo, tipografia, bordas, espaçamento, listas e até mesmo efeitos extras.

Por exemplo, digamos que você queira modificar a cor de fundo do menu. Clicar em “Background” (Plano de fundo) abrirá uma interface amigável na qual você poderá escolher uma nova cor, gradiente ou imagem.

Ao fazer alterações, você as verá refletidas ao vivo na visualização do site à direita.

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

Para fazer isso, navegue até a guia “Extra”.

Em seguida, clique em “Make Shadow”.

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

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

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

Você pode alterar o que quiser com a interface do CSS Hero, para que possa experimentar e descobrir o que funciona melhor para o seu site.

Quando estiver satisfeito com seu menu personalizado, clique no botão “Save” (Salvar) para armazenar suas modificações.

Você pode ler esses guias para saber mais sobre o que é possível fazer com o CSS Hero:

• Como alterar o tamanho do seu logotipo do WordPress (funciona com qualquer tema)
• Como adicionar efeitos de hover de imagem no WordPress (passo a passo)

Método 5: Personalizar seu menu de navegação com código (avançado)

Esse método é mais adequado para usuários que se sentem confortáveis com códigos. 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, há maneiras de facilitar esse processo.

Recomendamos o uso de um plugin chamado WPCode. Ele oferece uma maneira segura e fácil de adicionar códigos personalizados 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 orientá-lo nas etapas para criar um menu com o WPCode.

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

• Como adicionar ícones de imagem a menus de navegação no WordPress
• Como adicionar um botão ao menu do cabeçalho do WordPress
• Como criar um menu de navegação flutuante fixo no WordPress

Cada um deles 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ê já explorou os fundamentos da estilização do menu de navegação do WordPress, aqui estão mais alguns guias que você pode ler para elevar o nível do seu menu:

• Como adicionar um mega menu em seu site WordPress. Os mega menus permitem que você inclua subcategorias, proporcionando uma maneira fácil de organizar o conteúdo extenso do site.
• Como criar um menu WordPress responsivo pronto para dispositivos móveis. Este guia o orienta na criação de um menu responsivo que se adapta a diferentes tamanhos de tela.
• Como adicionar um menu responsivo de tela cheia no WordPress. Este tutorial ensinará como implementar um menu de tela cheia que se expande por toda a tela quando ativado, oferecendo uma experiência de navegação arrojada.
• Como adicionar um menu de painel deslizante em temas do WordPress. Os menus de painel deslizante são uma solução que economiza espaço e oculta a navegação principal até que o usuário passe o dedo ou clique em um botão para revelá-la.
• Como criar um menu de navegação vertical no WordPress. Os 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 em outro espaço vertical do seu site.
• Como adicionar ícones de mídia social aos menus do WordPress. Integre ícones de mídia social diretamente no seu menu de navegação para facilitar a conexão dos visitantes com você.
• Como criar um menu de barra lateral dobrável no WordPress. Tem muitas páginas? Facilite a navegação dos usuários no seu site adicionando um menu dobrável à barra lateral.

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

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