SharePoint Online Classic Pages - Formatting Issue

Question

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

Answer 1

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.

Example:

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

<style>
.ms-breadcrumb-top { display:none; }
</style>

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

<style>
.ms-breadcrumb-top { display:none; }
#sideNavBox { display:none; }
</style>

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:

<style>
.ms-breadcrumb-top { visibility:hidden; }
#sideNavBox { visibility:hidden; }
</style>

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:

<style>  
#s4-titlerow { display: none !important; }  
#sideNavBox { display: none !important; } 
#contentBox { margin: auto;   width: 90%; }   
</style>