How to Change the Background Color of the Mobile Menu Display

Introduction

The BuddyBoss mobile menu panel uses the theme’s default background color. You can override this by adding a small CSS snippet in the Theme Options to match your brand or improve readability on mobile devices.

Custom Workaround

1. Go to BuddyBoss > Theme Options.
   
2. Under Custom Codes, Enable CSS.
   

Append the following CSS:

.bb-mobile-panel-wrapper .bb-mobile-panel-inner {

  background: #AFAFAF;

}

3. Save Changes.
   

Note: Any modifications are considered “custom work.” You may review our Support Policy for details.

Troubleshooting and FAQs

Q: The mobile menu background didn’t update—what should I check?
A: Clear any site, CDN, or browser cache. Also verify your device is in a mobile viewport (under 768px width) when testing.

Q: Can I use a gradient or image instead of a solid color?
A: Yes—just replace the background property with a gradient (e.g., linear-gradient(…)) or background-image: url(…).

Q: How do I revert this change?
A: Remove or comment out the CSS snippet from Custom Codes and save the Theme Options.