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:

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

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:

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

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:

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

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.

9

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.

Join Our NEW Divi Facebook Group!

The Divi Teacher Logo

Recent Posts

Leave A Response!

Subscribe
Notify of
guest
30 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
11 months ago

Hi, how can I make the callout bounce?

Shadab
Shadab
10 months 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
9 months ago

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

Rob
Rob
8 months 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
5 months 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
3 months ago

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

Madhav Sharma
2 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
13 days 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!

Shop Our Divi Products!

Child Themes • Plugins • Layouts

Visit The Shop

Divi Tutorials On YouTube

Subscribe to our helpful Divi videos!

Visit Our Channel

0
Would love your thoughts, please comment.x
()
x

Pin It on Pinterest

0

Your Cart