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;
padding-left:5px;
}
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.
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.
Thanks Judy!
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!