Eu já te ensinei a como alterar uma Logo (imagem) ao rolar uma página lá no meu canal no YouTube. E aqui neste artigo rápido vou te ensinar como alterar a Logo (no formato de texto) ao rolar página.
Preparando o cenário para o exemplo
Vou começar criando um contêiner para o menu (header). E uma vez adicionado o contêiner, vou até a guia avançado e vou dar um nome para o ID CSS de header.
Ativando o efeito Sticky no Elementor
Ainda na edição do contêiner, vamos agora fixar nosso contêiner no topo da página. Para isso, navegue até o menu Efeitos de Movimento e na opção Fixo selecione Superior. No campo Fixo em você pode (caso queira) selecionar apenas algumas telas para que o efeito seja aplicado. No meu caso irei deixar o padrão que já foi carregado.
Adicionando o texto que iremos usar como Logo.
Agora, vamos adicionar um Widget de Título ao nosso contêiner.
O próximo passo é editarmos o nosso título para darmos o nome da nossa marca e aplicarmos o estilo. E por se tratar de um logo, eu também vou marcar a opção Tag HTML como SPAN pra não interferir no SEO da página.
Ainda na edição do Widget de Título, vá até a guia Avançado, e na opção Classes CSS adicione uma classe com o nome de logo-menu (não utilize ponto antes do nome, pois não é necessário).
Por fim, vamos voltar a edição do contêiner, então, pra isso, clique lá nos 6 pontinhos na parte em rosa do contêiner, e aqui vamos procurar na guia Avançado a opção CSS Personalizado (Talvez você precise do Elementor PRO pra fazer isso), se não estiver com o pro, vá no menu Aparência, Personalizar Tema e lá você vai encontrar ao local pra adicionar o seu CSS Personalizado.
No campo CSS Personalizado, adiciona o seguinte código:
#header.elementor-sticky--effects .logo-menu span {color: #0000ff !important;}Neste meu exemplo, minha LOGO é preta e vou alterar a cor pra azul (código hexadecimal #0000ff) e estou reforçando com o valor !important de que é pra mudar pra essa cor. Selecione a cor hexadecimal da cor que você quer adicionar e substitua apenas este valor neste código. E lembre-se de ter alterado a Tag Html pra SPAN lá na edição do Título, senão, não vai funcionar caso tenha deixado o padrão que é o H2.
Pronto, nosso trabalho está finalizado. Para ver o efeito, caso já tenha conteúdo na sua página abaixo do menu, já pode realizar o teste rolando a página. Caso o menu seja o primeiro contêiner da sua página, adicione o restante do conteúdo da página e depois faça o teste.
Espero que este conteúdo tenha lhe ajudado. Deixe um comentário pra eu saber se deu certo pra você. Aproveita e se inscreva também no meu canal TriboWP para ver mais conteúdos relacionado ao uso do WordPress e Elementor.
Um forte abraço e fique com Deus!
