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:
- Astra Theme
- GeneratePress Theme
- OceanWP
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.
Really helpful,Thank you so much!
Hi Adam, thanks again for this excellent tutorial. Just FYI: when I started using the menu element provided by UAE (which I like a lot) I ran into problems with the vertical alignment of menu items. (The badges pushed the items downward). In one of your answers to the comments, you suggested to contact the provider with any issue or problem. So I contacted Brainstorm Force and they helped me out with some slight alterations in the CSS. And it worked. This is what they mailed me:
It is due to the margin-bottom property. Try this:
.menu-badge {
font-size: 9px;
margin-left: 4px;
position: relative;
top: -13px;
color: #ffffff;
background-color: #FF0000;
padding: 3px 4px;
border-radius: 3px;
}
And it worked out fine.
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
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!
Chris
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.
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
Are you referring to Elementor Popups? If so, you may have enabled a setting that is causing that.
Great! badge looks super on desktop view.
But doesn’t look good on mobile menu. How to make it not appearing on mobile?
It should appear just fine on mobile. It is for me.
Very bad answer, this no work in movil.
Stop acting so entitled.
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!
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.
Thank you, I loved your guidance, learn a lot from you. Thank you
This is really cool stuff as always, thanks for sharing ??
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 ?
Like what I am doing on this page? I’ll make a tutorial.
Is there a way to make the badge zoom in and out ( Instead of going up and down ) ?
I would try to google some CSS animation effects. There are a ton of options out there really.
Hi, can you please make a video on ” How to Remove dropdown arrow in the navigation menu with sub menu in OCEANWP Theme”???
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.
Thank you, Adam, for this wonderful snippet I’m testing it on my ecommerce website now. 🙂
Thank you, and I hope it turns out great, I am sure it will!
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.
Wow, that’s a fantastic idea! Didn’t even consider having a + there.
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.
I’ll make a tutorial on that this week.
Great content as always, good tutorial Adam.
Thank you. This was a fun one to make and is something I am personally using right now.
hey Adam, please create soccer website.