How to Add a Label to Menu Item in WordPress

Updated: October 27, 2022

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.

This page may contain affiliate links, which help support WP Pagebuilders. Learn more

Leave a Comment

Pin It on Pinterest

Thanks for commenting

Help us grow by sharing this post with your friends!

Join 1,000+ WordPress users receiving tips and insights on creating with WordPress in the no-code era.

Creating with WordPress?​

Subscribe and join 1,000+ WordPress users receiving tips and insights on creating with WordPress in the no-code era. At WP Pagebuilders, we write about the following topics a lot.