post #6152
Código CSS Personalizado para Adicionar Seta SVG ao Passar o Mouse no Menu WordPress com Elementor
Publicado em: 11/04/2025 / Atualizado em: 11/04/2025
Nesse post eu vou compartilhar um código CSS personalizado para você adicionar no seu menu WordPress com Elementor para adicionar uma seta em SVG quando passar o mouse em algum item do menu.
.menu-seta .elementor-nav-menu--layout-vertical .elementor-item {
position: relative;
padding-right: 20px;
}
.menu-seta .elementor-nav-menu--layout-vertical .elementor-item {
width: fit-content;
}
.menu-seta .elementor-nav-menu--layout-vertical .elementor-item::after {
content: "";
position: absolute;
top: 50%;
right: -22px;
width: 12px;
height: 11px;
transform: translateY(-50%);
background: no-repeat center/contain;
opacity: 0;
transition: opacity 0.2s ease-in-out;
background-image: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2212%22%20height%3D%2211%22%20fill%3D%22none%22%20viewBox%3D%220%200%2012%2011%22%3E%3Cpath%20fill%3D%22%23371CFF%22%20fill-rule%3D%22evenodd%22%20d%3D%22M12%205.5a1%201%200%200%201-1%201H1a1%201%200%200%201%200-2h10a1%201%200%200%201%201%201Z%22%20clip-rule%3D%22evenodd%22/%3E%3Cpath%20fill%3D%22%23371CFF%22%20fill-rule%3D%22evenodd%22%20d%3D%22M11.707%204.793a1%201%200%200%201%200%201.414l-4.286%204.286a1%201%200%200%201-1.414-1.414l4.286-4.286a1%201%200%200%201%201.414%200Z%22%20clip-rule%3D%22evenodd%22/%3E%3Cpath%20fill%3D%22%23371CFF%22%20fill-rule%3D%22evenodd%22%20d%3D%22M11.707%206.207a1%201%200%200%201-1.414%200L6.007%201.921A1%201%200%201%201%207.421.507l4.286%204.286a1%201%200%200%201%200%201.414Z%22%20clip-rule%3D%22evenodd%22/%3E%3C/svg%3E");
}
.menu-seta .elementor-nav-menu--layout-vertical .elementor-item:hover::after {
opacity: 1;
}Apenas adicione o código CSS em sua página, e aplique a CLASS menu-seta no menu que seja aplicar o efeito da seta SVG.
Resultado:
Publicações recomendadas:
Link Direto
Compartilhe esse conteudo nas redes sociais ou por mensagem usando o link direto abaixo. Basta copiar.
bruno.art.br/?p=6152
ID de Referência: 6152
Sugira uma publicação
Envie uma mensagem e sugira um publicação sobre um assunto que tenha dificuldades de resolver.