Como Criar Cabeçalho com Menu Transparente e Fundo Desfocado no Elementor Pro

Instruções

Para seguir esse tutorial é necessário alguns requisitos:

• Tenha certeza de que você tem o Elementor Pro instalado no seu site;
• Garanta que seu logo não tenha nenhuma largura definida nos estilos;
• Garanta que seu cabeçalho não é maior do que 90px;
• Adicione uma classe css ao seu logo e na seção do cabeçalho.

Após estilizar seu cabeçalho, você deve adicionar uma margem inferior negativa.

Código CSS customizado (Seção)

Cole esse código na guia ‘Avançado’ da sua seção:

selector.elementor-sticky--effects{ 
   background-color: rgba(0,0,0,0.4)!important; 
   backdrop-filter: saturate(180%) blur(20px);
   -webkit-backdrop-filter: saturate(180%) blur(20px);
}
selector{ 
   transition: background-color 1s ease !important;
}
selector.elementor-sticky--effects >.elementor-container{
   min-height: 70px;
}
selector > .elementor-container{
   transition: min-height 1s ease !important;
}