In questo tutorial vedremo come aggiungere una voce di menu in primo piano.
Possiamo usarlo per indicare che un articolo è nuovo o qualsiasi altra cosa ti viene in mente.
Lo faremo anche senza alcun plugin, lo faremo con un po' di codice CSS che troverai in questo stesso tutorial.
Il risultato che otterrai è il seguente:
Ecco il video tutorial:
Iscriviti a un canale mi:
La prima cosa che faremo è aggiungere il codice CSS in personalizza -> CSS aggiuntivo e aggiungere il seguente codice:
.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}
}
Ora che abbiamo aggiunto il codice, andiamo su Aspetto -> Menu e visualizziamo la voce che vogliamo evidenziare e aggiungere nel campo etichetta di navigazione il codice seguente:
<span class="menu-badge badge-bounce">NUEVO</span>
Come puoi vedere il risultato è molto interessante e per ottenerlo non abbiamo utilizzato un plug-in, l'abbiamo fatto manualmente.
Ricorda, il miglior plugin è quello che non è installato 😉
Spero vi sia piaciuto, ci vediamo al prossimo tutorial.