How to Adjust the BuddyBoss Header Height

Introduction

The BuddyBoss Platform doesn’t include a setting to change your header’s height. You can fine-tune it by adding a custom CSS snippet that sets the header container and menu items to your desired height.

Custom Workaround

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

Append the following:

.site-header,

.site-branding,

.header-aside > *,

.user-link,

.header-aside .notification-wrap,

.header-aside .notification-link,

.default-header .main-navigation,

.site-header .site-header-container.flex {

  height: 100px !important;

}

.primary-menu > li {

  line-height: 100px;

}

3. Click Save Changes.
   

Note: Any custom code is considered “custom work.” You may review our Support Policy for details: https://www.buddyboss.com/support-policy/

Troubleshooting and FAQs

Q: My header still looks the same—why?
A: Clear any caching layers (page, object, or CDN) and reload a front-end page to see the updated height.

Q: I want a different height—how do I change it?
A: Replace 100px in the CSS with your preferred header height (e.g., 50px).

Q: The logo or menu items are misaligned—what can I do?
A: Adjust the line-height in the second rule to match your new header height or tweak padding on .site-branding and .primary-menu > li.

Q: How do I remove these changes later?
A: Delete or comment out the added CSS in BuddyBoss > Theme Options > Custom Codes and save to revert to default styling.