Shrink é aquele negócio de quando você dá o scroll em sua página, o menu diminui. É bonito e pode até ser uma boa estratégia, para evitar distrações enquanto o leitor acessa seu conteúdo.
O Elementor, apesar de ser maravilhoso, não é muito funcional quanto à isso, e a internet não me apresentou conteúdo tão eficaz para ajudar. Na melhor das hipóteses, só conseguia diminuir o logo (imagem) no header – o que não resolvia em nada meu problema.
Diante disso, quebrei a cabeça e fiquei tentando entender essas classes CSS geradas pelo Elementor e quase sempre similares.
Antes de passar como fazer isso, preciso agradecer ao Ignitweb por me ajudar no pontapé inicial para isso (acho que esse é o único local que achei conteúdo nesse sentido para Elementor. O resto foi estudar pelo dev tools do Chrome.
Enfim, vamos lá. O negócio é basicamente isso:
Você monta o header (logo+menu- básico, sem configurar nada de tamanho) e nomeia uma classe para esses dois elementos (em avançado). No meu caso coloquei, respectivamente “logo” e “menus”.
E cola na seção o seguinte CSS:
/* — LOGO —- // Tamanho do logo antes do scroll */
.logo img {
width: auto;
height: 100px;
transition: all 1.5s ease;
}
/* Tamanho do logo depois do scroll */
.elementor-sticky–effects .logo img {
max-height: 70px;
width: auto;
}
/* Aqui você configura a margem do menu – e consequente, sendo negativa, acaba diminuindo toda a seção */
.elementor-sticky–effects .menus {
margin: -30px;
}
Aí os tamanhos vai de gosto.
Update: para baixar o modelo e importar no Elementor, clique aqui.
Deu certo aqui e deve dar certo aí. Qualquer dúvida me mande um e-mail e tento te ajudar: paolo@izy.digital
