SOLVED

Trying to Hide the Site Header of a communication site

%3CLINGO-SUB%20id%3D%22lingo-sub-355363%22%20slang%3D%22en-US%22%3ETrying%20to%20Hide%20the%20Site%20Header%20of%20a%20communication%20site%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-355363%22%20slang%3D%22en-US%22%3E%3CP%3EHi%20Experts%2C%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EI%20have%20the%20requirement%20to%20hide%20the%20Site%20Header%20portion%20f%20a%20SharePoint%20Communication%20site.%3C%2FP%3E%3CP%3EWe%20can%20do%20the%20same%20by%20applying%20the%20css%20%22mainRow-xx%7B%20display%3Anone%3B%22%7D%26nbsp%3B%20in%20the%20application%20customizer.%3C%2FP%3E%3CP%3EBut%20it%20is%20not%20recommended%20by%20the%20Microsoft%20and%20also%20it%20is%20not%20applicable%20to%20all%20the%20pages%20of%20te%20site%20collection.%3C%2FP%3E%3CP%3ECan%20we%20find%20the%20main%20control%20of%20the%20site%20header%20as%20Object%20(not%20css%20class%20name%2C%20control%20class%20name)%26nbsp%3B%20in%20the%20page.%20So%20that%20in%20the%20Application%20customizer%20we%20can%20get%20the%20Object%20and%20if%20the%20object%20contains%20the%20property%20of%20visible.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EAppreciate%20your%20help.%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-LABS%20id%3D%22lingo-labs-355363%22%20slang%3D%22en-US%22%3E%3CLINGO-LABEL%3ESharePoint%20Site%20Header%3C%2FLINGO-LABEL%3E%3C%2FLINGO-LABS%3E%3CLINGO-SUB%20id%3D%22lingo-sub-355743%22%20slang%3D%22en-US%22%3ERe%3A%20Trying%20to%20Hide%20the%20Site%20Header%20of%20a%20communication%20site%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-355743%22%20slang%3D%22en-US%22%3E%3CP%3EHi%26nbsp%3B%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F235568%22%20target%3D%22_blank%22%3E%40Asesh%20Kumar%20Maity%3C%2FA%3E%26nbsp%3B%20as%20you%20say%2C%26nbsp%3B%3CSTRONG%3EIt%E2%80%99s%20not%20recommended%20to%20trim%20the%20ribbon%20or%20suite%20bar%3C%2FSTRONG%3E.%3C%2FP%3E%3CP%3EBtw%2C%20you%20can%20realize%20a%20spfx%20webpart%20which%20include%20css%20or%20js%20(something%20like%20this%26nbsp%3B%3CA%20href%3D%22https%3A%2F%2Fspwestpros.blogspot.com%2F2017%2F10%2Fhide-sharepoint-quicklaunch-on-modern.html%22%20target%3D%22_blank%22%20rel%3D%22noopener%20nofollow%20noopener%20noreferrer%20noopener%20noreferrer%22%3Ehttps%3A%2F%2Fspwestpros.blogspot.com%2F2017%2F10%2Fhide-sharepoint-quicklaunch-on-modern.html%3C%2FA%3E%20)%20or%20use%20this%20Modern%20Script%20Editor%20Webpart%26nbsp%3B%3CA%20href%3D%22https%3A%2F%2Fgithub.com%2FSharePoint%2Fsp-dev-fx-webparts%2Ftree%2Fmaster%2Fsamples%2Freact-script-editor%26nbsp%3B%22%20target%3D%22_blank%22%20rel%3D%22noopener%20noopener%20noreferrer%20noopener%20noreferrer%22%3Ehttps%3A%2F%2Fgithub.com%2FSharePoint%2Fsp-dev-fx-webparts%2Ftree%2Fmaster%2Fsamples%2Freact-script-editor%3C%2FA%3E%26nbsp%3B%3C%2FP%3E%3CP%3ECheers%2C%3C%2FP%3E%3CP%3EFederico%3C%2FP%3E%3C%2FLINGO-BODY%3E
Highlighted
Contributor

Hi Experts,

 

I have the requirement to hide the Site Header portion f a SharePoint Communication site.

We can do the same by applying the css "mainRow-xx{ display:none;"}  in the application customizer.

But it is not recommended by the Microsoft and also it is not applicable to all the pages of te site collection.

Can we find the main control of the site header as Object (not css class name, control class name)  in the page. So that in the Application customizer we can get the Object and if the object contains the property of visible.

 

Appreciate your help.

1 Reply
Highlighted
Solution

Hi @Asesh Kumar Maity  as you say, It’s not recommended to trim the ribbon or suite bar.

Btw, you can realize a spfx webpart which include css or js (something like this https://spwestpros.blogspot.com/2017/10/hide-sharepoint-quicklaunch-on-modern.html ) or use this Modern Script Editor Webpart https://github.com/SharePoint/sp-dev-fx-webparts/tree/master/samples/react-script-editor 

Cheers,

Federico