O menu de navegação superior de um site geralmente contém links para todas as páginas mais importantes. Quando você torna esse menu fixo, ele permanece na tela enquanto o usuário rola a página. Dessa forma, ele está sempre ao alcance.
Isso torna a navegação mais acessível, permitindo que os usuários pulem rapidamente para diferentes seções do seu site sem ter que rolar de volta para o topo. Na nossa opinião, usar um menu fixo pode ajudar a aumentar o engajamento e melhorar a usabilidade geral do site.
Neste artigo, mostraremos como adicionar facilmente um menu de navegação flutuante fixo ao seu site WordPress.
O que é um Menu de Navegação Flutuante Fixo?
Um menu de navegação fixo ou flutuante 'gruda' no topo da tela enquanto o usuário rola para baixo, ficando visível o tempo todo.
Geralmente, o menu de navegação superior no WordPress contém links para o conteúdo mais importante do seu site. Ao tornar este menu fixo, os visitantes podem clicar nesses links a qualquer momento sem ter que rolar.
Se você administra uma loja online, o menu de navegação superior geralmente tem links para páginas projetadas para conversão, como a página de checkout e o carrinho do cliente. Ao tornar o menu superior fixo, você pode frequentemente reduzir as taxas de abandono de carrinho e obter mais vendas.
Dito isso, vamos ver como você pode facilmente criar um menu de navegação flutuante fixo em qualquer tema WordPress ou loja WooCommerce. Basta usar os links rápidos abaixo para pular para o método que você deseja usar:
- Método 1: Adicionar um Menu Fixo Usando as Configurações do Seu Tema (Fácil)
- Método 2: Adicionar Seu Menu de Navegação Fixo Usando um Plugin (Recomendado)
- Método 3: Adicionar um Menu de Navegação Flutuante Fixo Usando Código
- Bônus: Tornar Seus Posts do WordPress Fixos
Método 1: Adicionar um Menu Fixo Usando as Configurações do Seu Tema (Fácil)
Alguns dos melhores temas do WordPress têm suporte integrado para menus de navegação fixos. Dito isso, vale a pena verificar as configurações do seu tema acessando Temas » Personalizar no painel do WordPress e procurando por quaisquer configurações rotuladas como 'Menus'.
Se você não tem certeza se o seu tema suporta menus fixos, pode verificar a documentação do tema ou até mesmo entrar em contato com o desenvolvedor para obter ajuda. Para mais informações, consulte nosso guia sobre como solicitar suporte do WordPress corretamente e obtê-lo.
Se o seu tema não tiver suporte integrado para menus fixos, você precisará usar um dos outros métodos abaixo.
Método 2: Adicionar Seu Menu de Navegação Fixo Usando um Plugin (Recomendado)
A maneira mais fácil de adicionar um menu de navegação fixo no WordPress é usando o plugin Sticky Menu & Sticky Header. Ele permite que você torne qualquer coisa fixa, incluindo menus.
Primeiro, você precisará instalar e ativar o plugin. Se precisar de ajuda, consulte nosso guia para iniciantes sobre como instalar um plugin do WordPress.
Após a ativação, vá para Configurações » Sticky Menu (or Anything!).
Para começar, você precisará obter o ID do CSS do menu de navegação que você deseja tornar fixo usando a ferramenta de inspeção do seu navegador.
Simplesmente visite seu site e passe o mouse sobre o menu de navegação. Em seguida, clique com o botão direito e selecione 'Inspecionar' no menu do navegador.
Isso abrirá um novo painel dentro do navegador, onde você poderá ver o código-fonte do menu de navegação.
Você precisa encontrar a linha de código que se relaciona com o menu ou o cabeçalho do seu site. Ela se parecerá com algo assim:
<nav id="site-navigation" class="main-navigation" role="navigation">
Se você estiver com dificuldades para encontrar o código, passe o mouse sobre as diferentes linhas de código no painel 'Inspecionar'. Quando encontrar o código certo, o navegador destacará o menu de navegação, como você pode ver na imagem a seguir.
Neste caso, o ID CSS do menu de navegação é site-navigation.
Depois de ter essa informação, volte para o seu painel do WordPress e adicione-a ao campo ‘Elemento Fixo (Obrigatório)’.
Você também precisará adicionar um caractere de hash (#) no início, então site-navigation se torna #site-navigation.
Depois disso, clique no botão ‘Salvar Alterações’ na parte inferior da página para armazenar suas alterações.
Agora, se você visitar seu site WordPress e rolar a página, o menu deverá permanecer no topo.
Às vezes, o menu fixo pode sobrepor algum conteúdo que você não quer que fique oculto.
Se isso acontecer, você precisará definir um espaço entre o topo da sua tela e o menu de navegação fixo digitando um número no campo ‘Espaço entre o topo da página e o elemento fixo’.
Menus fixos podem causar problemas para dispositivos com telas menores, como dispositivos móveis. Com isso em mente, é uma boa ideia verificar a versão mobile do seu site WordPress a partir do seu desktop.
Se você não estiver satisfeito com a aparência do menu, pode ‘desfixá-lo’ para usuários móveis encontrando o seguinte campo: ‘Não fixar elemento quando a tela for menor que.’
Aqui, digite ‘780px.’
Existem mais algumas configurações para explorar, mas isso é tudo que você precisa para criar um menu de navegação fixo funcional.
Quando estiver satisfeito com a configuração do menu de navegação, clique em ‘Salvar Alterações’ para armazenar suas configurações.
Método 3: Adicionar um Menu de Navegação Flutuante Fixo Usando Código
Você também pode criar um menu de navegação fixo usando CSS.
A melhor maneira de adicionar código personalizado ao WordPress é usando WPCode. é o melhor plugin de snippets de código que permite adicionar CSS, PHP, HTML personalizado e muito mais.
Como você não está editando os arquivos do tema diretamente, você pode evitar muitos erros comuns do WordPress. Você também pode atualizar seu tema ou mudar para um tema completamente diferente sem perder seu código personalizado.
Você também pode ativar e desativar o menu fixo com um único clique.
Primeiro, você precisará instalar e ativar o plugin gratuito WPCode. Para mais informações, veja nosso guia passo a passo sobre como instalar um plugin do WordPress.
Após o plugin ser ativado, vá para a página Snippets de Código » + Adicionar Snippet, onde você verá todos os snippets WPCode prontos que você pode adicionar ao seu site.
Isso inclui um snippet que permite que você desative completamente os comentários, envie tipos de arquivo que o WordPress normalmente não suporta, desative páginas de anexos, e muito mais.
Aqui, basta passar o mouse sobre ‘Adicionar Seu Código Personalizado (Novo Snippet)’ e clicar no botão ‘Usar snippet’ quando ele aparecer.
Na próxima tela, você precisa digitar um título para o snippet de código. Isso é apenas para sua referência, então você pode usar o que quiser.
Em seguida, abra o menu suspenso ‘Tipo de Código’ e escolha ‘Snippet CSS’.
Com isso feito, adicione o seguinte snippet ao editor de código WPCode:
#site-navigation {
background:#00000;
height:60px;
z-index:170;
margin:0 auto;
border-bottom:1px solid #dadada;
width:100%;
position:fixed;
top:0;
left:0;
right:0;
text-align: center;
}
Isso criará um menu de navegação com um fundo preto. Você pode usar qualquer cor que desejar alterando o código hexadecimal ao lado de background.
Por exemplo, usar background: #ffffff dará a você um fundo de menu branco. Se você não tiver certeza de qual código hexadecimal usar, poderá consultar um recurso como código de cores HTML.
Você também precisará substituir #site-navigation pelo ID CSS do seu menu de navegação. Para encontrar este código, basta seguir o mesmo processo descrito acima.
Quando estiver satisfeito com o código, clique no alternador 'Inativo' para que ele mude para 'Ativo' e, em seguida, clique no botão 'Salvar Snippet'.
Agora, se você visitar seu blog ou site WordPress, verá o menu de navegação flutuante fixo em ação.
Dependendo do seu tema, às vezes o menu de navegação pode aparecer abaixo do cabeçalho do site em vez de acima dele. Nesse caso, o menu de navegação fixo pode aparecer muito perto do título e do cabeçalho do site ou até mesmo sobrepô-lo.
Se isso acontecer, você pode adicionar o seguinte ao seu trecho de CSS personalizado:
.site-branding {
margin-top:60px !important;
}
Basta substituir site-branding pela classe CSS da sua área de cabeçalho. Para obter essa informação, basta usar a ferramenta ‘Inspecionar’ do seu navegador e seguir o mesmo processo descrito no Método 2.
Bônus: Tornar Seus Posts do WordPress Fixos
Se você tem um blog WordPress, é uma boa ideia tornar alguns dos seus posts fixos. Estes podem ser os artigos pilares que incluem o conteúdo mais importante do seu site ou anúncios e posts de sorteio com os quais você deseja que os usuários interajam.
Quando você torna um post de sua escolha fixo, ele permanecerá no topo da sua página de blog mesmo quando você publicar novo conteúdo, que será exibido abaixo do post fixo.
Você pode facilmente tornar seu post de blog fixo abrindo-o no editor de conteúdo. Uma vez feito isso, basta expandir a aba ‘Resumo’ no painel de blocos e marcar a opção ‘Fixar no topo do blog’.
Depois disso, clique no botão ‘Atualizar’ ou ‘Publicar’ no topo para salvar suas configurações. Você agora criou com sucesso um post de blog fixo no seu site WordPress.
Para mais detalhes, veja nosso tutorial sobre como fazer posts fixos no WordPress.
Esperamos que este artigo tenha ajudado você a adicionar um menu de navegação flutuante fixo ao seu site WordPress. Você também pode querer ver nosso guia para iniciantes sobre como adicionar um menu de painel deslizante em temas WordPress e nosso tutorial sobre adicionar ícones de mídia social ao menu do 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.
Dennis Muthomi
existe uma maneira de fazer o menu fixo se aplicar apenas a posts/páginas específicas? Como, por exemplo, tê-lo não fixo na página inicial do meu blog, mas fixo em todos os outros lugares do site?
WPBeginner Support
If your theme does not offer that option then we would recommend the plugin for a simple method to have that conditional display
Admin
Mrteesurez
Bem elaborado, fico feliz em ver o plugin que você compartilhou aqui “menu fixo ou (qualquer coisa) ao rolar”. Isso significa que ele pode ser usado para fixar quaisquer elementos além do menu.
Inicialmente, usei código puro para isso, obrigado por compartilhar este método fácil.
Dayo Olobayo
Concordo, Sr. Mrteesurez, menus fixos são um recurso valioso para sites. Além de criar um menu fixo, você também pode considerar incorporar um efeito de “rolagem suave” para melhorar ainda mais a experiência do usuário ao navegar entre as seções da sua página da web.
Jiří Vaněk
Obrigado pelo tutorial. Eu sempre estive procurando por um modelo que pudesse fazer isso. De acordo com este guia, não preciso mais.
WPBeginner Support
Glad we could help open up your theme options
Admin
Paul
Onde deixo as 5 estrelas…..muito obrigado!!
WPBeginner Support
Glad our guide was helpful
Admin
Jess
Muito, muito obrigado por este post útil!!! Tão claro e fácil de seguir.
WPBeginner Support
Glad our guide was helpful
Admin
Ivaylo
Ótimo tutorial prático. Fiz o Método 2 e funcionou instantaneamente, mas quando abro o site no celular, os botões do menu desapareceram. Alguém sabe por quê ou como resolver?
Saudações!
WPBeginner Support
Se você ainda não o fez, recomendamos verificar com o suporte do seu tema específico para ver se pode haver um conflito com o CSS do seu tema
Admin
Serena Richardson
Olá,
Como crio um menu flutuante fixo no lado direito de uma página em vez de no topo, para que ele se mova para baixo conforme você rola a página.
Obrigada!
Serena
WPBeginner Support
Isso seria adicionar um widget fixo, para o qual temos uma recomendação em nosso artigo abaixo:
https://www.wpbeginner.com/plugins/how-to-create-a-sticky-floating-sidebar-widget-in-wordpress/
Admin
Tom Browne
Funcionou instantaneamente. Obrigado
WPBeginner Support
You’re welcome
Admin
simran
nível de perfeição e a forma de apresentar as informações… obrigado..
WPBeginner Support
Glad our guide was helpful
Admin
Theo
Onde encontro o ID da minha barra de navegação?
Não consigo encontrar.
WPBeginner Support
Para fazer isso, você usaria o inspecionar elemento. Temos um guia sobre como usar corretamente o inspecionar elemento abaixo:
https://www.wpbeginner.com/wp-tutorials/basics-of-inspect-element-with-your-wordpress-site
Admin
Natasha T
Um salva-vidas, não tenho palavras para agradecer.
WPBeginner Support
You’re welcome
Admin
Tam
Hello!
Thanks for your help! It worked like magic :D.
I learn a little CSS and tried to make my nav sticky from a free theme (GeneratePress) but didn’t work. (I tried “position: sticky;” in CSS), but thank your code that helped me to fix it
WPBeginner Support
Glad our article was helpful
Admin
alexandre
Exatamente o que eu estava procurando! Ótimo plugin. Obrigado
WPBeginner Support
You’re welcome, glad you found our recommendation helpful
Admin
Guy Bailey
Muito obrigado pela sua ajuda – apenas uma pequena pergunta; o fundo do meu menu fica transparente ao rolar para baixo. Alguma correção rápida ou truque para adicionar uma cor sólida atrás dele (branco no nosso caso)?
WPBeginner Support
Dependeria de como seu menu está configurado, mas você pode usar o inspecionar elemento para encontrar o objeto ao qual pode definir a propriedade background-color para: https://www.wpbeginner.com/wp-tutorials/basics-of-inspect-element-with-your-wordpress-site/
Admin
Manish
Obrigado. Quando o Wpbeginner escreve um post de blog sobre um tópico, ele certamente será útil.
WPBeginner Support
Glad our content has been helpful
Admin
Everest
Muito obrigado.
Você alegrou meu dia.
WPBeginner Support
You’re welcome, glad we could help
Admin
Tony Chung
O código CSS funcionou e eu tive que adicionar uma margem ao cabeçalho para que o título inteiro fosse exibido. Minha barra de menu se estende por toda a parte superior, mas os botões do menu começam à esquerda e param no meio. Como eu movo os botões para serem centralizados na página?
WPBeginner Support
Isso variaria de tema para tema, mas normalmente você precisaria modificar o CSS. Você pode testar as alterações usando o elemento de inspeção: https://www.wpbeginner.com/wp-tutorials/basics-of-inspect-element-with-your-wordpress-site/
Admin
Chinedu
Uau, isso funciona perfeitamente.
Obrigado
WPBeginner Support
Glad our solution worked for you
Admin
Gillian Davies
Tenho uma lista de livros em uma tabela. Importei as imagens das capas na Mídia, agora quero que as imagens apareçam conforme o usuário rola a lista. Semelhante a um hover de linha, mas como faço isso em uma tabela criada no table maker?
Raul
Como posso fazer este menu de navegação fixo rolável?
Eu o usei para uma barra lateral, mas quando a barra lateral é muito longa, ela não cabe na tela e não consigo rolá-la para baixo.
Rushikesh Thawale
Olá,
Como você escreveu o código COMO UM CÓDIGO neste post? Quero dizer, como mostrar códigos HTML assim em um post?
Obrigado.
Tara
Você provavelmente já descobriu, mas para quem está procurando, como exibir seu código em seu post, use o caractere html para o colchete de abertura nas tags html < ; sem o espaço.
WPBeginner Support
Esse é um método, mas para isso, estamos usando o segundo método em nosso artigo aqui: https://www.wpbeginner.com/wp-tutorials/how-to-easily-display-code-on-your-wordpress-site/
Admin
Cesar
Great post! your CSS code works for me
dani
Alain
Muito útil!
obrigado.
amin
Você também pode usar “z-index: 999xxxx” para o logo ou qualquer elemento que você queira colocar na barra de navegação
Sujith Reghu
Eu quero saber como adicionar um menu fixo dentro de um post ou página do WordPress. Como em um post longo, os títulos e subtítulos do próprio post serem apresentados no menu fixo para que o leitor possa navegar facilmente de uma seção do post para outra. Obrigado…
Zac
obrigado pelo tutorial!
o que eu preciso é um pouco diferente, eu preciso de um 'mini-menu' que apareça quando você passa o mouse sobre o menu… então ele não aparece até você passar o mouse… como um menu suspenso
se você pudesse fazer este tutorial, eu agradeceria.
amin
você pode usar um plugin de mega-menu ou o plugin uber menu, mas você pode fazer isso sem plugin, com css ou jquery, como o menu bootstrap3