Hiding the Header and BuddyPanel on a Single Page

Introduction

By default, BuddyBoss does not provide a built-in option to hide the site header and BuddyPanel on a specific page. Using a targeted CSS snippet, you can hide both elements on a single page by referencing its unique page ID. This is useful for landing pages, custom layouts, or distraction-free pages.

Custom Workaround

Follow the steps below to hide the Header and BuddyPanel on a single page:

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

.page-id-6 .site-header { 

    display: none; 

}

.page-id-6 aside.buddypanel { 

    display: none; 

}

4. Save changes.

Important:Replace 6 with the actual page ID where you want the Header and BuddyPanel hidden.
In this example, the page ID used is 6, which corresponds to the Members Directory page.

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

Troubleshooting and FAQs

Q: How do I find the correct page ID?

A: Edit the page in WordPress and check the URL in your browser. The page ID is usually visible in the URL (for example, post=123).

Q: Will this hide the Header and BuddyPanel on all pages?

A: No. This CSS only affects the page with the specified page ID.

Q: Does this affect logged-in and logged-out users?

A: Yes. The Header and BuddyPanel will be hidden for all users on that specific page.

Q: The Header or BuddyPanel is still visible. What should I do?

A: Clear your site cache and browser cache. If the issue persists, submit a ticket to the support team for assistance.

Q: Will this work on mobile devices?

A: Yes. The CSS applies to all screen sizes unless restricted with media queries.