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> 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:

Et voilà! You should now see the NEW tag in your primary menu.

If you like this code snippet, I’m happy to receive a short comment from you!

Dir hat der Beitrag gefallen? Dann teile ihn gerne!