Hide the Search Bar in Mobile View

Introduction

By default, BuddyBoss does not provide an option to hide the Search Bar in mobile view. Using a CSS snippet, you can remove the search functionality on smaller screens to create a cleaner mobile experience.

Custom Workaround

Follow the steps below to hide the Search Bar in mobile view:

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

@media (max-width: 768px) {

    .dir-search.activity-search.bp-search {

        display: none;

    }

}

4. Save changes.

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

Troubleshooting and FAQs

Q: Will this remove the Search Bar for desktop users as well?

A: No. This CSS targets only screens with a maximum width of 768px, so desktop users will still see the Search Bar.

Q: The Search Bar is still showing on my mobile device. 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: Does this affect search functionality in the backend?

A: No. This change is purely visual for the frontend. Users can still search via the backend or desktop view.

Q: Can I hide the Search Bar for specific pages on mobile?

A: Yes. Use the unique page ID in the CSS selector to target specific pages if needed.