MENU

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

Publicado por: Bruno Leandro WP

5 de outubro de 2022

Pressione F11 para uma leitura mais concentrada!

Reproduzir vídeo

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;
}

Gostou? Então bora compartilhar!

WhatsApp
Facebook
Twitter
LinkedIn
Telegram

Deixe um comentário

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *

Você também pode gostar desses:

VAMOS CRIAR UM SITE INCRÍVEL PRA VOCÊ?