Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
Copa WPB
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

Como adicionar menus de navegação personalizados em temas do WordPress

Na WPBeginner, ajudamos inúmeros leitores a personalizar seus sites WordPress para melhorar a experiência do usuário, impulsionar a marca e gerar conversões. E vimos que, quando bem feito, um menu de navegação exclusivo pode ajudar a aumentar o envolvimento e manter as pessoas em seu site por mais tempo.

O problema é que todos os temas do WordPress têm locais definidos onde você pode exibir um menu de navegação, portanto, mudar isso pode ser complicado. Isso é especialmente verdadeiro se você for um iniciante, pois modificar arquivos de temas é um processo delicado.

Quando estiver usando um tema de bloco, você poderá fazer isso com o Full Site Editor. Mas, em nossa experiência, há opções melhores que funcionam para todos os tipos de temas.

Por exemplo, se você quiser personalizações avançadas, poderá usar um poderoso construtor de páginas como o SeedProd. Ou, se estiver procurando uma maneira simples de usar código personalizado, o WPCode é de longe a melhor opção.

Neste artigo, mostraremos como adicionar um menu de navegação personalizado a qualquer área do seu tema do WordPress. Apresentaremos três opções diferentes para que você possa escolher o tutorial mais adequado às suas necessidades.

How to add custom navigation menus in WordPress themes

Por que adicionar menus de navegação personalizados em temas do WordPress?

Um menu de navegação é uma lista de links que apontam para áreas importantes de seu site. Eles facilitam para os visitantes encontrarem conteúdo interessante, o que pode aumentar as visualizações de página e reduzir a taxa de rejeição no WordPress.

O local exato do menu varia de acordo com o tema do WordPress. A maioria dos temas tem várias opções, de modo que você pode criar diferentes menus e exibi-los em diferentes locais.

Para ver onde é possível exibir menus no seu tema atual do WordPress, basta acessar Appearance ” Menus e dar uma olhada na seção “Display location” (Local de exibição).

A imagem a seguir mostra os locais que são compatíveis com o tema Astra para WordPress.

The menu locations in the popular Astra theme

Às vezes, você pode querer mostrar um menu em uma área que não está listada como “Local de exibição” no seu tema.

Com isso em mente, vamos dar uma olhada em como adicionar um menu de navegação personalizado a qualquer área do seu tema do WordPress. Basta usar os links rápidos abaixo para ir para o método que você preferir:

Método 1: Usar o Site Editor completo (somente temas baseados em blocos)

Se estiver usando um tema de blocos, como o ThemeIsle Hestia Pro, você poderá adicionar um menu de navegação personalizado usando o Full Site Editing (FSE) e o editor de blocos.

Para obter mais detalhes, consulte nosso artigo sobre os melhores temas de edição de site completo do WordPress.

Esse método não funciona com todos os temas e não permite que você personalize cada parte do menu. Se você quiser adicionar um menu totalmente personalizado a qualquer tema do WordPress, recomendamos o uso de um plugin construtor de páginas.

Se você estiver usando um tema baseado em blocos, vá para Appearance Editor.

Opening the WordPress full-site editor (FSE)

Por padrão, o editor de site completo mostra o modelo inicial do seu tema, mas você pode adicionar um menu de navegação a qualquer área.

Para ver todas as opções disponíveis, basta selecionar “Templates”, “Patterns” ou “Pages”.

Adding a custom navigation menu to a WordPress block-based theme

Agora você pode clicar no modelo, na parte do modelo ou na página em que deseja adicionar um menu de navegação personalizado.

O WordPress agora mostrará uma visualização do design. Para editar esse modelo, clique no pequeno ícone de lápis.

Adding a navigation menu to a 404 page template

A próxima etapa é adicionar um bloco de navegação à área em que você deseja exibir o menu.

No canto superior esquerdo, clique no botão azul “+”.

Adding blocks to your WordPress theme

Agora, digite “Navigation” (Navegação) na barra de pesquisa.

Quando o bloco “Navigation” aparecer, basta arrastá-lo e soltá-lo em seu layout.

The WordPress Navigation block

Em seguida, clique para selecionar o bloco Navigation (Navegação).

Se você já tiver criado o menu que deseja exibir, clique para selecionar o bloco Navigation (Navegação). No menu do lado direito, clique no ícone de três pontos ao lado de “Menu”.

