Change Header Button Color
This is a Developer Level doc.
If you're unfamiliar with CSS and/or editing files, codes and templates, as well as with resolving possible conflict, please seek help from a professional. Under our Support Policy, we don't provide support for modifications and customization.
If you are using two or more buttons in your Header Menu and you want one more to have a different color or you just want that one button to have a color other than the default color, use the following CSS snippet:
/* Change Header Button Color */
#site-header #menu-item-XXX span.text-wrap {
background-color: #000;
}
Adjust the color value per your need, as well as the XXX which in this case represents the specific menu item ID. Use the browser inspector to find the correct ID for the menu item you wish to apply changes to.
All CSS snippets should be added via a child theme's style.css file or using the built-in Custom CSS panel.
Useful Links: