Add A Text Callout In Any WordPress Menu

20180214122145_IMG_9804_01
I recently added a text callout to my Divi menu, so I created this tutorial to show you how to make 3 different styles.

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.

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.

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.

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.

Please share this post!

Nelson Lee Miller

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

You Earned A Reward

For a limited time, we are offering our best blog readers a random CRAZY big 20% off coupon to use on any of our child themes! Just subscribe and we'll send you the code!

Blog Reader Coupon Code

Nice, we're sending you the code now!

0

Your Cart