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.

/*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.

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

Your Cart