Hi there,
will require adding some HTML and a CSS class to your menu, check this article first to see how to add CSS Classes to menu items:
https://docs.generatepress.com/article/using-the-wordpress-menu-builder/#custom-classes
Then for each of the menu items you want the colored label added give it a class of:
menu-label
Then you need to edit the Menu Label itself and add some HTML so:
Home
becomes Home<span class="green">New</span>
Now add this Additional CSS:
.menu-label {
position: relative;
}
.menu-label span {
position: absolute;
top: -4px;
left: 20px;
font-size: 0.7em;
padding: 3px;
line-height: 1;
color: #fff;
border-radius: 2px;
}
.menu-label span.green {
background-color: green;
}
Simply add the HTML required for each menu item, within its specific span tag you can add a different color and create a new CSS Rule for it. E.g
Services<span class="red">New</span>
And this additional CSS:
.menu-label span.red {
background-color: red;
}
To add the button in the menu this article explains:
https://docs.generatepress.com/article/adding-buttons-navigation/