Como colocar ícone de notificação no menu do WordPress

Colocar ícone de notificação no menu do seu site pode ser uma ótima estratégia para chamar a atenção do seu usuário. E se você ainda não sabe do que estamos falando, basta lembrar da página do facebook e de como é difícil resistir a tentação de não clicar na notificação que aparece naquela bolinha vermelha, sinalizando que tem alguma novidade na área.

Saiba que com poucos passo você também pode utilizar esse recurso de notificação no seu site WordPress. Confira nosso passo a passo e aplique essa técnica hoje mesmo.

 

Código CSS (atualizado após a aula)

.menu-badge {
font-size: 13px;
margin-left: 4px;
position: relative;
top: -10px;
margin-bottom: 13px;
color: #ffffff;
background-color: #ff0000;
padding: 3px 4px;
border-radius: 100px;
line-height: 20px;
}

.badge-bounce {
animation: bouncing .8s cubic-bezier(0.1,0.05,0.05,1) 0s infinite alternate both;
}

@keyframes bouncing{
0%{top:-6px}
100%{top:-10px}
}

Código para inserir no menu


<span class="menu-badge badge-bounce">3</span>