How To Add Menu Notification Badges in WordPress

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 in 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
Source: https://managewp.org/articles/18506/how-to-add-menu-notification-badges-in-wordpress

source https://williechiu40.wordpress.com/2019/04/03/how-to-add-menu-notification-badges-in-wordpress/