Hiding Default Header, Footer, and Logo

%3CLINGO-SUB%20id%3D%22lingo-sub-1038579%22%20slang%3D%22en-US%22%3EHiding%20Default%20Header%2C%20Footer%2C%20and%20Logo%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-1038579%22%20slang%3D%22en-US%22%3EI%20want%20to%20hide%20the%20default%20SharePoint%20365%20header%20(but%20still%20showing%20the%20command%20bar)%2C%20footer%2C%20and%20logo.%20I%20used%20a%20css%20injection%20script%20but%20using%20the%20script%2C%20I%20would%20have%20to%20enter%20in%20the%20literal%20kebab%20suffix%20like%20headerNav-154%20or%20footerNav-165.%20Because%20after%20sass%20transpiled%20the%20selectors%2C%20it%20would%20add%20the%20kebab%20suffix%20at%20the%20ends%20of%20the%20css%20selectors.%20I%20can%E2%80%99t%20keep%20on%20adding%20these%20specific%20suffixes%20to%20my%20custom%20css%20file.%20How%20should%20I%20go%20about%20hiding%20these%20header%2C%20footer%2C%20and%20logo%20without%20using%20this%20css%20injection%3F%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-1041197%22%20slang%3D%22en-US%22%3ERe%3A%20Hiding%20Default%20Header%2C%20Footer%2C%20and%20Logo%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-1041197%22%20slang%3D%22en-US%22%3E%3CP%3EHi%20%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F471885%22%20target%3D%22_blank%22%3E%40htd2519%3C%2FA%3E%26nbsp%3B%2C%3C%2FP%3E%3CP%3Eyou%20should%20not%20do%20these%20customizations%2C%20they%20are%20not%20recommended%20by%20Microsoft%20best%20practices.%3C%2FP%3E%3CP%3E%3CA%20href%3D%22https%3A%2F%2Fdocs.microsoft.com%2Fen-us%2Fsharepoint%2Fdev%2Fsolution-guidance%2Fportal-branding%22%20target%3D%22_blank%22%20rel%3D%22noopener%20noreferrer%22%3Ehttps%3A%2F%2Fdocs.microsoft.com%2Fen-us%2Fsharepoint%2Fdev%2Fsolution-guidance%2Fportal-branding%3C%2FA%3E%3C%2FP%3E%3CP%3EIn%20addition%20to%20this%2C%20the%20risk%20is%20that%20updates%20can%20make%20your%20changes%20useless%2C%20and%20show%20what%20you're%20hiding.%3CBR%20%2F%3EThink%20of%20a%20way%20to%20make%20users%20understand%20the%20importance%20of%20the%20O365%20bar%2C%20set%20a%20default%20logo%20and%20work%20on%20platform%20adoption.%3C%2FP%3E%3CP%3ECheers%2C%3C%2FP%3E%3CP%3EFederico%3C%2FP%3E%3C%2FLINGO-BODY%3E
New Contributor
I want to hide the default SharePoint 365 header (but still showing the command bar), footer, and logo. I used a css injection script but using the script, I would have to enter in the literal kebab suffix like headerNav-154 or footerNav-165. Because after sass transpiled the selectors, it would add the kebab suffix at the ends of the css selectors. I can’t keep on adding these specific suffixes to my custom css file. How should I go about hiding these header, footer, and logo without using this css injection?
3 Replies

Hi @htd2519 ,

you should not do these customizations, they are not recommended by Microsoft best practices.

https://docs.microsoft.com/en-us/sharepoint/dev/solution-guidance/portal-branding

In addition to this, the risk is that updates can make your changes useless, and show what you're hiding.
Think of a way to make users understand the importance of the O365 bar, set a default logo and work on platform adoption.

Cheers,

Federico

Hi Federico,
This is my design specification and I have to abide by it. The client wanted me to model this after another site within the company that has the same design, so it’s doable code wise. I just need to find out how other than a CSS injection. All 𝐇𝐞𝐥𝐩/feedback is greatly appreciated.

Hi @htd2519 

I can understand your situation.

From my personal point of view, the customer must be aware of the risk: what "saves" today using the same CSS, will spend it tomorrow with a bad impression when the site breaks.

Best of luck :)

Cheers,

Federico