0

I am rebuilding a SharePoint online site using the Modern Experience and I have started building it out with a communication HUB as the parent site to leverage Mega Menus. The company requirement is to remove OR hide the search box that appears on top the communication HUB page by default. How can I do this as I have found no documentation on the Microsoft Community Sites and elsewhere. enter image description here

  • That is a kinda strange requirement as that search box provides a hub scoped search option – Kasper Bo Larsen Jun 16 at 7:13
  • The short answer is you can't do. It is not supported. There are hacks which will break without any notification and will be hard to maintain so avoid them unless there is a supported way from Microsoft. – SharePointer Jun 19 at 21:00
0

Microsoft has recently moved the search box to the Office suite bar to create an uniform search experience for most of the Office products, and their documentation might not be updated on how to customize it. In fact, there are still pending items in their Roadmap, which will bring more custom functionality in Search when deployed.

For your particular requirement, I can think of using CSS style to hide the search bar. i.e. pick the class that Search box is using and then set 'visible:false' to it. Now, to inject such styles in SharePoint modern pages, you will have to make use of SharePoint Framework Extensions application customizer.

Using the customizer, you can inject a CSS (Cascading Style Sheet) file to your modern page, which can essentially override the styles of the page and provide you with required look and feel. Please check this article from wordpress where I have explained and provided detailed steps on how you can use SharePoint Framework Application customizer to brand your SharePoint modern pages by injecting custom CSS files.

Let me know if this helps.

  • Note that CSS removal would not be a supported solution as modifying the Suite Nav in any way is not supported. – Trevor Seward Jun 16 at 14:51
0

We can create a custom CSS style and inject the CSS on modern pages using SPFx extensions to achieve it.

The following solution with source code for your reference.

SPFx Applications Customiser CSS Injection

To hide the search box, we can use CSS code below:

#O365_SearchBoxContainer{
    display:none !important;
}
  • I did this and it didn't work. Not sure what I'm missing. – scottj Jun 29 at 20:21

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.