While I was browsing the internet I have come across a very interesting video that explains how you can add notification badges to a WordPress Menu. You may want to do that to attract the attention of your visitors to a specific place on the menu. I have added one on my site to the deals items to stand out.

With the code, you can add a bouncing badge with any text you like to what element you need. The tutorial was first presented on wpcrafter where there is also a nice video with all the steps you need to do + an option to add a pop-up menu to the link.

In this article I will present the steps and code you need to do in short and for the complete tutorial, you can follow WPCrafter Video.

Steps to Add Menu Notification Badges in WordPress

1. Add the custom CSS code

Navigate to Appearance –> Customize and then in the Customize area in Additional CSS add the below code like in the picture and hit Publish:

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

2. Add The Badge To the Menu Element

Next, you need to go to the Menu and add the badge to the element you want the badge to appear. Go to Appearance -> Menus and in the
Navigation Label of the menu item just add the below code and hit Save Menu

Code:

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

Video For How To Add Menu Notification Badges in WordPress

In case you want to see a detailed video with all the processes and how you can link your menu item with a Pop up then check the below video as it has everything you need to know:

The process to add the badge is very easy and it is not needing any plugin or advanced knowledge and can bring a lot of attention to the menu item that has the badge.