Adding menus to a WordPress theme using the full-site editor (FE)

Em seguida, você pode escolher um menu na lista suspensa.

Outra opção é criar um menu dentro do editor de site completo, adicionando páginas, posts, links personalizados e muito mais. Para adicionar itens ao novo menu, basta clicar no ícone “+”.

How to build a new menu in the block editor

Isso abre uma janela pop-up na qual você adiciona qualquer post ou página e decide se esses links devem ser abertos em uma nova guia.

Você também pode adicionar uma barra de pesquisa ao menu do WordPress, adicionar ícones de mídia social e muito mais. Na janela pop-up, basta digitar o bloco que deseja adicionar ao menu e selecionar a opção correta quando ela for exibida.

Adding a search bar to a WordPress navigation menu

Em seguida, você pode configurar esse bloco usando as configurações na mini barra de ferramentas e no menu à direita. Basta repetir essas etapas para adicionar mais itens ao menu.

Quando estiver satisfeito com a aparência do menu, basta clicar no botão “Save” (Salvar).

How to add custom navigation anywhere in a WordPress theme

Seu site agora estará usando o novo modelo e os visitantes poderão interagir com o menu de navegação personalizado.

Método 2: Usar um plug-in do Page Builder (funciona com todos os temas)

O editor de sites completo permite que você adicione menus a temas baseados em blocos. No entanto, se você quiser adicionar um menu avançado e totalmente personalizável a qualquer tema do WordPress, precisará de um plug-in de construtor de páginas.

O SeedProd é o melhor plug-in de criação de páginas do WordPress no mercado que permite personalizar cada parte do menu de navegação.

Temos ampla experiência no uso dessa ferramenta para criar menus de navegação personalizados, páginas de destino e muito mais. Para obter mais detalhes, confira nossa análise completa do SeedProd.

Quando se trata de páginas, o SeedProd vem com mais de 350 modelos criados por profissionais que você pode usar como ponto de partida. Depois de escolher um modelo, você pode adicionar um menu de navegação personalizado ao seu site usando o bloco Nav Menu já pronto do SeedProd.

Primeiro, você precisa instalar e ativar o plug-in SeedProd. Para obter mais detalhes, consulte nosso guia passo a passo sobre como instalar um plug-in do WordPress.

Observação: Há também uma versão gratuita do SeedProd que permite que você crie menus de navegação personalizados sem escrever código. No entanto, neste guia, usaremos o SeedProd Pro, pois ele tem o bloco Nav Menu, além de modelos extras e recursos avançados.

Após a ativação do plug-in, o SeedProd solicitará sua chave de licença.

SeedProd license key

Você pode encontrar essas informações em sua conta no site da SeedProd. Depois de inserir a chave, clique no botão “Verify Key” (Verificar chave).

Depois de fazer isso, vá para SeedProd ” Landing Pages e clique no botão “Add New Landing Page” (Adicionar nova página de destino).

SeedProd's page design templates

Agora você pode escolher um modelo para sua página personalizada.

Para ajudar você a encontrar o design certo, todos os modelos da SeedProd estão organizados em diferentes tipos de campanha, como campanhas de lançamento em breve e campanhas de compressão de leads. Você pode até mesmo usar os modelos do SeedProd para melhorar sua página 404.

The SeedProd template library

Para examinar mais de perto qualquer design, basta passar o mouse sobre o modelo e clicar no ícone da lupa.

Quando você encontrar um design que deseja usar, clique em ‘Choose This Template’.

Choosing a SeedProd template for your WordPress website

Estamos usando o modelo “Black Friday Sales Page” em todas as nossas imagens, mas você pode usar qualquer modelo que desejar.

Depois de escolher um modelo, digite um nome para essa página personalizada. O SeedProd criará automaticamente um URL com base no título da página, mas você pode alterar esse URL para o que quiser.

Por exemplo, você pode adicionar palavras-chave relevantes para ajudar os mecanismos de pesquisa a entenderem do que se trata a página. Isso pode melhorar o SEO do WordPress e ajudar o mecanismo de pesquisa a mostrar a página para as pessoas que estão procurando conteúdo como o seu.

Depois de inserir essas informações, clique no botão “Salvar e começar a editar a página”.

Creating a new page using SeedProd

A maioria dos modelos já contém alguns blocos, que são os componentes principais de todos os layouts de página do SeedProd.

