Hide Site Header communication site

%3CLINGO-SUB%20id%3D%22lingo-sub-719640%22%20slang%3D%22en-US%22%3ERe%3A%20Hide%20Site%20Header%20communication%20site%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-719640%22%20slang%3D%22en-US%22%3E%3CP%3E%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F366160%22%20target%3D%22_blank%22%3E%40davidgomezbeezy%3C%2FA%3E%26nbsp%3BThe%20approach%20you%20took%20is%20really%20the%20only%20approach%2C%20but%20it's%20also%20not%20really%20a%20supported%20approach.%20The%20CSS%20class%20names%20%26amp%3B%20HTML%20could%20change%20(and%20have%20many%20times%20already%20with%20the%20header).%26nbsp%3B%20I%20personally%20would%20avoid%20trying%20to%20hide%20the%20header...%20In%20my%20experience%2C%20the%20business%20value%20is%20far%20less%20than%20the%20technical%20debt%20is%20worth.%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-719587%22%20slang%3D%22en-US%22%3EHide%20Site%20Header%20communication%20site%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-719587%22%20slang%3D%22en-US%22%3E%3CP%3EHi.%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EWe%20are%20trying%20to%20hide%20the%20Site%20header%20in%20a%20communication%20site%2C%20and%26nbsp%3Bwe%20would%20like%20to%20know%20if%20there%20is%20any%20possibility%20of%20doing%20so.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-inline%22%20style%3D%22width%3A%20999px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Fgxcuf89792.i.lithium.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F120572i17E55CF9FD664F84%2Fimage-size%2Flarge%3Fv%3D1.0%26amp%3Bpx%3D999%22%20alt%3D%22Modern-Header.PNG%22%20title%3D%22Modern-Header.PNG%22%20%2F%3E%3C%2FSPAN%3E%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EWe%20are%20trying%20with%20some%20css%20or%20js%2C%20injected%20in%20a%20webpart%20and%20SPFx%20extension%2C%20but%20there%20is%20some%20flickering%2C%20because%20the%20code%20is%20not%20executed%20before%20the%20header%20is%20showed.%20In%20addition%2C%20to%20achieve%20this%20we%20are%20depending%20on%20some%20CSS%20classes%20that%20we%20understand%20could%20change.%3CBR%20%2F%3E%3CBR%20%2F%3EIs%20there%20any%20supported%20way%20to%20do%20it%3F%20Or%20will%20be%20supported%20in%20the%20future%3F%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3ECC%3A%26nbsp%3B%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F369%22%20target%3D%22_blank%22%3E%40Vesa%20Juvonen%3C%2FA%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%3CBR%20%2F%3EMany%20thanks.%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-LABS%20id%3D%22lingo-labs-719587%22%20slang%3D%22en-US%22%3E%3CLINGO-LABEL%3EHeader%3C%2FLINGO-LABEL%3E%3CLINGO-LABEL%3ESharePoint%3C%2FLINGO-LABEL%3E%3CLINGO-LABEL%3ESharePoint%20Framework%3C%2FLINGO-LABEL%3E%3C%2FLINGO-LABS%3E
Highlighted
Regular Visitor

Hi. 

 

We are trying to hide the Site header in a communication site, and we would like to know if there is any possibility of doing so.

 

Modern-Header.PNG

 

We are trying with some css or js, injected in a webpart and SPFx extension, but there is some flickering, because the code is not executed before the header is showed. In addition, to achieve this we are depending on some CSS classes that we understand could change.

Is there any supported way to do it? Or will be supported in the future?

 

CC: @Vesa Juvonen 


Many thanks.

1 Reply
Highlighted

@davidgomezbeezy The approach you took is really the only approach, but it's also not really a supported approach. The CSS class names & HTML could change (and have many times already with the header).  I personally would avoid trying to hide the header... In my experience, the business value is far less than the technical debt is worth.