How to Remove the Hover Underline Effect on the Header Menu

Introduction

BuddyBoss applies an underline effect to the Community menu items on hover and when the menu item is active. You can remove this underline styling by adding a small CSS rule to your theme settings, helping the menu match your preferred design or branding. This guide explains how to remove the hover underline effect on the header menu.

Custom Workaround

Before proceeding, make sure you have a complete site backup.

1. Go to BuddyBoss > Theme Options in your WordPress admin dashboard
   
2. Open the Custom Codes section
   
3. Enable CSS
   
4. Add the following CSS code:
   

.bb-template-v2 .primary-menu > li.current-menu-item > a {

    border-bottom: none;

}

5. Click Save Changes

Note: Modifications are typically considered custom work, but we are making an exception in this case. Please review the BuddyBoss Support Policy.

Troubleshooting and FAQs

Q: The underline still appears on hover.
A: This code removes the active underline. Additional hover styles may require extra CSS.

Q: Will this affect other menus?
A: No. It only targets the primary Community menu in BuddyBoss.

Q: Can I restore the underline later?
A: Yes. Simply remove the CSS code and save your changes.