Para personalizar um bloco, basta clicar para selecioná-lo no editor de páginas.

A barra de ferramentas à esquerda agora mostrará todas as configurações desse bloco. Por exemplo, na imagem abaixo, estamos alterando o texto dentro de um bloco “Headline”.

Editing a headline in SeedProd

Você pode formatar o texto, alterar seu alinhamento, adicionar links e muito mais usando as configurações no menu à esquerda.

Se você selecionar a guia “Advanced” (Avançado), terá acesso a ainda mais configurações. Por exemplo, você pode fazer com que o bloco realmente se destaque adicionando sombras de caixa e animações CSS.

Para adicionar novos blocos ao seu design, basta localizar qualquer bloco no menu à esquerda e arrastá-lo para a página. Se quiser excluir um bloco, clique para selecionar o bloco e use o ícone da lixeira.

Removing blocks from a custom layout

Como queremos criar um menu de navegação personalizado, arraste um bloco “Nav Menu” para a página.

Isso cria um menu de navegação com um único item padrão “Sobre”.

Adding a custom navigation menu to a WordPress layout

Agora você pode criar um novo menu no editor do SeedProd ou escolher um menu que já tenha criado no painel do WordPress.

Para mostrar um menu que você criou anteriormente, clique no botão “WordPress Menu”. Agora você pode abrir o menu suspenso “Menus” e escolher qualquer opção da lista.

How to create a menu using SeedProd

Depois disso, você pode alterar o tamanho da fonte, o alinhamento do texto e muito mais usando as configurações no menu à esquerda.

Se, em vez disso, você quiser criar um novo menu dentro do SeedProd, selecione o botão “Simple” (Simples).

How to create a navigation menu using SeedProd

Em seguida, clique para expandir o item “About” (Sobre) que o SeedProd cria por padrão.

Isso abre alguns controles nos quais é possível alterar o texto e adicionar o URL ao qual o item de menu será vinculado.

Adding a custom navigation menu to a landing page

Por padrão, o link será “dofollow” e será aberto na mesma janela do navegador. É possível alterar essas configurações usando as caixas de seleção na seção “Link do URL”.

Na imagem a seguir, estamos criando um link “nofollow” que será aberto em uma nova janela. Para saber mais sobre esse tópico, consulte nosso guia para iniciantes sobre links nofollow.

Marking a menu item as no-follow

Para adicionar mais itens ao menu, basta clicar no botão “Add New Item” (Adicionar novo item).

Em seguida, você pode personalizar cada um desses itens seguindo o mesmo processo descrito acima.

Adding items to a custom navigation menu

O menu do lado esquerdo também tem configurações que alteram o tamanho da fonte e o alinhamento do texto.

Você pode até mesmo criar um divisor, que aparecerá entre cada item do menu.

Creating a divider for your custom navigation menu

Depois disso, vá em frente e mude para a guia “Advanced” (Avançado). Aqui, você pode alterar as cores, o espaçamento, a tipografia e outras opções avançadas do menu.

À medida que você fizer alterações, a visualização ao vivo será atualizada automaticamente, de modo que você possa experimentar configurações diferentes para ver o que fica bom no seu design.

The SeedProd advanced customization settings

Por padrão, o SeedProd mostra o mesmo menu em dispositivos móveis e desktop. No entanto, os dispositivos móveis geralmente têm telas muito menores em comparação com os computadores de mesa.

Com isso em mente, talvez você queira criar um menu separado para ser exibido em dispositivos móveis. Por exemplo, você pode usar um layout vertical para que os usuários móveis não precisem rolar para os lados. Talvez você também queira mostrar menos links em smartphones e tablets.

Para criar um menu pronto para celular, basta projetar o menu seguindo o mesmo processo descrito acima. Em seguida, selecione a guia “Advanced” (Avançado) e clique para expandir a seção “Device Visibility” (Visibilidade do dispositivo).

How to create a mobile-only menu in SeedProd

Agora você pode alternar o controle deslizante “Ocultar na área de trabalho”.

Agora, o SeedProd mostrará esse menu apenas para usuários móveis.

Hiding a menu on desktop devices

Quando você estiver satisfeito com a aparência do menu personalizado, é hora de publicá-lo.

Basta clicar na seta suspensa ao lado de “Salvar” e, em seguida, selecionar “Publicar”.

How to publish a custom page layout

