Have you ever thought of highlighting your menu item/s on your website? If the answer is no, maybe you don’t know how important it is. Let’s say you want to increase sales or introduce new products or services on your site. Highlighting the menu items might be helpful to you.
There are several things that you can do to highlight your menu item/s, as below:
- Adding a different background color
- Adding a different text color
- Adding a label
- Etc.
This article will show you how to highlight menu items, more specifically, add a corner label inside of particular menu items in WordPress without the help of any plugin.
Steps to Add a Label to Menu Item in WordPress
Step 1: Add the CSS Snippet
First, we will add the CSS snippet to the WordPress Customizer CSS editor. On your WordPress dashboard, navigate to Appearance -> Customize.
Once you enter the customization settings, go to the Additional CSS block and click on it. Copy the simple CSS snippet below and paste it into the Additional CSS field.
.subscriber-highlight {
vertical-align:super;
background-color:#EA0808;
border-radius: 4px
color: inherit;
font-size: 7px;
padding: 2px 4px;
text-decoration: none;
white-space: nowrap;
}
Once you’ve added the CSS snippet, apply it by clicking the Publish button.
Step 2: Edit the Navigation Label
Next, we will edit the menu item. On your WordPress dashboard, navigate to Appearance -> Menus.
Once you enter the menus settings screen, select the menu item/s to which you want to add a label, then go to the Navigation Label by clicking the dropdown button.
Alright, we are going to start to edit the navigation label. Please copy the simple code below, paste it into the Navigation Label field and then edit the code based on the name of your menu item and label.
Example:
- Menu Item: Hotel
- Label: SALE
Hotel <span class="subscriber-highlight">SALE</span>
Once you’ve finished editing the navigation label/s, apply it by clicking the Save Menu button.
To see how it works, go to your site by opening a new window.
Note: You can customize the label to your preference. To do that, go back to the Additional CSS and edit the code snippet. You can edit the background and text color of the label, font size, padding, etc.
In this example, we’ve changed the label’s background color to blue by editing the hex color code (see the image).
The Bottom Line
This article shows you how easily add a label to the menu item in WordPress. Adding a label is the best way to highlight your different menu items without complicated navigation inside your menu.
Adding a label to your menu item has many benefits, as we mentioned at the beginning of this article. But, we want to remind you that please use this method (labeling menu items) wisely. Because when you use this method too much, it can be overused and looks annoying.
