Hide The Search Box on SharePoint Page

Hide the Default Search Box

Maybe you’d prefer to have a search field webpart, or just don’t want to have the option readily available on the page, or have other webparts and functions on the page that will be utilizing and connected to search results.

It could present a problem if a user inputs information into default search box, they may be redirected away from your site/page.  Probably best to hide it…

Want to hide the Search bar on a SharePoint page?

Drop this code in:

<style>
.ms-mpSearchBox {
display: none;
}
</style>

Hide SharePoint Page Title

Hide the SharePoint Page Title

When you create a page in SharePoint, it will display the title of the page above the content. Sometimes, that isn’t ideal;  perhaps having it there is a bit repetitive, or the page title is not relative to the content on the page…whatever the case, we’ve got you covered.

Want to hide it?

Drop this code in:

<style>
.ms-core-pageTitle {
display: none;
}
</style>

Hide the Tabular Menu Bar in SharePoint

Hide the Tabular Menu in SharePoint

Want to hide the top menu bar in SharePoint?  This is the menu bar that has the tabs for Browse, Page, List, Library, etc.  It appears throughout SharePoint, and shows tabs that have contextual actions pertaining to the apps on which you’re working within SharePoint.  It’s really useful, but in some cases, you may not want to show it.

Want to hide it?

Drop this code in:

<style>
.ms-cui-topBar2 {
display:none;
}
</style>

Hide the QuickLaunch on SharePoint Pages with CSS

Hide the QuickLaunch in SharePoint

Sometimes you either need extra space or just want to hide the QuickLaunch on your SharePoint page or site.  While there is some functionality within SharePoint to hide the QuickLaunch completely throughout the site, there may be an instance where you’d just like to hide it from a page.

Want to hide it?

Drop this code in:

<style>
#sideNavBox{ DISPLAY: none; }
</style>

 

To modify the margin on the page so that the content is a little more centered, use this code.

<style>
#contentBox { margin-left: 50px }
</style>