Ir para o conteúdo 
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.
Deu certo aqui e deve dar certo aí. Qualquer dúvida me mande um e-mail e tento te ajudar: paolo@izy.digital