Agora, se você visitar seu blog do WordPress, verá o menu de navegação personalizado em ação.

Método 3: Criar um menu de navegação personalizado no WordPress usando código (avançado)

Se você não quiser configurar um plug-in do construtor de páginas, poderá adicionar um menu de navegação personalizado usando código. Geralmente, você encontrará guias com instruções sobre como adicionar trechos de código personalizados ao arquivo functions.php do seu tema.

No entanto, não recomendamos esse método, pois até mesmo um pequeno erro em seu código pode causar vários erros comuns do WordPress ou até mesmo quebrar seu site completamente. Você também perderá o código personalizado quando atualizar o tema do WordPress.

É por isso que recomendamos o uso do WPCode. É a maneira mais fácil e segura de adicionar código personalizado no WordPress sem precisar editar nenhum arquivo principal do WordPress.

Observação: há inúmeras maneiras diferentes de usar o WPCode para personalizar com segurança seu site WordPress. Ele tem uma biblioteca de trechos de código integrada e oferece suporte a todas as linguagens mais importantes do WordPress, incluindo PHP, JavaScript, CSS e HTML. Para obter mais informações sobre o plug-in, confira nossa análise completa do WPCode.

A primeira coisa que você precisa fazer é instalar e ativar o plug-in gratuito WPCode. Para obter mais detalhes, consulte nosso guia passo a passo sobre como instalar um plug-in do WordPress.

Após a ativação, vá para Code Snippets “ Add Snippet em seu painel do WordPress.

Adding a code snippet using the WPCode WordPress plugin

Aqui, você verá todos os snippets prontos que podem ser adicionados ao seu site, incluindo um snippet que permite desativar completamente os comentários, fazer upload de tipos de arquivos que o WordPress normalmente não suporta, desativar páginas de anexos e muito mais.

Para criar seu próprio snippet, passe o mouse sobre “Add Your Custom Code” e clique em “Use snippet”.

Adding a custom snippet to your WordPress website

Para começar, insira um título para o snippet de código personalizado. Pode ser qualquer coisa que o ajude a identificar o snippet em seu painel do WordPress.

Depois disso, abra a lista suspensa “Code Type” (Tipo de código) e selecione “PHP Snippet”.

Adding a custom navigation menu using WPCode

Depois de fazer isso, basta colar o seguinte snippet no editor de código:

function wpb_custom_new_menu() {
  register_nav_menu('my-custom-menu',__( 'My Custom Menu' ));
}
add_action( 'init', 'wpb_custom_new_menu' );

Isso adicionará um novo local de menu ao seu tema chamado “My Custom Menu”. Para usar um nome diferente, basta ajustar o snippet de código.

Se você quiser adicionar mais de um menu de navegação personalizado ao seu tema, basta adicionar uma linha extra ao trecho de código.

Por exemplo, aqui, estamos adicionando dois novos locais de menu ao nosso tema, chamados “My Custom Menu” e “Extra Menu”.

function wpb_custom_new_menu() {
  register_nav_menus(
    array(
      'my-custom-menu' => __( 'My Custom Menu' ),
      'extra-menu' => __( 'Extra Menu' )
    )
  );
}
add_action( 'init', 'wpb_custom_new_menu' );

Depois disso, role até as opções de “Inserção”. Se ainda não estiver selecionada, escolha o método “Auto Insert” para que o WPCode adicione o snippet em todo o seu site.

Depois disso, abra o menu suspenso “Location” (Localização) e clique em “Run Everywhere” (Executar em todos os lugares).

Running a custom code snippet

Em seguida, você está pronto para rolar até a parte superior da tela e clicar no botão de alternância “Inactive” (Inativo) para que ele mude para “Active” (Ativo).

Por fim, clique em “Salvar” para tornar esse snippet ativo.

Inserting a custom navigation menu using the WPCode WordPress plugin

Depois disso, vá para Appearance ” Menus e examine a área “Display location” (Local de exibição).

Agora você deve ver uma nova opção “My Custom Menu”.

A custom navigation menu created using the WPCode plugin

Agora você pode prosseguir e adicionar alguns itens de menu ao novo local. Para obter mais informações, consulte nosso guia passo a passo sobre como adicionar menus de navegação para iniciantes.

Quando estiver satisfeito com seu menu, a próxima etapa será adicioná-lo ao tema do WordPress.

