This tutorial provides the steps to add a New
label as part of a menu item text in WordPress.
Step 1
In this example, we shall add the label to the BLOG nav menu item.
Let’s add a blog
class to the Blog nav menu item.
While not compulsory, this step makes it easier to target our desired menu item in CSS.
At Appearance > Menus edit your menu.
Click on Screen Options near the top right and tick CSS Classes.
Now enter a custom text that identifies your menu item. For example, blog
.
Step 2
Add the following sample CSS (If using Oxygen, in a stylesheet at Manage > Stylesheets) and modify to suit:
.blog.menu-item > a::after {
width: auto;
height: auto;
transform: none;
color: rgb(255, 255, 255);
background-color: rgb(66, 220, 10);
padding-right: 12px;
padding-left: 12px;
margin-left: 8px;
border-radius: 5px;
content: "NEW";
border: none;
}
Replace blog
in the above with the CSS class you set for your desired menu item to which you want to add the label.
In
content: "NEW";
change NEW
to your desired label text.