Como Criar um Menu Fixo no WordPress #136

0
197
Imagem Destacada do Post #136

Recebemos uma pergunta de um dos nossos usuários sobre como criar um menu de navegação fixo para um site.

Os menus de navegação fixos ficam sempre visíveis na tela enquanto os usuários rolam a página para baixo. Isso melhora a experiência do usuário, pois oferece acesso fácil aos links das seções mais importantes do site.

Neste artigo, vamos explicar de forma simples e educativa como criar um menu de navegação flutuante no WordPress. Vamos mostrar um método fácil para que você possa implementar essa funcionalidade em seu site, proporcionando uma melhor usabilidade para seus visitantes.

O Que é Um Menu De Navegação Fixo?

Um menu de navegação fixo ou flutuante é aquele que permanece no topo da tela enquanto o usuário rola para baixo. Isso mantém o menu sempre visível e acessível durante a navegação.

Veja um exemplo de um menu fixo em ação. A seguir, mostraremos como criar um menu exatamente como este para o seu próprio site WordPress:

Um menu de navegação aderente em ação em nosso site de demonstração

Vamos guiá-lo passo a passo para que você possa implementar esse menu em seu site, proporcionando uma melhor experiência de navegação para os usuários.

Por Que e Quando Menus Fixos Podem Ser Úteis?

O menu de navegação superior é uma parte essencial de um site, pois contém links para as seções mais importantes. Um menu flutuante mantém esses links sempre visíveis, o que evita que os usuários precisem rolar de volta para o topo da página. Além disso, estudos mostram que um menu fixo pode aumentar as conversões.

Se você possui uma loja online, é provável que o menu de navegação superior contenha links para o carrinho de compras, categorias de produtos e pesquisa de produtos. Tornar esse menu aderente pode ser muito útil para reduzir o abandono do carrinho e aumentar as vendas.

Alguns dos melhores temas do WordPress já oferecem suporte integrado para um menu de navegação fixo. Você pode facilmente ativar essa opção nas configurações do tema em Temas » Personalizar.

No entanto, se o seu tema não possui essa opção, não se preocupe. Vamos mostrar como criar facilmente um menu de navegação flutuante em qualquer tema do WordPress ou loja WooCommerce.

1. Adicionando Um Menu De Navegação Fixo Com Plugin

Este é o método mais fácil. Recomendamos para todos os usuários do WordPress, principalmente para iniciantes.

Se você ainda não configurou seu menu de navegação, vá em frente e faça isso.

Depois disso, você precisa instalar e ativar o Sticky Menu (or Anything!).

Após a ativação, você precisa visitar a página Settings » Sticky Menu (or Anything!) para definir as configurações do plugin.

A página de configurações do plugin Sticky Menu

Para começar a tornar o seu menu de navegação fixo, primeiro você precisa identificar o ID CSS do menu.

Siga os passos abaixo para encontrar o ID CSS do seu menu de navegação:

  1. Visite o seu site e posicione o mouse sobre o menu de navegação.
  2. Clique com o botão direito do mouse e selecione “Inspecionar” ou “Inspect” no menu do seu navegador.

Isso abrirá a ferramenta de inspeção do navegador, onde você poderá visualizar o código HTML e CSS do seu site. Ao inspecionar o menu de navegação, você encontrará o ID específico usado para estilizar o menu.

Depois de localizar o ID CSS do seu menu de navegação, você estará pronto para implementar o menu fixo. Vamos continuar com o tutorial para mostrar como fazer isso de forma simples.

Inspecionando o elemento do menu de navegação em seu site

Isso dividirá a tela do navegador e você poderá ver o código-fonte do menu de navegação.

Você precisa encontrar uma linha de código que se relacione com a sua navegação ou o cabeçalho do seu site. Vai parecer algo assim:

1
<nav id="site-navigation" class="main-navigation" role="navigation">

