Code by Day | Explore By Weekend

how to add a text callout to any wordpress divi menu

How To Add A Highlighted Callout In Any WordPress Menu

I recently added a text callout to my Divi menu, so I created this tutorial to show you how to make 3 different styles and a BONUS bounce affect!

Inline Callout

The first text callout you can add to your WordPress menu can be used on the left or right, but in the example image and CSS snippet, it is used on the left. To use it on the right, simply change the span location to the other side of the Navigation Label and change the “margin-right” to “margin-left” in the CSS snippet.

Here’s what to add to the menu Navigation Label:

<span class="pa-callout-inline">NEW</span>MENU ITEM HERE

Copy and paste the CSS snippet into your website. If using Divi, paste it in Dashboard>Divi>Theme Options>Custom CSS.

/*inline menu callout text css snippet*/

.pa-callout-inline {
font-size: 16px;
margin-right: 8px;
margin-top: -3px;
color: #ffffff;
background-color: #e03574;
padding: 3px 4px;
border-radius: 3px;
}

Callout Left

The next two WordPress menu text callouts can be used on the left or the right as well, just the previous one. I can’t decide if I like the left of right better. Let me know in the comments! Also, I decided to change it up a bit compared to the inline version and made it smaller and raised up like a superscript.

Here’s what to add to the menu Navigation Label:

<span class="pa-callout-left">NEW</span>MENU ITEM HERE

Copy and paste the CSS snippet into your website. If using Divi, paste it in Dashboard>Divi>Theme Options>Custom CSS.

/*left side menu callout text css snippet*/

.pa-callout-left {
font-size: 10px;
margin-right: 4px;
position: relative;
top: -10px;
margin-bottom: 13px;
color: #ffffff;
background-color: #e03574;
padding: 3px 4px;
border-radius: 3px;
}

Callout Right

I think I’ve seen these on the right before, and my wife says she likes it best that way. Also, I like how it looks on mobile better than on the left.

Here’s what to add to the menu Navigation Label:

MENU ITEM HERE<span class="pa-callout-right">NEW</span>

Copy and paste the CSS snippet into your website. If using Divi, paste it in Dashboard>Divi>Theme Options>Custom CSS.

/*right side menu callout text css snippet*/

.pa-callout-right {
font-size: 10px;
margin-left: 4px;
position: relative;
top: -10px;
margin-bottom: 13px;
color: #ffffff;
background-color: #e03574;
padding: 3px 4px;
border-radius: 3px;
}

Customize Away!

Obviously, feel free to edit the CSS snippets to your liking, such as changing the word NEW, background color, font size, padding, etc.

Oh, And The Bounce!

Many of you noticed the bounce and wanted to add that effect as well. Here’s the snippet I used to create that effect. You can change it to the other classes as need, but by default this affect the top right version.

/*the bounce effect*/

@keyframes bouncing {
0% {top: -6px;}
100% {top: -10px;}
}

.pa-callout-right { animation: bouncing .8s cubic-bezier(0.1,0.05,0.05,1) 0s infinite alternate both;
}
54
Last updated Jan 3, 2021 @ 1:35 pm

Please share this post!

Nelson Lee Miller (aka The Divi Teacher)

Nelson is the owner of Pee-Aye Creative Co in the beautiful state of Pennsylvania. He loves helping small businesses, exploring, building websites with Divi, and teaching others.
Divi Adventure Club Product And Course Membership by Pee Aye Creative

Become A Member!

Gain access to everything we offer!

Learn More

Recent Posts

Leave A Response!

Subscribe
Notify of
guest
46 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Alexandra
1 year ago

OMG! Thanks so much for this post! I searched the entire internet for hours for something like this, but found nothing! I didn’t know at first that it is called a “callout”, so I didn’t know what to google.

One mention, in case this maybe helps someone else: for me it did not work with NEW, it worked with NEW.

I was so disappointed at first, but then had the idea to replace the ” with ‘ and… MAGIC! 😀 😀

Thanks so much again!

Lee
Lee
Reply to  Alexandra
1 year ago

