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 no topo?

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 em seu blog WordPress.

Se você não tem tinta, criou um site ou blog no WordPress, nós o convidamos a consultar Como instalar um blog WordPress em etapas 7 então, Como pesquisar, instalar e ativar um tema WordPress em seu blog

Se for feito, vamos entrar no 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, pode aprenda como fazer.

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 configurar 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, você deve clicar com o botão direito do mouse e selecionar "Inspecionar".

Vá mais longe descobrindo Como personalizar um tema WordPress com Lápis Amarelo

Isso dividirá (por padrão) a tela do seu 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 ID do CSS do nosso menu de navegação é " site Navigation ".

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

A próxima opção nas configurações do plugin é 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 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 é adicionada para usuários logados.

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, poderá adicionar 780px a essa opção.

Descubra também Como criar um menu responsivo para dispositivos móveis no WordPress

Não 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 personalizador do WordPress.

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 o 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 pode 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 o nosso tutorial, agora você será capaz de criar ou adicionar um menu flutuante em seu site.

Se você está procurando por outros plugins WordPress que lhe permitirão gerenciar menus, aqui estão alguns plugins premium para WordPress dedicados a esta tarefa.

1. herói do menu

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

Em termos de recursos, 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 menu, navegadores suportados: Chrome, Firefox, Safari , Opera, IE9 e muito mais.

Download | Demonstração | Web Hosting

2. Menu Slick

Menu Slick não é um plugin de menu para o 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.

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 animações 45 para os itens de menu.

Download | Demonstração | Web Hosting

3. 8Degree Fly Menu

8Degree Fly Menu é um plugin WordPress premium que permite que você adicione um menu de tela em seu site, para dar uma aparência que destaca e simples 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 menus, um cabeçalho de pseudo-agrupamento e uma descrição longa. Ele também vem com um editor WYSIWYG para ajudá-lo a entender a sua longa descrição de maneira fácil de usar.Com esse 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]

Download | Demonstração | Web Hosting

Outros recursos recomendados

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

Conclusão

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

Se você tiver alguma sugestão ou comentário, será bem-vindo. 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?
    Isto é particularmente problemático no meu caso, porque é uma página e os itens no meu menu referem-se a seções das páginas, que voltam 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.

Cool WordPress temas que eu encontrei em
E há mais temas e modelos 50 000 para você escolher!

De volta ao topo
4 ações
ação2
chilrear
Enregistrer2
Whatsapp