En este tutorial vamos a ver como podemos añadir un item del menú destacado.
Lo podemos usar para indicar que un elemento es nuevo o cualquier otra cosa que se te ocurra.
Además lo vamos a hacer sin ningún plugin, lo vamos a hacer con un poco de código css que encontrarás en este mismo tutorial.
El resultado que vas a conseguir es el siguiente:
Si no estás suscrito a la Zona Premium te puedes dar de alta por 10€/mes aquí
Aquí tienes el tutorial en vídeo:
Suscríbete a mi canal:
Lo primero que vamos a hacer es añadir el código CSS en personalizar –> CSS Adicional y añadimos el siguiente 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}
}
Ahora que ya tenemos el código añadido nos vamos a Apariencia –> Menús y desplegamos el item que queremos destacar y añadimos en el campo Etiqueta de navegación el siguiente código:
<span class="menu-badge badge-bounce">NUEVO</span>
Cómo podéis ver el resultado es muy chulo y para conseguirlo no hemos usado un plugin, lo hemos hecho de forma manual.
Recordad, el mejor plugin es el que no se instala 😉
Espero que os haya gustado, nos vemos en el siguiente tutorial.