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.

by Adam Preiser   |   Last Updated: April 3, 2019

Share on facebook
Share on twitter
Share on linkedin
Share on pinterest
Share on email

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{
	0%{top:-6px}
	100%{top:-10px}
}

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.

Video Transcript
Adam @ WPCrafter

Adam @ WPCrafter

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.

17 thoughts on “How To Add Menu Callouts That Demand Attention”

  1. Hi Adam,

    Thank you for the great video.

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

    Question:
    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?

    Thanks

  2. 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!

  3. 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 ?

  4. Tim @ NiceLife.com.au

    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.

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

Leave a Comment

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