Hide Search Box in SharePoint Online

Wanted to drop a quick post about hiding the Search Box at the top of a Team Site in Office 365s SharePoint Online.  I came across the idea of adding a content editor web part to a page in SharePoint ON PREM but I was having trouble tracking down which class was the class that managed the display of the search box in SharePoint online.

Thats where Darce Hess comes in. A quick tweet out to the #sphelp community and she shot over the class (.ms-srch-sb).

The customer I was working with wanted to just hide the search box on a specific team site page (main landing page) hence why we wanted to add it to a CEWP directly on the page.  If you would want to hide it on all pages of a site or site collection simply add create a class (shown below) on a custom CSS file that you add to your SharePoint Online site collection/site and you can hide it across the board.

So enough chatter, what needs to be added to the page.  Simply add the below if you’re dropping it on a CEWP:


.ms-srch-sb {display:none;}


Now if you want to simply add that class to a existing style sheet you’re already loading, simply add

.ms-srch-sb {display:none;}

Simple hack but a goodie!

Leave a Reply

Your email address will not be published.

No seriously, are you human? *