I'm hoping someone can help.

My Company is currently moving from SharePoint On-Premise to SharePoint Online.

In SharePoint 2013, I was able to use code snippets to a) hide the left & top navigation columns and b) lock the 'focus on content' button to ensure that page content remained centred (rather than being pulled to the left due to the hidden navigation column).

Unfortunately the 'focus on content' set up is different on SharePoint Online Classic pages. As a result I've been unable to centre the page content when the navigation columns are hidden.

If someone could let me know of a way that I can hide the navigation columns and still centre the page content on an SP Online Classic page it would be much appreciated.

Thanks in advance


It is very likely that the so called HTML-DOM varies between SP-OnPrem and SharePoint Online.

In order to get started you may use the DEV-Tools of your Webbrowser (F12) and use the "element selector" in order to get the class name or the ID of a certain element.


enter image description here

So for hiding the Breadcrumb-Bar on top you can use the class-Selector of CSS:

.ms-breadcrumb-top { display:none; }

For hiding Breadcrumb-Bar and the left navigation panel (it has an ID in the HTML-DOM) you can use:

.ms-breadcrumb-top { display:none; }
#sideNavBox { display:none; }

If you are having issues that the content is being pulled to the left, then simply use instead of display: none; the visibility: hidden; CSS-property, example:

.ms-breadcrumb-top { visibility:hidden; }
#sideNavBox { visibility:hidden; }

This only hides the elements, but doesn't remove them - so the pixels are still reserved for the hidden elements.

For centering the contentBox you can also use following trick:

#s4-titlerow { display: none !important; }  
#sideNavBox { display: none !important; } 
#contentBox { margin: auto;   width: 90%; }   
  • Hi SteffPoint. Thanks for your reply. I have the code that I need to hide the navigation columns. What I'm struggling to do is lock the 'focus on content' button (next to 'edit' on the toolbar). Not being able to do this means the content of the page is left aligned when the left hand navigation column is hidden. I'm trying to find a way to ensure the page content is centred when the left hand navigation column is hidden. – Matt Aug 3 '20 at 13:15
  • Hello Matt, are you using display:none property? Can u try with visibility:hidden; instead? Otherwise please share your Code, then I may help better :) I have just updated my answer, hopefully it helps. – SteffPoint Aug 3 '20 at 13:17
  • Thanks SteffPoint. This is the code I'm using: <style> #s4-titlerow { display: none!important; } #sideNavBox { display: none; } #contentBox { margin-left: 0px; } </style> – Matt Aug 3 '20 at 13:33
  • Using visibility: hidden; on #sideNavBox doesn't appear to solve the problem. It creates a large gap at the top of the page when the 'focus on content' button is clicked. – Matt Aug 3 '20 at 13:35
  • Hello Matt, your code snippet #contentBox { margin-left: 0px; } is causing, that there is no margin on the left side. Simply remove it and your content will not be aligned on the left anymore. – SteffPoint Aug 3 '20 at 13:36

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.