Search

How to Add a Label to a Menu Item in Divi Builder

Navigation menu is a common element found on the header section of a website. It makes it easier for visitors to navigate to the main content offered by a website. In Divi Builder, you can create a custom header and use the Menu module to add menu navigation to your header.

The Menu module of Divi Builder allows you to add the search icon and the shopping cart icon. What about the label? Unfortunately, Divi Builder doesn’t offer it.

To add a label to a menu item, you need to add custom CSS.

Adding a Label to a Menu Item in Divi Builder

Adding a label to a menu item could draw attention to your visitors. You can implement this practice if you have special content to offer (or campaign).

This article will show you how to add a label to a menu item in Divi Builder. Here is an example.

Example of a label on a menu item in WordPress.

First off, you need to add a CSS class to the menu item you want to add the label to. To do so, go to Appearance -> Menu on your WordPress dashboard. Select the menu you use on your header and edit it.

Selecting an existing menu in WordPress with the aim to edit it.

On the Menu structure column, open the menu item you want to add the label to and paste the following code to the Navigation Label field.

Adding a CSS class to a menu item.

The code:

<label class="menu-label featured-label">Featured</label>MENU ITEM 3
  • CSS class: featured-label
  • Label: Featured
  • Menu Item Label: MENU ITEM 3

Once done adding the CSS class to the menu item, go to Divi -> Theme Builder and edit the header that contains the menu where you want to add the label to. You can read our previous article to learn how to create a custom header in Divi Builder.

Editing a global header in Divi Theme Builder.

Once the Divi Builder editor opens, add the Code module and add the following code to the Code field on the Text block under the Content tab. You can add the Code module to the same column as the Menu module on your header section.

The code:

<style>
  
.menu-label {
text-transform: uppercase;
color: #fff;
letter-spacing: 1px;   
border-radius: 5px;    
font-size: 10px;  
padding: 5px 10px;  
}  
   
.featured-label {
background-color: #F9654D;
}
  
.et_pb_menu .et_pb_menu__menu, 
.et_pb_menu .et_pb_menu__menu>nav, 
.et_pb_menu--style-left_aligned.et_pb_text_align_right .et_pb_menu__menu>nav>ul {
width: 100% !important;
}
 
.et_pb_menu .et_pb_menu__menu>nav>ul>li
{
padding-left: 15px !important;
padding-right: 15px !important;
}
 
@media all and (min-width: 980px) {
.menu-label {  
position: absolute;
top: -10px;  
padding: 8px 15px;
}
 
}
@media all and (max-width: 980px) {  
.menu-label {
position: relative;
float: right;
font-size: 12px;  
padding: 5px 20px;   
}
}
   
</style>

If you have CSS knowledge, you can modify the above code to replace the font size, label color, position, and so on.

If you want to add other labels to the other menu items, you can go to the Appearance -> Menu and add a CSS class to the menu items you want to add the label to as we have shown above then add edit the CSS code above. On the code above, the lines to add the label is:

.featured-label {
background-color: #F9654D;
}

So, to add a new label, you can copy and paste the lines above and replace the CSS class as well as the background color. The example below adds a new “Hot” label to a menu item.

Adding CSS via the settings panel in Divi Builder editor.

The Bottom Line

Menu is an essential feature that every website should have. In most cases, you will a website placed at the header although there is no legal rule about the placement. In Divi itself, you can add a menu whether on a custom header or a default header.

Adding a menu to a custom header gives you a full control over the design. If you want it, you can add an extra label to a menu item to draw visitors’ attention as we have just covered above.

This page may contain affiliate links, which help support our project. Read our affiliate disclosure.
Editorial Staff

Editorial Staff

WordPress page builder tutorials, tips, and resources
Want to save yearly expense up to $219? why not?

Leave a Comment

Save your Divi assets to the cloud and access them from anywhere.