Nesta postagem iremos ensinar como deixar o menu fixo quando ocorrer a rolagem da página. Este recurso será ensinado com um plugin para WordPress.

Para exemplificar utilizaremos com o tema MWPRESS que em sua versão atual não possui a opção de menu-sticky nativamente.

1) O primeiro passo é instalar o plugin “myStickymenu” baixando ou pesquisando no repositório de plugins.

2) Com o plugin instalado e ativado você irá clicar em Configurações -> myStickyMenu conforme imagem abaixo.

3) O terceiro passo é definir qual o id ou classe da div que você deseja fixar quando rolar a página. No caso do tema mwpress nós verificamos qual a div está contida o cabeçalho e é a div -> #HEADER-INT . Então preenchemos o campo “Sticky Class” com esse valor.

Feito isso já estará funcionando o seu menu fixo. Porém você pode realizar um quarto passo que é configurar o estilo desse menu.
Isso irá requere um pouco de conhecimento em CSS, mas se você utiliza o tema MWPRESS nós já deixamos aqui uma configuração que basta você copiar e colar. Nós definimos para sair a logomarca e deixar o texto centralizado, além de diminuir o tamanho da altura.

Esse exemplo funcionando pode ser visto aqui -> http://institucional.sitepassoapasso.com.br/

4) Então para você alterar o estilo, basta abrir a aba “Style” e você pode 1) Alterar a cor de fundo do menu fixo e 2) Alterar o código CSS

Aqui segue o código CSS que utilizamos, basta apagar o que tem lá e copiar e colar todo esse conteúdo. Se você utilizar outro tema tem que personalizar esse CSS de acordo com as suas classes e IDS

#mysticky-nav .myfixed { margin:0 auto; float:none; border:0px; background:none; max-width:100%; } #mysticky-nav {top:0 !important} #mysticky-nav.wrapfixed > #HEADER-INT > #logo > a > img {min-height:50px !important; display:none} #mysticky-nav.wrapfixed #HEADER-INT { min-height:100px !important; text-align:center !important;} #mysticky-nav.wrapfixed > #HEADER-INT > #logo {width: 0px !important; display:none !important;}

Receba com prioridade Conteúdos sobre Como Criar Sites Profissionais

Fechar Menu