How to Change the Hover Color of Header Icons

Introduction

Customizing the hover color of header icons can enhance user interaction and ensure visual consistency with your brand. While the BuddyBoss Theme does not offer a built-in option for this, you can easily apply the change using a CSS snippet.

Custom Workaround

To change the hover color of header icons:

1. In your WordPress Dashboard, go to BuddyBoss > Theme Options.
   
2. Scroll to the Custom Codes section and toggle Enable CSS.
   

Append the following CSS code (replace purple with your preferred color):

.primary-menu a:hover i {

  color: purple !important;

}

3. Click Save Changes.
   

Note: Any changes made using custom code are considered “custom work.” For more details, refer to our Support Policy.

Troubleshooting and FAQs

Q: The icon hover color didn’t change—what should I check?
A: Clear your site and browser cache, and confirm the CSS was saved correctly. Make sure there are no conflicting styles overriding the rule.