by Adam Preiser updated April 3, 2019

How To Add Menu Callouts That Demand Attention

We are trained to click on anything with a notification badge and in this tutorial, I will show you how to use this powerful tactic on your website.


Share on facebook
Share on twitter
Share on linkedin

For the past 10 years we have been trained to take action when we see one of these notification badges. We can't resist clicking on them.

In this tutorial I teach you how to add this strategy to your website.

It's as simple as watching the video and adding the following custom CSS to your website. I prefer to add custom CSS to the customizer, but you can add it wherever you like.

Custom CSS for the badge

.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;

If you are using the free Astra Theme (my favorite theme), you need to add 1 extra line of CSS. The below snippet already has it added.

.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;
	line-height: 1.5em;

Custom CSS for the animation (optional)

.badge-bounce {
	animation: bouncing .8s cubic-bezier(0.1,0.05,0.05,1) 0s infinite alternate both;

@keyframes bouncing{

Code to enter next to the menu item you want the badge to appear on

<span class="menu-badge badge-bounce">NEW</span>

If you happen to run into any issues, feel free to add a comment below.

As I said in the video, I had a slight issue with the free Astra Theme and I am asking them for a solution which I will post here. It worked fine with the Astra Pro addon with the Nav Menu module enabled.

See the CSS for the free Astra Theme above. They sent it to me just after publishing this tutorial.

WordPress Theme Compatibility

While this should work on any website or website builder, I have confirmation of it working great on the following themes:

If you run into any styling issues with your theme, first reach out to the theme developer and any additional lines of CSS, please come back here to post in the comments section.

My passion is making the best quality video tutorial online, for non-techies. When I am not behind the camera, I am usually helping out one of my YouTube subscribers.

Join The Conversation

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

  1. Hi Adam,

    thanks for this great tip. Learned a lot from your articles & tutorials. Keep up the GREAT work!
    I am using the Ocean WP theme. In the off canvas menu on small screens the badge shows up as text only (NEW) next to the menu item. Is there a solution to hide it in the off canvas but show in normal view?

    Greetings from Germany

  2. Hi Adam. Great tutorial.

    I ran into one issue that I wonder if you can help me with?

    When I added the “NEW” badge to announce a new blog post, it bumped the “BLOG” menu item down a few pixels. (I took a screen shot, but cant post a picture here). In other words, somewhere the alignment is getting wonky when I add the notification badge.

    Any thoughts on where to adjust that? I’ll post this in the FB group also.

    Thank you!


    1. Sorry to hear with your WordPress theme, on mobile the badge is off to the right. For me, Astra Theme, it’s looking as expected on mobile. It’s going to be a CSS fix, I would encourage you to reach out to your theme developer, and then come back here to let us know the theme you are using and the line of CSS they give you.

  3. Hi Adam,

    Thank you for the great video.

    I make use of Astra and manage to get everything right so it works nicely.

    How many times can it trigger a popup on the same page – it works when I click on it once and the second time it does not want to trigger the popup again? only when I go to a new page then the popup link is active again.

    Any suggestions?


  4. Great! badge looks super on desktop view.
    But doesn’t look good on mobile menu. How to make it not appearing on mobile?

  5. Boy, I wish I could figure out how to do this with Thrive Architect.
    I sent a Thrive support request for them to make a VDO. I hope you don’t mind I included your YouTube link. David at TA makes great VDOs.

    Thanks again for this Adam. Just so you know, I bought the Astra Pro Agency Lifetime via your link last year. Thank you for the cool bonuses!

    1. It’s more of a theme thing since it’s being added to the menu. I know Thrive is working on their own theme builder, but it’s still very far out.

  6. Thank you, I loved your guidance, learn a lot from you. Thank you

  7. Do you have a tutorial on how you get a video to pop out and to scroll up and down, affixed to the bottom of a web page ?

    How did you accomplish this video scroll affect on your website ?

  8. Is there a way to make the badge zoom in and out ( Instead of going up and down ) ?

    1. I would try to google some CSS animation effects. There are a ton of options out there really.

  9. Hi, can you please make a video on ” How to Remove dropdown arrow in the navigation menu with sub menu in OCEANWP Theme”???

    1. That’s very specific, I try to stick to broader topics. I am sure if you reached out to their support they will help you.

  10. Thank you, Adam, for this wonderful snippet I’m testing it on my ecommerce website now. 🙂

  11. I changed ‘NEW’ to ‘+1’, so that it looks more like 1 new item for viewers to look at.

    I will be very interested to see if sales increase over the next week or two.

  12. Great stuff as always, Thanks. Curious, do you have a tut on how you get your video to pop up small on the bottom of this page? If not, that would be a good video to make. Keep up the great content.

    1. Thank you. This was a fun one to make and is something I am personally using right now.

Stay Up To Date

Enter your name and email for the lates news, updates, and tutorials.