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

Updated: December 26, 2020

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.

How to add 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.

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.

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.

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.

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.

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

Leave a Reply

Your email address will not be published. Required fields are marked *

Pin It on Pinterest

Share This

Share This

Share this post with your friends!