How To Add A Text Callout To Any Divi or WordPress Menu Tutorial by Pee Aye Creative

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!

Join subscribers on our YouTube channel and enjoy other Divi video tutorials!

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

Last updated Apr 27, 2022 @ 8:35 pm

Subscribe

Each month we send out a roundup email newsletter with the latest tutorials, product updates, helpful resources, and any other industry or personal news. Occasionally we send an extra separate email here and there if we just can’t wait! So that’s what you will get if you subscribe, and you can always unsubscribe at any time if you just can’t take it anymore :)

Please share this post!

Nelson Lee Miller (aka The Divi Teacher)

Nelson is the owner of Pee-Aye Creative in the beautiful state of Pennsylvania. He loves helping small businesses, exploring outdoors, building websites with Divi, and teaching others.

Leave A Response!

By commenting you agree to our Blog & YouTube Comments Policy

60 Comments

  1. Alexandra

    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!

    Reply
    • Nelson Lee Miller (aka The Divi Teacher)

      Hi Alexandra, I’m thrilled that you found this! I honestly wasn’t sure what to call it either, but “callout” seemed good enough. The ‘ vs ” shouldn’t make any difference though, but glad it worked! Next I’m going to make the callout bounce, I’ll update the article if I do πŸ™‚

      Reply
    • Lee

      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 πŸ™‚

      Reply
  2. Dean

    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!

    Reply
  3. imti

    Awesome

    Reply
  4. Pranav

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

    Reply
  5. ferry

    Hi

    Thank you so much for this great tip!

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

    Reply
    • Nelson Lee Miller (aka The Divi Teacher)

      Hi there,
      Glad you like the tip! I’m not sure which hover effect you are referring to, could you explain more? Do you mean the bouncing “New?”

      Reply
  6. ferry

    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!

    Reply
  7. David Reid

    Hi, how can I make the callout bounce?

    Reply
    • Nelson Lee Miller (aka The Divi Teacher)

      Hi David,
      To achieve the same effect as on our site use this CSS:

      @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;
      }

      Reply
  8. Shadab

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

    Reply
  9. David

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

    Reply
  10. Rob

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

    Reply
  11. ewa

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

    Reply
    • Nelson Lee Miller (aka The Divi Teacher)

      Sure, you could do this in a very similar manner with the span tag. Just put the text in a span tag, and target it with CSS like span { display: block;}

      Reply
      • ewa

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

      • Nelson Lee Miller (aka The Divi Teacher)

        Can you send me a link to your site with the span in the menu? Then I could give you the exact snippet. Oh, and any CSS should always go in Divi>Theme Options>Custom CSS.

  12. Tony Abbott

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

    Reply
  13. Madhav Sharma

    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.

    Reply
    • Nelson Lee Miller (aka The Divi Teacher)

      Hi Madhav,
      Great question, the easiest place is in the Customizer CSS. So from your dashboard for to Appearance>Customizer and at the bottom you will find the custom css area.

      Reply
  14. Delia Folghera

    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?

    Reply
  15. Vowit Kach

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

    Reply
    • Nelson Lee Miller (aka The Divi Teacher)

      Hi Vowit,
      You should be able to with a similar method, yes. Just make the span display: block; and it will stack above the menu item. Might make everything a little crazy, but it should work.

      Reply
  16. Nina

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

    Reply
  17. Shreya Goregaonkar

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

    Reply
  18. Ashok

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

    Reply
  19. Timur

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

    Reply
  20. Muthyam Bumesh

    Best Creator 😍

    Reply
      • 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😣

      • Nelson Lee Miller (aka The Divi Teacher)

        Hi Mumesh,
        You can ask your question on the other tutorial and I will see it. Please be sure to provide the issue and link to the site.

  21. Alex

    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 sure to stop that happening. I use Elementor, so not sure if that is the issue, and I posted the CSS into the appearance/customise/additional css not sure what to do now, any feedback would be much appreciated

    Reply
  22. Patrick BARDET

    Hi,
    Very good tuto Nelson ! Thank you. The idea is very good. It’s a great appealing effect. I’ve added it to my site on a second level dropdown menu. In my case, the bouncing effect is not 100% accurate because the whole element, with the text on the left, is bouncing.
    Not a big deal indeed.

    Reply
  23. Jonathan Morse

    what would the CSS snippet be to add the callout with the bounce to a drop down menu?

    Reply
  24. sam

    Hi Nelson, this is awesome thanks! It seems to be working fine in Chrome, but not in firefox or safari? Any ideas?
    thanks

    Reply
  25. clarky

    In mobile version of my website the call out is just a plain text πŸ™ how to fix that

    Reply
    • Hemant Gaba

      Hey Clarky,

      Could you please share the URL of the website for me to investigate the issue?

      Reply
  26. theCreativeMind

    Hi Nelson,

    is there a neat way to have an icon / svg icon instead of a text?

    great posts!!!

    Reply
    • Hemant Gaba

      Hey there,

      Please use this in the Menu area:
      MENU ITEM HERE

      Reply
  27. Gani

    How to setup in mobile ? I used salespro theme. When i saw in desktop, callout works. But in mobile, it didnt works

    Reply

Submit a Comment

Your email address will not be published.

Recent Posts

0

Your Cart