You may have noticed the “NEW” callout at the top of our site next to the “Courses” menu item. We decided to make a text callout in our Divi menu to indicate that these are…wait for it…new! So I started playing around with CSS to achieve this. My first attempts failed miserably on mobile, so after trying everything I could think of, I got the idea to see what happens when I add a span tag in a menu item. It works great! I used a span tag with a class inside it and the desired text.
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.
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.
I hope you have enjoyed learning How To Add A Highlighted Callout In Any WordPress Menu. Please share your thoughts in the comments below. If you find value in this type of post, please subscribe because we have tons of tutorials in progress to be posted!
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 :)
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.
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! 😀 😀
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 🙂
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….?
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;}
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.
Tony Abbott
on February 10, 2020 at 6:42 am
Thanks man, I used this snippet on my site. The best effects come in small packages. Grateful to you.
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.
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?
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.
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.)
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
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.
In this tutorial I will show you how to move the Divi Gallery module title and caption text over the image and add a nice hover effect.
Pin It on Pinterest
{"id":null,"mode":"button","open_style":"in_modal","currency_code":"USD","currency_symbol":"$","currency_type":"decimal","blank_flag_url":"https:\/\/wordpress-292293-1617718.cloudwaysapps.com\/wp-content\/plugins\/tip-jar-wp\/\/assets\/images\/flags\/blank.gif","flag_sprite_url":"https:\/\/wordpress-292293-1617718.cloudwaysapps.com\/wp-content\/plugins\/tip-jar-wp\/\/assets\/images\/flags\/flags.png","default_amount":500,"top_media_type":"none","featured_image_url":false,"featured_embed":"","header_media":null,"file_download_attachment_data":null,"recurring_options_enabled":true,"recurring_options":{"never":{"selected":true,"after_output":"One time only"},"weekly":{"selected":false,"after_output":"Every week"},"monthly":{"selected":false,"after_output":"Every month"},"yearly":{"selected":false,"after_output":"Every year"}},"strings":{"current_user_email":"","current_user_name":"","link_text":"Leave a tip","complete_payment_button_error_text":"Check info and try again","payment_verb":"Pay","payment_request_label":"Pee-Aye Creative","form_has_an_error":"Please check and fix the errors above","general_server_error":"Something isn't working right at the moment. Please try again.","form_title":"Pee-Aye Creative","form_subtitle":null,"currency_search_text":"Country or Currency here","other_payment_option":"Other payment option","manage_payments_button_text":"Manage your payments","thank_you_message":"Thank you for being a supporter! It is people like you who keep us going week after week!","payment_confirmation_title":"Pee-Aye Creative","receipt_title":"Your Receipt","print_receipt":"Print Receipt","email_receipt":"Email Receipt","email_receipt_sending":"Sending receipt...","email_receipt_success":"Email receipt successfully sent","email_receipt_failed":"Email receipt failed to send. Please try again.","receipt_payee":"Paid to","receipt_statement_descriptor":"This will show up on your statement as","receipt_date":"Date","receipt_transaction_id":"Transaction ID","receipt_transaction_amount":"Amount","refund_payer":"Refund from","login":"Log in to manage your payments","manage_payments":"Manage Payments","transactions_title":"Your Transactions","transaction_title":"Transaction Receipt","transaction_period":"Plan Period","arrangements_title":"Your Plans","arrangement_title":"Manage Plan","arrangement_details":"Plan Details","arrangement_id_title":"Plan ID","arrangement_payment_method_title":"Payment Method","arrangement_amount_title":"Plan Amount","arrangement_renewal_title":"Next renewal date","arrangement_action_cancel":"Cancel Plan","arrangement_action_cant_cancel":"Cancelling is currently not available.","arrangement_action_cancel_double":"Are you sure you'd like to cancel?","arrangement_cancelling":"Cancelling Plan...","arrangement_cancelled":"Plan Cancelled","arrangement_failed_to_cancel":"Failed to cancel plan","back_to_plans":"\u2190 Back to Plans","update_payment_method_verb":"Update","sca_auth_description":"Your have a pending renewal payment which requires authorization.","sca_auth_verb":"Authorize renewal payment","sca_authing_verb":"Authorizing payment","sca_authed_verb":"Payment successfully authorized!","sca_auth_failed":"Unable to authorize! Please try again.","login_button_text":"Log in","login_form_has_an_error":"Please check and fix the errors above","uppercase_search":"Search","lowercase_search":"search","uppercase_page":"Page","lowercase_page":"page","uppercase_items":"Items","lowercase_items":"items","uppercase_per":"Per","lowercase_per":"per","uppercase_of":"Of","lowercase_of":"of","back":"Back to plans","zip_code_placeholder":"Zip\/Postal Code","download_file_button_text":"Download File","input_field_instructions":{"tip_amount":{"placeholder_text":"How much would you like to tip?","initial":{"instruction_type":"normal","instruction_message":"How much would you like to tip? Choose any currency."},"empty":{"instruction_type":"error","instruction_message":"How much would you like to tip? Choose any currency."},"invalid_curency":{"instruction_type":"error","instruction_message":"Please choose a valid currency."}},"recurring":{"placeholder_text":"Recurring","initial":{"instruction_type":"normal","instruction_message":"How often would you like to give this?"},"success":{"instruction_type":"success","instruction_message":"How often would you like to give this?"},"empty":{"instruction_type":"error","instruction_message":"How often would you like to give this?"}},"name":{"placeholder_text":"Name on Credit Card","initial":{"instruction_type":"normal","instruction_message":"Enter the name on your card."},"success":{"instruction_type":"success","instruction_message":"Enter the name on your card."},"empty":{"instruction_type":"error","instruction_message":"Please enter the name on your card."}},"privacy_policy":{"terms_title":"Terms and conditions","terms_body":null,"terms_show_text":"View Terms","terms_hide_text":"Hide Terms","initial":{"instruction_type":"normal","instruction_message":"I agree to the terms."},"unchecked":{"instruction_type":"error","instruction_message":"Please agree to the terms."},"checked":{"instruction_type":"success","instruction_message":"I agree to the terms."}},"email":{"placeholder_text":"Your email address","initial":{"instruction_type":"normal","instruction_message":"Enter your email address"},"success":{"instruction_type":"success","instruction_message":"Enter your email address"},"blank":{"instruction_type":"error","instruction_message":"Enter your email address"},"not_an_email_address":{"instruction_type":"error","instruction_message":"Make sure you have entered a valid email address"}},"note_with_tip":{"placeholder_text":"Your note here...","initial":{"instruction_type":"normal","instruction_message":"Attach a note to your tip (optional)"},"empty":{"instruction_type":"normal","instruction_message":"Attach a note to your tip (optional)"},"not_empty_initial":{"instruction_type":"normal","instruction_message":"Attach a note to your tip (optional)"},"saving":{"instruction_type":"normal","instruction_message":"Saving note..."},"success":{"instruction_type":"success","instruction_message":"Note successfully saved!"},"error":{"instruction_type":"error","instruction_message":"Unable to save note note at this time. Please try again."}},"email_for_login_code":{"placeholder_text":"Your email address","initial":{"instruction_type":"normal","instruction_message":"Enter your email to log in."},"success":{"instruction_type":"success","instruction_message":"Enter your email to log in."},"blank":{"instruction_type":"error","instruction_message":"Enter your email to log in."},"empty":{"instruction_type":"error","instruction_message":"Enter your email to log in."}},"login_code":{"initial":{"instruction_type":"normal","instruction_message":"Check your email and enter the login code."},"success":{"instruction_type":"success","instruction_message":"Check your email and enter the login code."},"blank":{"instruction_type":"error","instruction_message":"Check your email and enter the login code."},"empty":{"instruction_type":"error","instruction_message":"Check your email and enter the login code."}},"stripe_all_in_one":{"initial":{"instruction_type":"normal","instruction_message":"Enter your credit card details here."},"empty":{"instruction_type":"error","instruction_message":"Enter your credit card details here."},"success":{"instruction_type":"normal","instruction_message":"Enter your credit card details here."},"invalid_number":{"instruction_type":"error","instruction_message":"The card number is not a valid credit card number."},"invalid_expiry_month":{"instruction_type":"error","instruction_message":"The card's expiration month is invalid."},"invalid_expiry_year":{"instruction_type":"error","instruction_message":"The card's expiration year is invalid."},"invalid_cvc":{"instruction_type":"error","instruction_message":"The card's security code is invalid."},"incorrect_number":{"instruction_type":"error","instruction_message":"The card number is incorrect."},"incomplete_number":{"instruction_type":"error","instruction_message":"The card number is incomplete."},"incomplete_cvc":{"instruction_type":"error","instruction_message":"The card's security code is incomplete."},"incomplete_expiry":{"instruction_type":"error","instruction_message":"The card's expiration date is incomplete."},"incomplete_zip":{"instruction_type":"error","instruction_message":"The card's zip code is incomplete."},"expired_card":{"instruction_type":"error","instruction_message":"The card has expired."},"incorrect_cvc":{"instruction_type":"error","instruction_message":"The card's security code is incorrect."},"incorrect_zip":{"instruction_type":"error","instruction_message":"The card's zip code failed validation."},"invalid_expiry_year_past":{"instruction_type":"error","instruction_message":"The card's expiration year is in the past"},"card_declined":{"instruction_type":"error","instruction_message":"The card was declined."},"missing":{"instruction_type":"error","instruction_message":"There is no card on a customer that is being charged."},"processing_error":{"instruction_type":"error","instruction_message":"An error occurred while processing the card."},"invalid_request_error":{"instruction_type":"error","instruction_message":"Unable to process this payment, please try again or use alternative method."},"invalid_sofort_country":{"instruction_type":"error","instruction_message":"The billing country is not accepted by SOFORT. Please try another country."}}}},"fetched_oembed_html":false}
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!
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 🙂
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 🙂
Hi Lee,
I’m glad this worked out for you! Not sure why the quote symbols are not working for some. Hope you enjoy!
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!
Hi Dean, you’re welcome! Yes, I will have to share the bounce method. I added that after posting this.
Awesome
Nice tutorial. Please add some code to add bouncing effect for this text call out like your website.
Hi
Thank you so much for this great tip!
Can you also share the css for your link (hover) effects?
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?”
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!
Hi, how can I make the callout bounce?
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;
}
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….?
Hey Shadab, no this will only affect the areas I mentioned in the tutorial.
Is there a way to have this on mobile as well?
Hi David,
Yes, this does work on mobile!
Hey Nelson, thanks for this and other great tutorials and resources. I really DO appreciate them … and by the way: HAPPY BIRTHDAY
Thank you Rob! 🙂 You are welcome, I am so glad they are helpful to you!
Hi Nelson:)
I want to put small text under the menu items. Could You help me please with code?
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;}
Sorry Nelson:( I don’t understand well this code. Where I have to put this code: span { display: block;}?
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.
Thanks man, I used this snippet on my site. The best effects come in small packages. Grateful to you.
Thanks Tony,
That’s great that you could put it to use! I have about 200 draft ideas at this point, so keep an eye out for much more!
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.
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.
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?
Hi Delia,
It looks like your items are set to position absolute, so that’s why on mobile they are positioned up against the top of the mobile menu instead of in the menu item. If you need to keep them absolute on desktop, then I suggest adding a media query and making them position relative on mobile. You can learn more about media queries here: https://wordpress-292293-1617718.cloudwaysapps.com/how-to-add-custom-css-media-queries-to-divi-for-making-your-site-responsive/
Thank you so much for your fast help, it works now!
Hi Nelson.
Is it possible to make a “callout” raised up like a superscript at the perfect center horizontal alignment? not left or right.
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.
Totally worked! I used it to bounce a little “sale” callout next to the shop menu item on my blog
Nice one Nina! 🙂
Awesome article. I needed to use this same highlight for a new course on my college website. Thanks for making it so easy!
Hi Shreya,
I’m glad you like this and could put it to good use on your site! Exciting!
I tried this code to my menu bar, its awesome, thankyou so much. keep posting like this.
Thanks Ashok, I will keep doing this 🙂
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.)
Hi Timur,
It works fine for me, so I’d have to see your site to see what is overriding it. You can always try !important.
Best Creator 😍
Thank you! 🙂
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😣
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.
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
Hi Alex,
Everything us aligned perfectly in the link, so I’m not sure what to say since it appears to be working just great.
Neat. Just added to my site.
Nice! 🙂
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.
Glad to hear you could use this and customize it! Sounds good
what would the CSS snippet be to add the callout with the bounce to a drop down menu?
The bounce is a separate snippet, so simply don’t add that.
Hi Nelson, this is awesome thanks! It seems to be working fine in Chrome, but not in firefox or safari? Any ideas?
thanks
Which one are you using?
In mobile version of my website the call out is just a plain text 🙁 how to fix that
Hey Clarky,
Could you please share the URL of the website for me to investigate the issue?