Hide top header / banner contains "Search bar" from SharePoint Modern Site

Copper Contributor

Hi All,

I need you suggestions. I would like to hide the top header / banner from the SharePoint site 

Existing page



We want to remove the top header / banner section including Search bar and it should be displayed as below


Could you please provide suggestion to remove / hide this top section from SharePoint site ?



2 Replies

@vgelearnings Out of the box it's not possible, you would need to use SPFx.


Los Gallardos
Intranet, SharePoint and Power Platform Manager (and classic 1967 Morris Traveller driver)

@vgelearnings Duplicate thread of: Remove banner/SharePoint ribbon for an anonymous site 


There is no SharePoint out of the box option to hide office 365 ribbon at the top.


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.

Please click Mark as Best Response & Like if my post helped you to solve your issue. This will help others to find the correct solution easily. It also closes the item. If the post was useful in other ways, please consider giving it Like.