How to Change Hover and Active Links Color of Profile Menus

Introduction

Customizing the hover and active link colors in profile menus enhances navigation clarity and reinforces your site’s branding. While BuddyBoss doesn’t offer a built-in setting for this, a brief CSS adjustment lets you redefine these link states easily.

Custom Workaround

1. In your WordPress admin, go to BuddyBoss > Theme Options.
   
2. Under Custom Codes, enable CSS.
   

Append the following CSS (replace “green” with your preferred color/* Active (selected) link styling */

.bp-user .bp-navs ul li.selected a,

.bp-user nav#object-nav .selected > a {

  border-bottom-color: green;

  color: green;

}

/* Hover link styling */

.bp-user .bp-navs ul li a:hover,

.bp-user nav#object-nav a:hover,

.bp-user .buddypress-wrap .bp-navs li:not(.current) a:hover,

.bp-user .buddypress-wrap .bp-navs li:not(.selected) a:hover {

  color: green;

}

3. Click Save Changes.

Note: Any modifications are considered custom work. Know more about our Support Policy.

Troubleshooting and FAQs

Q: My hover color change isn’t visible—what should I verify?
A: Clear your site and browser caches, then refresh the profile page to ensure the new CSS is applied.

Q: Can I use hex codes or RGB values instead of a color name?
A: Yes. For example, you can replace green with #28a745 or rgb(40, 167, 69) to match your branding.

Q: Will this CSS affect links outside the profile menus?
A: No. These selectors specifically target only the BuddyBoss profile navigation links.