1

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 '19 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 '19 at 21:00
1

Well, this can be achieved by Powershell script. Here you go.

Connect-PnPOnline -Url "https://[tenant].sharepoint.com/[site]" -UseWebLogin
try{
 $web = Get-PnPWeb
 #0 - Inherit, #1 - AllPages, #2 - ModernOnly, #3 - Hidden enums for Global (Modern Search)
 $web.SearchBoxInNavBar=3
 $web.Update()
 Invoke-PnPQuery
 Write-Host "Done" -BackgroundColor Green   
}
catch{
 Write-Host "No permission" -BackgroundColor Red    
}
Write-Host "All Done"

Hope, that may solve your query. Ahh, its been long time since this question posted. Maybe someone else will find it useful.

|improve this answer|||||
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.

|improve this answer|||||
  • 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 '19 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;
}
|improve this answer|||||
  • I did this and it didn't work. Not sure what I'm missing. – scottj Jun 29 '19 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.