Você já navegou em um site e descobriu que um menu de navegação está sempre visível na parte superior?

Em princípio, os menus de navegação são exibidos de forma que desapareçam ao rolar a página. Os menus de navegação sempre visíveis flutuam e assim são, não importa como o usuário rola para baixo.Como criar o menu flutuante wordpress 1

Neste tutorial, mostraremos como criar facilmente um menu flutuante no seu blog WordPress.

Se você ainda não criou um site ou blog no WordPress, convidamos você a consultar Como instalar um blog WordPress em 7 etapas, então, Como encontrar, instalar e ativar um tema WordPress em seu blog

Se estiver feito, vamos examinar o que nos preocupa hoje.

Método 1: Como adicionar um menu flutuante no WordPress usando um plug-in

Este método é mais fácil e rápido. Se você ainda não configurou os menus de navegação, poderá aprenda como fazer.

Plugy menu wordpress aderente

A primeira coisa que você precisa fazer é instalar e ativar o plugin " Menu de pegajosa (ou qualquer coisa!) Nós Role ". Se você não sabe como instalar um plugin, você pode ler nosso tutorial.

Após a ativação, você deve visitar " Configurações »Menu fixo Para definir as configurações deste plugin.

Plugy menu wordpress aderente

Primeiro, você precisa inserir os IDs CSS para o menu de navegação que deseja flutuar.

Você precisará usar a ferramenta "inspecionar" do seu navegador para encontrar o CSS usado.

Vá para o seu site e mova o mouse para o menu de navegação. Depois disso, clique com o botão direito do mouse e selecione "Inspecionar".

Vá além descobrindo Como personalizar um tema WordPress com lápis amarelo

Inspecione um tutorial de código wordpress

Isso dividirá (por padrão) a tela do navegador e você poderá ver o código fonte do seu menu de navegação. Você deve encontrar uma linha semelhante a esta:

Neste exemplo, o código CSS do nosso menu de navegação é " site Navigation ".

Vá em frente e insira o ID CSS do menu nas configurações do plugin como segue “# site-navigation”.

A próxima opção nas configurações do plugin é definir o espaço entre o topo da tela e o menu de navegação flutuante. Você pode usar esta configuração se o seu menu se sobrepõe a um item que você não deseja ocultar. Caso contrário, ignore esta configuração.

Depois disso, você precisa clicar na caixa ao lado da opção: "Check Bar Admin". Isso permite que o plugin adicione algum espaço para a barra de ferramentas do WordPress que é adicionado para usuários conectados.

A próxima opção na página de configurações permite ocultar o menu de navegação se um usuário estiver visitando seu site em uma tela menor, como um dispositivo móvel.

Você pode testar como este menu é exibido em dispositivos móveis e tablets. Se você não gostar, pode adicionar 780 px nesta opção.

Descubra também Como criar um menu sensível para WordPress móvel

Não se esqueça de clicar no botão " Salvar configurações Para salvar suas alterações.

Agora você pode visitar seu site para ver o menu de navegação flutuante em ação.

Menu flutuante Wordpress

Método 2: como adicionar um menu de navegação manualmente

Este método requer a adição de código CSS personalizado ao seu tema WordPress.

Primeiro de tudo você tem que visitar " Aparência> Personalizar Para iniciar o WordPress Customizer.

Personalizador css wordpress adicional

Clique em ' CSS adicional No painel esquerdo, adicione este código CSS.

# Navegação do site {background: # fff; altura: 60px; índice z: 170; margin: 0 auto; border-bottom: 1px #dadada sólido; largura: 100%; posição: fixo; superior: 0; esquerda: 0; direita: 0; text-align: center; }

Substituir " # Navegação do Site Pelo identificador do seu menu de navegação e clique no botão « Enregistrer ".

Agora você pode visitar seu site para ver seu menu de navegação flutuante em ação.

Se o seu menu de navegação normalmente aparece após o cabeçalho do site, esse código CSS pode sobrepor o título do site e o cabeçalho.

Isso pode ser facilmente ajustado adicionando uma margem na área do cabeçalho usando o seguinte código:

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

Aqui termina nosso tutorial, agora você poderá criar ou adicionar um menu flutuante em seu site.

Se você estiver procurando por outros WordPress plugins que permitirá que você gerencie os menus, aqui estão alguns WordPress plugins prémio dedicado a esta tarefa. 

1. herói do menu

Este plugin permite que você crie seu próprio menu WordPress personalizado em algumas etapas bastante fáceis. Em particular, permite criar de forma fácil e intuitiva um menu WordPress elegante e profissional. Do mega menu mais complexo, rico em recursos, ao menu suspenso mais simples, o WordPress Plugin HeroMenu configura qualquer tipo de menu e o coloca em funcionamento em minutos.

Hero menu responsivo wordpress mega plugin de menu

Em termos de recursos, ele oferece, entre outras coisas: perfeitamente funcional no PC, tablet e smartphone, fácil de usar, conteúdo personalizável, CSS personalizado para adicionar seus próprios estilos de menu, mega designer de menus, navegadores suportados: Chrome, Firefox, Safari , Opera, IE9 e mais.

Descarregar | Demo | hospedagem na web

2. Menu Slick

Menu Slick não é apenas um plugin de menu para WordPress. Ele pode ser usado para criar vários níveis de menu de forma ilimitada, bem como barras laterais com conteúdo rico, várias opções de estilo e efeitos animados.

Menu inteligente Wordpress responsivo menu vertical

Cada nível de menu é personalizável com cores de fundo, imagens, vídeos, fontes personalizadas e muito mais. Este plugin é totalmente responsivo e tem mais de 45 animações para os itens do menu.

Descarregar | Demo | hospedagem na web

3. 8Degree Fly Menu

O menu Fly de 8 graus é um WordPress Plugin premium que permite adicionar um menu de tela ao seu site, para dar uma aparência que destaque suas informações de maneira simples. Ele usa o recurso de menu padrão do WordPress para criar seus menus.

Plugin de menu de tela responsivo de 8 graus para Wordpress

Você poderá adicionar elementos adicionais aos itens de menu padrão, como ícones, slogans de menu, um cabeçalho de pseudo-agrupamento e uma descrição longa. Ele também vem com um editor WYSIWYG para ajudá-lo a entender sua descrição longa de uma maneira fácil de usar.Com este editor, você também pode usar códigos de acesso.

Descarregar | Demo | hospedagem na web

Outros recursos recomendados

Se você quiser ir mais longe na criação ou personalização dos menus do seu blog ou site, também sugerimos que você consulte os links abaixo.

Conclusão

Aqui ! É isso para este tutorial, espero que permita adicionar um menu flutuante ao seu blog WordPress. Nós convidamos você para compartilhe este artigo com seus amigos em suas redes sociais.

Se você tiver alguma sugestão ou comentário, eles serão bem-vindos. E se você é novo no WordPress, consulte este recurso.

...