Como adicionar um item em destaque ao menu do WordPress

Neste tutorial, veremos como podemos adicionar um item de menu em destaque.

Podemos usá-lo para indicar que um item é novo ou qualquer outra coisa que você possa imaginar.

Também vamos fazer isso sem nenhum plugin, vamos fazer com um pouco de código css que você encontrará neste mesmo tutorial.

O resultado que você obterá é o seguinte:

Se você não está inscrito na Zona Premium, você pode dar inscreva-se por 10€/mês aqui

Aqui está o tutorial em vídeo:

A primeira coisa que vamos fazer é adicionar o código CSS em customize -> Additional CSS e adicionar o seguinte código:

.menu-badge {
font-size: 9px;
margin-left: 4px;
position: relative;
top: -10px;
margin-bottom: 13px;
color: #ffffff;
background-color: #FF0000;
padding: 3px 4px;
border-radius: 3px;
}
.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}
}

Agora que adicionamos o código, vamos até Appearance –> Menus e exibimos o item que queremos destacar e adicionar no campo rótulo de navegação o seguinte código:

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

Como você pode ver o resultado é muito legal e para alcançá-lo não usamos um plugin, fizemos manualmente.

Lembre-se, o melhor plugin é aquele que não está instalado 😉

Espero que tenham gostado, até o próximo tutorial.