How to Add a Featured Item to the WordPress Menu

In this tutorial we are going to see how we can add a featured menu item.

We can use it to indicate that an item is new or anything else you can think of.

We are also going to do it without any plugin, we are going to do it with a bit of css code that you will find in this same tutorial.

The result you will get is the following:

If you are not subscribed to the Premium Zone you can give sign up for €10/month here

Here is the video tutorial:

The first thing we are going to do is add the CSS code in customize -> Additional CSS and add the following code:

.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}
}

Now that we have the code added, we go to Appearance –> Menus and display the item that we want to highlight and add in the field navigation label the following code:

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

How you can see the result is very cool and to achieve it we have not used a plugin, we have done it manually.

Remember, the best plugin is the one that is not installed 😉

I hope you liked it, see you in the next tutorial.