Se você estiver lutando para encontrá-lo, coloque o cursor do mouse sobre as diferentes linhas de código no painel Inspecionar. O menu de navegação ficará totalmente destacado quando você tiver a linha certa de código:

Encontrar o ID do menu de navegação usando a ferramenta de inspeção

Neste caso, o CSS ID do nosso menu de navegação é site-navigation.

Tudo o que você precisa fazer é inserir o ID CSS do seu menu nas configurações do plugin com um hash no início. Nesse caso, é isso #site-navigation.

Inserindo o ID do elemento que você deseja tornar aderente (neste caso, o menu de navegação)

Não se esqueça de clicar no botão “Save Changes” na parte inferior da página.

Agora, vá em frente e verifique seu menu fixo ao vivo em seu site WordPress. Ele deve permanecer na página conforme você rola para baixo, assim:

Visualizando o menu fixo em seu site

A próxima opção na página de configurações do plugin é definir o espaço entre a parte superior da tela e o menu de navegação fixo. Você só precisa usar esta configuração se o seu menu estiver sobrepondo um elemento que você não deseja ocultar. Caso contrário, ignore esta configuração.

Recomendamos deixar marcada a caixa ao lado da opção: “Check for Admin Toolbar”. Isso permite que o plugin adicione algum espaço para a barra de administração do WordPress, que é visível apenas para usuários logados.

Aqui, você pode ver que a barra de administração em nosso site de teste está sendo exibida corretamente acima do menu fixo:

A barra de administração do WordPress aparece acima do menu fixo

A próxima opção permite que você desbloqueie o menu de navegação se um usuário estiver visitando seu site usando uma tela menor, como um dispositivo móvel:

O plugin de menu aderente oferece mais opções também

Você pode testar a aparência do seu site em dispositivos móveis ou tablets. Se você não gostar da aparência, basta adicionar 780 pixels para esta opção.

Não se esqueça de clicar no botão Salvar alterações após fazer qualquer alteração em suas opções.

2. Adicionando Manualmente Um Menu De Navegação Fixo

Este método requer que você adicione um código CSS personalizado ao seu tema. Não o recomendamos para iniciantes.

Primeiro, você precisa visitar Appearences » Customize para iniciar o personalizador de temas do WordPress.

Adicionando CSS personalizado no tema WordPress

Em seguida, clique em “Additional CSS” no painel esquerdo e, em seguida, adicione este código CSS.

#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;
}

Nota: Isso produzirá um menu de navegação com um fundo preto. Se você quiser uma cor diferente, altere o número ao lado de background. Por exemplo, usar background: #fffffffornecerá a você um fundo de menu branco.

Basta substituir #site-navigationpelo CSS ID do seu menu de navegação e clicar no botão Publicar na parte superior da tela.

Vá em frente e visite seu site para ver o menu de navegação flutuante em ação:

Um menu de navegação fixo / flutuante criado usando CSS

E se o menu de navegação normalmente aparecer abaixo do cabeçalho do site em vez de acima dele?

Nesse caso, este código CSS pode se sobrepor ao título e cabeçalho do site ou aparecer muito próximo a ele antes que o usuário role:

O menu de navegação aderente está ligeiramente sobreposto ao título do site

Isso pode ser facilmente ajustado adicionando uma margem à área do cabeçalho usando algum código CSS adicional:

.site-branding {
margin-top:60px !important;
}

Substitua site-branding pela classe CSS de sua área de cabeçalho. Agora, o menu de navegação fixo não irá mais se sobrepor ao seu cabeçalho antes que o usuário role para baixo:

Agora há espaço para o título abaixo do menu de navegação fixo

Se este artigo foi útil para você, não deixe de se inscrever em nosso canal do YouTube. Lá você encontrará diversos tutoriais de WordPress para iniciantes.

Além disso, você pode nos seguir no Twitter, LinkedIn, Instagram ou Facebook para se manter atualizado com as nossas novidades. Estamos sempre prontos para ajudar!