How To Add Menu Notification Badges in WordPress

Spread the love

Last Updated on

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 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 process 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 it is very easy and it is not needing any plugin or advance knowledge and can bring a lot off attention to the menu item that has the badge.

Related

Leave a Comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Signup For Access to WordPress

Free Tips & Resourcs

Signup for our newsletter and get access to daily WordPress tips and tricks to make your site better.

Scroll to Top