How to make small "new box" above any of the header menu.

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/

it's not working David, I'm i missing anything?

Did it by viewing with browser "inspect element" but cannot find the HTML code in header.php or page HTML itself to edit and save. any idea where to add the span code?

Thanks,

You shouldn't be editing any of the templates, you just need to edit your Menu in Appearance > Menus and then add that HTML as the menu label.

Perfect! Thanks...

Glad to be of help