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:

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:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | .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 . 8 s cubic-bezier( 0.1 , 0.05 , 0.05 , 1 ) 0 s 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:
1 | <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.