Transparent Sticky Header Elementor

Escrito por

https://youtu.be/B7gSNs4d2hs

Neste tutorial eu ensino a criar um Cabeçalho Transparente no Elementor Pro

Este é o CSS que você vai precisar

header.sticky-header {
    --header-height: 90px; /* altura final quando encolhe - deve ser o mesmo valor que colocou no min-height da seção */
    --opacity: 0.90; /* opacidade final quando encolhe. se quiser que fique mais transparente, coloque numeros menores como por ex 0.3 */
    --shrink-me: 0.80; /* porcentagem de quanto o header vai encolher, assim como a logotipo. se quiser que encolha mais, coloque valores menores commo por ex 0.5 (equivalente a 50%) */
    --sticky-background-color: #FFF;/* cor do fundo do header depois que encolher. não precisa ser a mesma cor original */
    --transition: .3s ease-in-out;/* tempo que leva pra encolher, aqui está demorando 0.3 segundos. quanto maior o valor, mais tempo demora o efeito de transição */

    transition: background-color var(--transition),/**/
                background-image 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;
}
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));
}
/* se gostou deste tutorial, visite meu site rodrigomilano.com.br e inscreva-se no canal */

Compartilhe este artigo

Compartilhar no facebook
Compartilhar no linkedin
Compartilhar no twitter
Compartilhar no email
Compartilhar no pinterest
Compartilhar no whatsapp
Compartilhar no telegram
Compartilhar no email

Curso Elementor Grátis

Aprenda o construtor de sites mais usado atuamente

Explore mais artigos

Repeater Field Jet Engine Elementor WordPress

Assista o tutorial sobre Repeater Field com Elementor + Jet Engine. Aprenda a criar um Repeater Field em um Custom Post Type do Jet Engine Crocoblock. Neste tutorial eu te mostro o passo a passo de como criar o Repeater Field, depois criar um Listing que puxa dos dados do Repeater. Então, você vai inserir

Wordpress

Momentaneamente indisponível para manutenção programada. Confira novamente em um minuto.

Você atualizou algum plugin e recebeu a mensagem “Momentaneamente indisponível para manutenção programada. Confira novamente em um minuto”? A forma mais rápida de resolver isso é procurar um arquivo “.maintenance” na sua hospedagem. Entre no painel da Hospedagem, vá até o Gerenciador de Arquivos. Dentro da pasta “public_html” (na maioria dos casos) tem o arquivo

Quer dar um gás no seu site?

Vamos bater um papo que eu te ajudo