Ir para o conteúdo principal

Como criar um menu flutuante no WordPress

Divi: o tema WordPress mais fácil de usar

Divi: O melhor tema WordPress de todos os tempos!

mais Downloads 600.000Divi é o tema WordPress mais popular do mundo. É completo, fácil de usar e vem com mais de modelos livres 62. [Recomendado]

Você já visitou um site e percebeu 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 a desaparecer ao rolar a página. Os menus de navegação que estão sempre visíveis flutuam e não importam como o usuário rola para baixo.

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

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

Se estiver pronto, vamos falar sobre o que é relevante para nós 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.

A primeira coisa que você precisa fazer é instalar e ativar o plug-in " 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.

Primeiro, você deve entrar no menu de navegação senha CSS você quiser 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

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:

Você está procurando os melhores temas e plugins do WordPress?

Baixe os melhores plugins e temas WordPress no Envato e crie facilmente o seu site. Já mais do que 49.720.000 downloads. [EXCLUSIVO]

<Nav id = "Site Navigation" class = "main-navegação" role = "navegação">

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

Vá em frente e digite o ID do CSS do menu nas configurações do plugin como "# site-navigation".

A próxima opção nas configurações do plug-in é definir o espaço entre a parte superior da tela e o menu de navegação flutuante. Você pode usar essa configuração se o menu se sobrepuser a algo que você não deseja ocultar. Caso contrário, ignore essa configuração.

Depois disso, você deve clicar na caixa ao lado da opção "Administrador da barra de verificação". Isso permite que o plug-in adicione um pouco de espaço para a barra de ferramentas do WordPress adicionada 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 visitar seu site usando uma tela menor, como um dispositivo móvel.

Você pode testar como esse menu aparece em dispositivos móveis e tablets. Se você não gostar, pode adicionar 780px a esta 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.

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, você deve visitar " Aparência> Personalizar Para iniciar o WordPress Customizer.

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.

Crie facilmente seu site com Elementor

Elementor permite criar facilmente qualquer design de site com uma aparência profissional. Pare de pagar caro pelo que você pode fazer por si mesmo. [Grátis]

Se o menu de navegação normalmente aparecer após o cabeçalho do site, esse código CSS poderá se sobrepor ao título e ao cabeçalho do site.

Isso pode ser facilmente ajustado adicionando uma margem à sua área de 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 no seu site.

Se você estiver procurando por outros plug-ins do WordPress que permitirão gerenciar menus, aqui estão alguns plug-ins premium do WordPress dedicados a esta tarefa.

1. herói do menu

Este plugin permite que você crie seu próprio menu personalizado do WordPress em algumas etapas fáceis. Ele permite que você crie fácil e intuitivamente um menu WordPress elegante e profissional. Do mega menu mais complexo e cheio de recursos, ao menu mais simples com o menu suspenso, o plug-in WordPress HeroMenu configura qualquer tipo de menu e o torna funcional em minutos.

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 o WordPress. Ele pode ser usado para criar vários níveis de menu de maneira ilimitada, bem como barras laterais com conteúdo rico, várias opções de estilo e efeitos animados.

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

Descarregar | Demo | hospedagem na web

3. 8Degree Fly Menu

O 8Degree Fly Menu é um plugin premium do WordPress que permite adicionar um menu de tela no seu site, para dar uma aparência que destaca e simplifica suas informações. Ele usa a função de menu padrão do WordPress para criar seus menus.

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.

Crie facilmente sua loja online

Baixe gratuitamente o WooCommerce, os melhores plugins de e-commerce para vender seus produtos físicos e digitais no WordPress. [FREE]

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

É isso aí! Isso é tudo para este tutorial, espero que permita adicionar um menu flutuante ao seu blog WordPress. Convidamos você a 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.

...

Este artigo contém comentários 7
  1. Bom Dia,

    Primeiramente, obrigado por este tutorial que faz o trabalho perfeitamente!
    Mas eu procurei na net, impossível encontrar a resposta para a minha pergunta:
    como fazer, uma vez que o menu flutuante criar (em CSS ou com a extensão não importa), de modo que minhas seções aparece após o menu e não por trás do menu?
    Isso é particularmente problemático no meu caso, porque é uma página e os itens do meu menu se referem a seções das páginas, que retrocedem sempre atrás do meu menu ...

    fala com você?

    Agradecemos antecipadamente!

      1. Olá; oi

        Eu tentei com um tema baixado (wallstreet) mas, seguindo suas instruções, nada se move ... não sei o que está faltando ...
        Eu gosto e gostaria de poder usá-lo ...

        obrigado
        Raul

Deixe um comentário

Seu endereço de email não será publicado. Campos obrigatórios estão marcados com *

Este site usa Akismet para reduzir indesejados. Saiba mais sobre como seus dados de comentários são usados.

De volta ao topo
5 ações
ação2
chilrear
Enregistrer3