Cómo añadir un elemento destacado en el menú de WordPress

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:

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.