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

Categorias: BlogCSSElementorElementorWordpress

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:

Captura de Tela 2025 04 11 às 10.35.37
Print do resultado do código CSS personalziado

Publicações recomendadas:

Inscreva-se em Nossa News:

Seja notificando sempre que tiver conteúdo novo disponível no meu canal do Youtube ou artigo no meu Blog.

Bruno Devs News

Link Curto para Compartilhamento

Compartilhe esse conteudo nas redes sociais ou por mensagem usando o link curto abaixo. Basta clicar em cima do link para copiar.

bruno.art.br/pb/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.

Clique aqui e entre em contato