Adição do menu de navegação personalizado ao seu tema do WordPress

A maioria dos sites mostra o menu de navegação diretamente abaixo da seção do cabeçalho. Isso significa que o menu é uma das primeiras coisas que os visitantes veem, juntamente com o logotipo ou o título do site.

Você pode adicionar o menu de navegação personalizado a qualquer local adicionando algum código ao arquivo de modelo do seu tema.

No painel do WordPress, vá para Appearance ” Theme File Editor.

No menu à direita, escolha o modelo em que você deseja adicionar o menu. Por exemplo, se quiser mostrar o menu de navegação personalizado no cabeçalho do site, você normalmente selecionará o arquivo header.php.

The WordPress theme file editor

Para obter ajuda para encontrar o arquivo de modelo correto, consulte nosso guia sobre como encontrar os arquivos a serem editados em seu tema do WordPress.

Depois de selecionar o arquivo, você precisará adicionar uma função wp_nav_menu e especificar o nome do seu menu personalizado.

Por exemplo, no trecho de código a seguir, estamos adicionando “My Custom Menu” ao cabeçalho do tema:

wp_nav_menu( array( 'theme_location'=>'my-custom-menu', 'container_class'=>'custom-menu-class' ) );

Depois de adicionar o código, clique no botão “Update File” (Atualizar arquivo) para salvar suas alterações.

Editing the WordPress theme files

Agora, se você visitar seu site, verá o menu personalizado em ação.

Por padrão, seu menu aparecerá como uma lista simples com marcadores.

A custom WordPress menu created using code

Você pode estilizar o menu de navegação personalizado para combinar melhor com o tema do WordPress ou com a marca da empresa adicionando código CSS personalizado ao seu site.

Para fazer isso, vá para Appearance ” Personalizar.

Customizing a WordPress theme

No personalizador de temas do WordPress, clique em “CSS adicional”.

Isso abre um pequeno editor de código no qual você pode digitar algumas CSS.

Adding additional CSS to your WordPress theme

Agora você pode estilizar o menu usando a classe CSS que adicionou ao modelo do tema. Em nosso exemplo, essa classe é .custom_menu_class.

No código a seguir, estamos adicionando margens e preenchimento, definindo a cor do texto como preto e organizando os itens de menu em um layout horizontal:

div.custom-menu-class ul {
    margin:20px 0px 20px 0px;
    list-style-type: none;
    list-style: none;
    list-style-image: none;
    text-align:right;
	display:inline-block;
}
div.custom-menu-class li {
    padding: 0px 20px 0px 0px;
    display: inline-block;
} 

div.custom-menu-class a {
    color:#000;
}

O personalizador do WordPress será atualizado automaticamente.

Agora ele mostrará como o menu ficará com o novo estilo.

Styling a custom navigation menu

Se você estiver satisfeito com a aparência do menu, clique em “Publish” (Publicar) para tornar suas alterações efetivas.

Para obter mais informações, consulte nosso guia sobre como estilizar os menus de navegação do WordPress.

Guias de especialistas: Faça mais com os menus de navegação do WordPress

Com o WordPress, você pode criar todos os tipos de menus úteis e envolventes. Com isso em mente, aqui estão alguns guias especializados para ajudá-lo a tirar ainda mais proveito de seus menus de navegação:

Esperamos que este guia definitivo tenha ajudado você a aprender como adicionar um menu de navegação personalizado no WordPress. Talvez você também queira ver nossos guias sobre como adicionar um botão no menu de cabeçalho do WordPress ou como destacar um item de menu 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.

Divulgação: Nosso conteúdo é apoiado pelo leitor. Isso significa que, se você clicar em alguns de nossos links, poderemos receber uma comissão. Veja como o WPBeginner é financiado, por que isso é importante e como você pode nos apoiar. Aqui está nosso processo editorial.

Avatar

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

O kit de ferramentas definitivo WordPress

Obtenha acesso GRATUITO ao nosso kit de ferramentas - uma coleção de produtos e recursos relacionados ao WordPress que todo profissional deve ter!

Reader Interactions

