O cabeçalho fixo, mais conhecido como Sticky Header, é utilizado para que o menu acompanhe o usuário por toda a sua navegação na página, facilitando o acesso às páginas e melhorando a sua experiência dentro do site.

Desse modo, hoje estaremos mostrando como criar um cabeçalho fixo utilizando o Elementor, vamos lá!

Lembrando que isto funciona apenas ao utilizar o cabeçalho personalizado com o Elementor através dos modelos.

Passo 1 – Nomeie as Classes CSS

  1. Vá até Modelos >Cabeçalho>Editar com Elementor
  2. E então clique na seção em que o seu cabeçalho está localizado, faremos algumas configurações prévias para permitir os próximos passos.
  1. Ajuste a altura mínima para 80px e tag HTML para header.
print tela de configuração de seção sticky header elementor
  1. Agora, vá até a aba Avançado e adicione a Classe CSS como sticky-header.
aba avançado, configuração de classe css sticky-header no elementor
  1. Por fim, vá até o seu logo e clique nele e adicione a Classe CSS como logo
tela de edição do widget de imagem para adicionar classe css logo

Passo 2 – Adicione efeitos de movimento e fixe o cabeçalho

Para ter certeza de que o cabeçalho ficará fixo no topo da página, você deve utilizar os Efeitos de movimento na aba Avançado.

  1. Em Efeitos de movimento, configure Sticky como Top e deixe o Sticky On apenas no Desktop.
  2. Por fim coloque Effects Offset em 80.
efeitos de movimento, deixar sticky header fixo no topo

Passo 3 – Adicione o CSS para o Sticky Header

Agora para finalizar, você precisará adicionar um pouco de CSS para que seja possível que o seu cabeçalho mova junto à página.

  1. Para isso, clique no ícone de hambúrguer localizado no canto superior esquerdo para acessar as configurações do Elementor.
ícone de hambúrguer para edição global de elementor
  1. Então vá até Configurações do site > CSS personalizado.
configuração de css personalizado com elementor
  1. Copie o CSS abaixo e cole em Custom CSS que aparecerá.
header.sticky-header {
    --header-height: 80px;
    --opacity: 0.90;
    --shrink-me: 0.80;
    --sticky-background-color: #fff;
    --transition: .3s ease-in-out;

    transition: background-color var(--transition),
                background-image var(--transition),
                backdrop-filter var(--transition),
                opacity var(--transition);
}
header.sticky-header.elementor-sticky--effects {
    background-color: var(--sticky-background-color) !important;
    background-image: none !important;
    opacity: var(--opacity) !important;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}
header.sticky-header > .elementor-container {
    transition: min-height var(--transition);
}
header.sticky-header.elementor-sticky--effects > .elementor-container {
    min-height: calc(var(--header-height) * var(--shrink-me))!important;
    height: calc(var(--header-height) * var(--shrink-me));
}
header.sticky-header .elementor-nav-menu .elementor-item {
    transition: padding var(--transition);
}
header.sticky-header.elementor-sticky--effects .elementor-nav-menu .elementor-item {
    padding-bottom: 10px!important;
    padding-top: 10px!important;
}
header.sticky-header > .elementor-container .logo img {
    transition: max-width var(--transition);
}
header.sticky-header.elementor-sticky--effects .logo img {
    max-width: calc(100% * var(--shrink-me));
}

OBS.: Você também pode ignorar os ícones de aviso que aparecerão, o código irá funcionar normalmente

print de tela mostrando o código css inserido no elementor

Passo 4 – Customize o CSS

Agora que você já tem o seu CSS adicionado, você pode customiza-lo de acordo com a sua demanda, abaixo segue uma lista das mudanças simples que podem ser feitas:

  • –header-height: 80px;
    (altura do cabeçalho, deve ser a mesma definida anteriormente)
  • –opacity: 0.90;
    (opacidade do cabeçalho, se desejar que seja 100% o valor de 0.90 deve ser trocado por 1)
  • –shrink-me: 0.80;
    (o percentual de diminuição ao rolar a página, por padrão está em 80%. Recomendamos deixar padrão)
  • –sticky-background-color: #fff;
    (cor de fundo do cabeçalho, utiliza-se o código hex de cor)
  • –transition: 300ms ease-in-out;
    (tempo de duração que o cabeçalho leva para diminuir. Recomendamos deixar padrão)

E pronto! Agora o seu cabeçalho está fixo na tela e o seu usuário pode navegar tranquilo pelo seu site.


Para saber mais sobre a função de Sticky Header do Elementor, visite este artigo do blog deles.

Também fique por dentro dos nossos tutoriais sobre Edição de Conteúdos e Seções.

Sua pergunta foi respondida?