How To Add a Red Notification Dot To A WordPress Menu

Most everyone is used to seeing red notification dots now. And they are drawn to clicking them. So this is a neat trick to add one of those notification dots to your WordPress menu.

Image shown is for the top nav, but it will work on any menu.

It’s very easy to do and only takes 2 simple steps.

1. Add this code to your “additional css box”

.red-dot {
position: absolute;
top: 3px;
right:-10px; /* adjust as needed */
width: 16px;
height: 16px;
background: #ff0000;
border-radius: 18px;
color: #fff;
font-size: 11px;
line-height: 17px;
font-weight: bold;

2. Add this to a menu navigation label

My Offers<span class="red-dot">1</span>

You can see it live on this site in the upper right as well right now.

Previous Post

Social Share Plugin Recommendation

Next Post

How to make font awesome checklists


    • Judy Edwards
    • November 28, 2018

    I love this theme for my websites. It offers so much versatility and is easy to personalize the appearance to suit your own personal taste. There are so many extra tools and widgets you can use, but the best part is the support from the developer. Dan Nickerson always gets back to answer any questions within a day I am still a newbie with building websites so I really appreciate that support.

      • Dan Nickerson
      • November 28, 2018

      Thanks Judy!

    • Sumit Sharma
    • January 29, 2020

    Socrates, does justice to the name! I’ve looked and bought some of the top themes available on the web, but this one hands down is the best out there. Plus the support given by Dan is top class! Thank you!

Leave a Reply

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