98 ComentáriosDeixe uma resposta

  1. Syed Balkhi

    Hey WPBeginner readers,
    Did you know you can win exciting prizes by commenting on WPBeginner?
    Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
    You can get more details about the contest from here.
    Start sharing your thoughts below to stand a chance to win!

  2. Imran

    I have a custom header built for wordpress when had menu items hardcoded, How can i use the wordpress menu in the header instead of the hardcoded menu ?

  3. cheryl

    I am fairly new to wordpress however I would like to edit a custom menu that we have created as something appears wrong within the menu.

    How do i do this?

  4. Manu

    Excellent tutorial! This was exactly what I needed right now. Within 5 minutes I was able to set up a footer menu in a theme that by default didn’t have any. Thank you so much :)

  5. Munna Hossain

    Helpful article. I am a WordPress user and this tips will help me to add custom navigation menus. Thanks for sharing.

  6. Daniel Keith

    Hi there,
    Great tutorial. How can I apply CSS to this custom menu?
    Though this is a great way to add multiple menus but without proper CSS the website look odd.

  7. Zaheer Abbas

    I m creating my word press theme but menu and widget is not showing in admin panel ???
    is it built in features in word press or i have to create menus and widgets with code plz guide

  8. Tabitha

    How can I make my drop down menu into columns? My current drop down is too long.

  9. Aakash Salunke

    I’m little bit advanced user. My theme supports only one menu. But I want to add one more menu. I have made it but how can I add?

    • WPBeginner Support

      First you will need to register the menu location, then you will need to edit your theme files to display your navigation menu.

      Administrador

  10. bobit

    its worked, thanks for the great post

  11. Aijaz Ansari

    Awsome, tutorial, it really helps a novice like me.
    thanks

  12. Victoria

    Thanks for the article!!! I created my new menu.
    I have a problem though.
    My website has a fixed width, and when I resize the window everything stays in place, exept for the new menu. Min-width is not an option because it’s not exactly the behavior I want.
    How can I make it behave the same way as the rest of the contents of the page?
    Thanks!

  13. Joey

    THANKS! I was looking a long time for this, never thought it was so simple.

  14. Cory

    i have a crazy old theme that didnt support WP 3.0+ menus. This tutorial was so easy. Took me 3 minutes to bring it a little more up to date. thanks so much.

  15. Jacques Goudreau

    Thanks for the tip! Great tut!

  16. Emma

    Where do you even go to make these changes? I can’t see any of those options under the Theme or Theme Options tabs.

    I use the Buenos Theme, but can’t find on the Buenos theme page does it support these changes? I want to put in an Archive menu with a list of all the recipes on my blog… should be easy but proving impossible :(

    • Editorial Staff

      Most themes do support this. Look at Appearance > Menus. This article is for theme designers who want to add this feature in their themes to allow users to add menus from the backend.

      Administrador

  17. Zoe

    I’ve been trying to add a custom class to a singular custom url (to change the color of just one url) in the Top Nav Menus section, but it just adds my class as an extension of the existing class in the output source code and nothing happens.

    Here’s my css code and the source code that is output on my site:

    .myCustomClass { color: #FFFF00; }

    A one-off colored link

    Any suggestions on how to get this to work?

    • Editorial Staff

      Yes add it like color: #ffff00 !important; in that class. This should do the trick.

      Administrador

  18. Jeremy Johnson

    I was able to implement these modifications and the custom menu works. However, the css in my chosen theme doesn’t seem to support sub-menus. The submenu item is always visible, mousing over the parent item does nothing, and the parent menu item is as wide as the wider child item which pushes the other menu items farther to the right than they should be. Any suggestions on making the sub-menu act dynamically? I’m fairly new to CSS.

    • Editorial Staff

      The best place to start would be to take the default Twenty Eleven theme. Use the navigation CSS from there, and start modifying.

      Administrador

    • Cedric

      Still looking for a solution for this.

  19. PauloNeves

    I need help.
    Follow all steps, but in Apparance Panel the option menu not enable.
    When select other theme working.
    How do enable option menu?
    Thanks.
    Paulo Neves

    • wpbeginner

       @PauloNeves You have to add this line in your theme’s functions.php file: add_theme_support( ‘menus’ );

  20. Brad

    Thanks for this! Worked awesomely for me and helped my client a lot! – aptdesign 

  21. eeebasic

    That is very helpful me although wordprees 3.3 version released few days ago.

  22. citydan

    I have followed the instructions and this post and the post here (https://www.wpbeginner.com/wp-tutorials/adding-a-second-menu-to-the-twenty-ten-theme/), and figured out how to get my CSS to make the menu appear correctly, but the child items (sub menu items) are not appearing. I have them set up correctly in the menus editor, but on the site they do not show. They are not hidden by CSS because they are not there in the source code of the page.

    Any ideas why my menu sub-items are not showing?

  23. GourabMalla

    Hi,

    I have added the custom menu in top navigation but want to know how can I active the “Current Page Class”.

    I’m using WordPress 3.2

    Thanks

    Gourab

  24. DanFlynnDesign

    Thank you! Love how this is all dynamic so the client can edit if needed, plus able to state which is the current page and apply hover effect! EXACTLY what I was looking for!

  25. asharperrazor

    I have tried this many times. I have an old wordpress theme. So old I’m not even sure what version of wrodpress it was written for. Anyway, I can get the functions part to work. I can save the correct menu. I can put the code into other parts of my website, say the footer, although it displays as a hierarchy list and not horizontally.

    Won’t display in the top nav menu. Do I need a new theme or is it possible to edit my current theme to allow the new menu function?

    Thanks in advance. The website is http://www.asharperrazor.com

  26. JamesGeorge

    I implemented this with NO problems-thank you! I took the “nav menu” code and put it in the div where my client’s theme was calling the list of pages. I basically replaced it with your code from above and uploaded it, and the css kept it in the same style. It looks great and functions perfectly. AWESOME!

  27. ÁlvaroBenavides

    I really need help implementing the CSS of the classes, so please notify when u finish!

  28. Bec

    Great post – thank you!

    I have implemented as above and my menu items are showing on site only problem is that each page is empty?!

    any ideas?

    • Editorial Staff

      Sounds like a PHP error. Please validate your PHP to make sure there is no error.

      Administrador

  29. Paul

    I have created custom navigation menus a couple of times. What is weird is that after I create and save them, they appear for a while and then the navigation bar returns to 2 tabs only as if the settings are automatically overwritten. On sites with the same template were I never created a custom bar they display correctly.
    Any ideas?

  30. Narendra Choudhary

    You can define custom classes to each navigation, and then add image in the background. You can even use CSS (text-indent) property to get rid of the Menu text if you want.
    Reply

  31. Ram

    I have a question on nav menu,
    is there any way to add the image to the list of navigation menus..

    Thanks,
    Ram

    • Editorial Staff

      You can define custom classes to each navigation, and then add image in the background. You can even use CSS (text-indent) property to get rid of the Menu text if you want.

      Administrador

      • Ram

        thanks for your response but i need more clearly that custom menu image for the wordpress.
        Im using wp_list_categories(‘exclude=4,7&title_li=’); to show the navigational menu so is it any possibility to add the different images to the different menu button. Im trying the CSS but it never works for me :(

        Thanks,
        Ram

        • Editorial Staff

          Yes it is possible to add different images with the custom menu. The one you are using is not the menu that we are talking about in this article.

  32. Julie @ Inspired to Write

    Can you add code to make it look more presentable (fonts, buttons, size, etc)? If so, can you give me an example and where to put this code? Thanks!

    • Editorial Staff

      That is a CSS related question. You will have to add the font size in the appropriate classes in the CSS file. We will be doing a writeup on the CSS styles soon.

      Administrador

  33. Chris

    Question about the menu handling.

    I have a menu that is right aligned, so the menu items show up in reverse order.

    Is there a way to sort the menu_order in REVERSE?

    so: sort_column’ => ‘menu_order’ would have something added to reverse the order.

    Thanks!

    • Editorial Staff

      Just because they are right aligned, shouldn’t make it appear in reverse order. To fix that, you need to change your CSS rather than reversing the hook. Make a container div that is aligned right, and then make the list tags float left.

      Administrador

  34. Julie

    Have followed instructions but after creating menus and adding appropriate categories to use, I can’t see them in my nav bar – any ideas what I have done wrong?

    • Editorial Staff

      Have you pasted the codes in your header.php or wherever that menu should appear?

      Administrador

  35. dan

    You also need to add this to your functions.php file in order for you to use the menus

    register_nav_menus( array(
    ‘primary’ => __( ‘Main Navigation’, ‘twentyten’ ),
    ) );

    • Editorial Staff

      Certainly a thing that you should have when releasing free themes, but for custom themes it all depends on what you need. Sometimes you don’t have to register locations.

      Administrador

  36. errr

    i’m soooo not following … could u be more clear where i would plug this code (add_theme_support( ‘menus’ );) into the functions.php file?

    i’m totally lost

    • Editorial Staff

      Somewhere within the php tags. If you do not have PHP experience, we recommend you hire a professional.

      Administrador

      • BanyanTree

        If you are going to write articles for newbies, it follows you should answer simple questions. Otherwise, just pay for ads to push your business and save the pretense.

        • wpbeginner

          @BanyanTree Adding codes to functions.php file is not that hard. You paste it within the php tags. We have written an articles like this:https://www.wpbeginner.com/beginners-guide/beginners-guide-to-pasting-snippets-from-the-web-into-wordpress/ But its just impossible to link to that one article from all of our articles. When someone asks you how do I change the background in CSS and you tell them that you add background: #000 or another hexcode in the CSS property thats help enough.Now if they ask where in the CSS file I paste that, then that is something you need to know before hands. This site is not a PHP for Dummies site or CSS for dummies site. We do our best to help as much people as possible for FREE.

        • BanyanTree

          @wpbeginner@BanyanTree You don’t need to link to articles, no one asked for that. Three words answers his question; “at the end,” which is easier to type than a snide remark. Keep in mind, you named your site; “wpbeginner,” and if that’s the audience you seek, cater accordingly.

        • wpbeginner

          @f1mktsol Yes and the site has grown beyond the audience we initially started with. This site has evolved. That is why we have categories… The word “beginner” is being used on a relative scale.

          We have articles for Very Newbies who are just users in our Beginners Guide Category… We also have articles in our WordPress plugins category that are catered to that audience.If you are in our WP Themes category, then the articles are written for beginning theme developers. They are beginners in the developer area. Same with the tutorials.

          Hope that explains it.

        • f1mktsol

          @wpbeginner If you’ve outgrown your name, you should change it to suit the audience you seem to prefer. Consider consulting a professional.

  37. Skubeedoo

    I added add_theme_support( ‘menus’ );
    and saw no option in the admin panel [where do i look?] I’m using intrepidity theme. I’m a noob, so it might be right in front of me and don’t know the difference. I have a website that has a WP inside it and want to be able to navigate out of WP and back to my main URL. All I need is a “Home” nav link.
    Thanks in advance.

  38. ianarosh

    friend you have an awesome site and I am glad i’ve found it!
    I was killing my head to figure how to add the costum menu and it was easy after i’ve seen this! Simply amazing.

    A sugestion ever pondered in making posts about blog/server security? (not sure if you’ve had already need to explore more :O)

    Best regards and keep the good work mate!

  39. Charles

    Can any of you tell me how to add support for multiple menus in the functions php file. I want to include two set’s of menus

    • Editorial Staff

      You don’t need to have two set of functions.php… Just call the main function. Create multiple menus using the user interface in wp-admin. Then you would have to call the menus in the php code.

      Administrador

  40. Jamie

    Just to let you know but the following:

    “add_theme_support( ‘nav-menus’ );”

    Has changed in the final release to:

    “add_theme_support( ‘menus’ );”

    Thanks! :)

  41. Jacob

    Great. Just what I was looking for. How do you add the menu slug to the function?

  42. Chris Creed

    Thanks for this – I’m currently playing around with the new menu system – it’s a great additional feature that’s going to make things so much easier. I develop themes and get quite a few support requests from people wanting to create custom navigation sections on their site – the new menus should hopefully help to simply things a lot (especially for people with little WordPress experience).

  43. Angie

    I am wondering how to remove HOME from my nav menu using WP 3.0 beta. Do I edit the wp_nav_menu function or is there some other way?

    If I edit the function, can you provide instruction?

  44. Kevin

    Its a pity there’s no way to add the “home” page to the menu from within the menu builder. This is a major flaw.

    • Editorial Staff

      Why not? You can create a custom navigation link called Home and add your homepage URL to it.

      Administrador

  45. Noor

    I am also testing WordPress 3.0 Beta and I found few bad things in Menus…e.g it is inconsistent and hope till the final release it will become consistent

Deixe uma resposta

Obrigado por deixar um comentário. Lembre-se de que todos os comentários são moderados de acordo com nossos política de comentários, e seu endereço de e-mail NÃO será publicado. NÃO use palavras-chave no campo do nome. Vamos ter uma conversa pessoal e significativa.