How To Add Menu Notification Badges in WordPress

In this tutorial I’ll explain how to add notification badges to WordPress menu item.

Notification badges generally refer to the little text that show up near a button or link and are meant to help capture a response from the user.

A notification badge added to menu item will look like this:-

Steps to Add Notification Badge

  1. Start by going to your admin panel – http://your-domain.com/wp-admin/
  2. Start by going to your admin panel – http://your-domain.com/wp-admin/
  3. Now copy the below CSS code and paste it in “Additional CSS” box and hit Publish button
    .notification-style-1 {
        position: relative;
        background: #c32545;
        border-radius: 5px;
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px;
        top: -20px;
        padding: 2px 5px;
        font-size: 10px;
        font-weight: bolder;
        letter-spacing: 2px;
        text-transform: uppercase;
        left: -11px;
    }
      
    .notification-style-1:after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 50%;
        width: 0;
        height: 0;
        border: 10px solid transparent;
        border-top-color: #c32545;
        border-bottom: 0;
        border-left: 0;
        margin-left: -10px;
        margin-bottom: -9px;
    }
      
    .notification-style-2 {
        position: relative;
        background: #c32545;
        border-radius: 5px;
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px;
        top: -12px;
        padding: 2px 5px;
        font-size: 10px;
        font-weight: bolder;
        letter-spacing: 2px;
        text-transform: uppercase;
        left: 0px;
    }
  4. Navigate to Appearance → Menus and choose your menu
  5. Select the menu item and enter following code snippet as shown below
    Menu Notification Reference
    <span class="notification-style-1">NEW</span>
  6. or you can add another notification style
    <span class="notification-style-2">NEW</span>
  7. Now Click “Save Menu”
  8. Now you should see a notification badge appearing next to the menu item as shown below
    Notification Menu Design

If you have any queries, leave a comment below.

Credits

4 thoughts on “How To Add Menu Notification Badges in WordPress”

    • Using above code, you can only show notification on a menu item. If possible I’ll write a separate tutorial explaining how to display custom messages in a badge.

      Reply

Leave a Comment