How to Change the Background Color of the Submenu on the Header

Introduction

By default, there is no built-in option to change the submenu background color in the header. Using a CSS snippet, you can customize the hover background color for submenu items to better match your site’s design.

Custom Workaround

Follow the steps below to update the submenu background color:

1. Go to BuddyBoss > Theme Options
2. Under Custom Codes, enable CSS
3. Append the following code:

.bb-template-v2 .site-header #primary-navbar .menu-item > .ab-submenu .bb-sub-menu .menu-item a:hover { 

    background: #FFEBC2; /* Change #FFEBC2 to your preferred color */

}

4. Save changes.

Note: Any modifications are considered custom work already. Know more about our Support policy here: https://www.buddyboss.com/support-policy/

Troubleshooting and FAQs

Q: The submenu background color didn’t change. What should I do?

A: Clear your site cache and browser cache. If it still doesn’t update, submit a ticket to the support team.

Q: Can I change the background for all submenu items, not just on hover?

A: Yes. Use the following code instead:

.bb-template-v2 .site-header #primary-navbar .menu-item > .ab-submenu .bb-sub-menu .menu-item a { 

    background: #FFEBC2; 

}

Q: Can I use a gradient instead of a solid color?

A: Yes. Replace background with a gradient value, for example:

background: linear-gradient(to right, #FFEBC2, #FFD18C);