Excellent job, I have also been looking for something like this.

At first it didn’t work for me also then I read Alexandra’s comment, I then replaced the ” with ‘ and the label displayed!

Thank you so much guys 🙂

Dean
Dean
1 year ago

Looking forward in your next article for the bounce.
I’ll be using your code over this weekend for the NEW callout. Thank you for posting this!

imti
1 year ago

Awesome

Pranav
1 year ago

Nice tutorial. Please add some code to add bouncing effect for this text call out like your website.

ferry
ferry
1 year ago

Hi

Thank you so much for this great tip!

Can you also share the css for your link (hover) effects?

ferry
ferry
1 year ago

Hi Nelson

No, I actually meant the link and link hover effect at the bottom of this page where it says SEND US A MESSAGE.

There is a green underline and when you hover over it its full green like a marker.

It’s super cool!

David Reid
David Reid
1 year ago

Hi, how can I make the callout bounce?

Shadab
Shadab
1 year ago

Thanks a lot… excellent work and much more than that it you’re accessible to world without any limitations….but will it effect any other previous area/part/styles of website….?

David
David
1 year ago

Is there a way to have this on mobile as well?

Rob
Rob
1 year ago

Hey Nelson, thanks for this and other great tutorials and resources. I really DO appreciate them … and by the way: HAPPY BIRTHDAY

ewa
ewa
1 year ago

Hi Nelson:)
I want to put small text under the menu items. Could You help me please with code?

ewa
ewa

Sorry Nelson:( I don’t understand well this code. Where I have to put this code: span { display: block;}?

Tony Abbott
Tony Abbott
11 months ago

Thanks man, I used this snippet on my site. The best effects come in small packages. Grateful to you.

Madhav Sharma
10 months ago

Hi Nelson,

Where should I paste CSS snippets if I’m not using Divi. Please help. I’m not a tech guy.

Thanks in advance.

Delia Folghera
8 months ago

Hi,
This really helped me, thanks!
I made a callout below two buttons (Buchen/Book) and on desktop it works perfect. But on mobile it looks bad. How can I edit only the mobile and why is it not showing where it is in the desktop version?

Delia Folghera

Thank you so much for your fast help, it works now!

Vowit Kach
Vowit Kach
6 months ago

Hi Nelson.
Is it possible to make a “callout” raised up like a superscript at the perfect center horizontal alignment? not left or right.

Nina
Nina
6 months ago

Totally worked! I used it to bounce a little “sale” callout next to the shop menu item on my blog

Shreya Goregaonkar
5 months ago

Awesome article. I needed to use this same highlight for a new course on my college website. Thanks for making it so easy!

Ashok
Ashok
4 months ago

I tried this code to my menu bar, its awesome, thankyou so much. keep posting like this.

Timur
Timur
4 months ago

Hello Nelson,

thanks for it. But unfortunatly i got an issue with the padding. I dont know why but the padding dont work. I copyed exact code and also tried different options. Do you have any idea what could be wrong? (on the main page i worked with yellowpencil and edited the code – thats working. But all other undersites dont.)

Muthyam Bumesh
Muthyam Bumesh
1 month ago

Best Creator 😍

Bumesh

Welcome😍 i have one problem your provided drop down mobile menu snippet not working perfectly in my website what can I do please help me😣

Alex
1 month ago

Hi there, thanks for the code, was very useful, especially for a newbie like me, I am having one small issue however that maybe you can help me with? I can insert the code, the last one, so that NEW appears top right of the menu item, and can get it bouncing, but when I do it, so thats great. But the formatting of my menu items changes, so that the menu item with the “new” after it, is now out of line with the other menu items? it moves it lower by about 3mm. And I am not too… Read more »

Shop Our Divi Products

Plugins • Courses • Templates

Visit The Shop

Divi Adventure Club Product And Course Membership by Pee Aye Creative

Become A Member!

Gain access to everything we offer!

Learn More

Divi Tutorials On YouTube

Join over 4,800 others and subscribe to our helpful Divi videos!

Visit Our Channel

Pin It on Pinterest

0

Your Cart