[Resolved] Add labels to Menu items

[Kim]

Hi there,

I would like to add a colored “new” label to one of our menu items. Do you have a tipp how to achieve this?

Many thanks 🙂

[Leo]

Hi there,

Not quite sure if I fully understand.

Do you have an example that you can show?

[Kim]

Hi Leo,

I mean something like the orange label saying “Neu”:

Menu label

[David]

Hi there,

if there is no sub menu on that item then:

1. Give then edit your Menu item label to read like so:
Kurse<span>Neu</span>

2. Give the menu item a custom class of: custom-menu-label
How to add custom class:
https://docs.generatepress.com/article/using-the-wordpress-menu-builder/#custom-classes

3. Add this CSS:

.custom-menu-label a>span {
    margin-left: 0.5em;
    padding: 5px;
    background-color: #ff0000;
    border-radius: 5px;
    font-size: 12px;
}

Edit the CSS to suit

[Kim]

Great! Thank you 🙂

[David]

You’re welcome

[Author]

Posts