Adding a NEW tag to the Divi primary menu

You want to highlight a link in your Divi primary menu?

A “New Tag” is a great way to draw your visitors’ attention to a specific link in your primary navigation.

Regular visitors to your website will quickly recognize that there is a new page on your website, because the NEW tag will be an eye catcher.

This is how easy it is to add the NEW tag to your primary menu link:

Step 1:

Add the class new to the link you want to highlight in the menu settings under Appearance > Menus.

Tip: If you don’t see the box CSS Classes (Optional), you’ll need to enable it in WordPress first. To do so, click Screen Options at the top right of the menu settings and select CSS Classes under Show advanced menu properties.

Step 2:

Once you’ve set the CSS class, you’ll then paste the following code into your child theme’s stylesheet:

#top-menu-nav>ul>li.new a:before {
    content: "New";
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #fff;
    background: #000; /* Change background color here */
    padding: .2em .4em;
    position: relative;
    border-radius: 4px;
    left: 0;
    bottom: 3px;
    margin-right: .5em;
}

If you’re not using a child theme, you can also insert the code into the section Additional CSS in the Divi Theme Customizer: