Can we completely hide or remove the above header part in sharepoint?

Question

Hi,

I want to design the sharepoint and completely hide or remove the above header part in sharepoint? as shown in below attached image.

Answer 1

In SharePoint, you can customize the look and feel of your site, but there are limitations to how much you can hide or remove the header part, depending on the version of SharePoint you are using and the specific settings and permissions of your site.

SharePoint Online (Modern Experience): In SharePoint Online, the modern experience is the default, and it provides limited customization options. You can customize the header using the built-in theme and header settings, such as changing the site logo, site name, and navigation. To hide or remove the header completely in modern SharePoint, you may need to use custom scripting and CSS, but this may not be supported or recommended.

SharePoint Online (Classic Experience): In SharePoint Online's classic experience, you have more customization options. You can create custom master pages and use SharePoint Designer to hide or modify the header. However, Microsoft has been moving away from the classic experience, and it's not recommended for long-term solutions.

SharePoint Server (On-Premises): If you are using an on-premises version of SharePoint, you have more control over customization, and it's possible to remove or hide the header by modifying master pages and CSS. However, it's essential to consider the impact on your SharePoint site's functionality and future updates.

Answer 2

Hi @Khushboo Kumari,

Thanks for your response.

Workaround (Not recommended):

You can inject custom CSS on SharePoint online modern pages using SPFx application customizer & hide the office 365 ribbon.

Check below references for more information:

1. How can I include the same JS and CSS files on multiple SharePoint Modern Page?
2. Customize SuiteBar on modern SharePoint online site
3. Trimming the Suite Bar + Ribbon on Modern SharePoint Sites in Office 365
4. Hiding Office 365 Ribbon in SharePoint 

Note: DOM manipulation & CSS customizations are not recommended by Microsoft and some of your customization may break if Microsoft changes HTML element id/classes in new release updates.

---

If the answer is helpful, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

Answer 3

Hi @Khushboo Kumari,

The search box in SharePoint Online’s top navigation suite bar can be hidden with this PowerShell script:

$SiteURL = "https://xxx.sharepoint.com/sites/xxx"

$Cred = Get-Credential
 
Try {   
    $Ctx = New-Object Microsoft.SharePoint.Client.ClientContext($SiteURL)
    $Ctx.Credentials = New-Object Microsoft.SharePoint.Client.SharePointOnlineCredentials($Cred.UserName,$Cred.Password)
 
    $Web = $Ctx.Web
    $Ctx.Load($Web)
    $Ctx.ExecuteQuery()
 
    #Disable search in the navigation bar
    $Web.SearchBoxInNavBar = 3
    $web.Update()
    $Ctx.ExecuteQuery()
}
Catch {
    write-host -f Red "Error:" $_.Exception.Message
}

SearchBoxInNavBar enumeration values (In the above example, SearchBoxInNavBar is set to 3 by $Web.SearchBoxInNavBar = 3):

• Inherit = 0
• AllPages = 1
• ModernOnly = 2
• Hidden = 3

We can also set search box settings using PnP PowerShell.

$SiteURL = "https://xxx.sharepoint.com/sites/xxx"   
Connect-PnPOnline -Url $SiteURL -Interactive  
Set-PnPSearchSettings -SearchBoxInNavBar Hidden -Scope Web -Force  

This hides the search box from the top navigation bar of the SharePoint Online site in a few minutes. To enable the search box back in the Navigation bar, use:

Set-PnPSearchSettings -SearchBoxInNavBar ModernOnly -Scope Web

Also, you can set the search box visibility at the site collection level by changing the scope parameter from “Web” to “Site”.

---

If the answer is helpful, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.