I am frequently asked how do I removed the left navigation on the modern Team sites? Most people don’t know this but if you just remove all the items from the navigation it will go away on it’s own!

The draw back is that it’s removed for the whole site. Maybe you just want it gone on one page. Well in that case you’ll have to use CSS to do that. For the one page approach I would add a Modern Script editor to the page.

Immediately after removing the left navigation, depending on your screen size, you will notice that the screen does not go full width. This would also need to be fixed with injecting CSS either through the page or into the entire site via Application Customizer.

not quite full screen

Microsoft doesn’t recommend modifying their CSS but they almost give us no choice. For now I’ll leave you with the CSS that works (for now) to update these zones. You’ll need to use one of the two methods above to implement this on Modern pages.

// Trimming Left Navigation
#spLeftNav { 
 display: none;
}

// Full Screen CSS
.CanvasComponent.LCS .CanvasZone {
 //there is a max width on this set to 1268px, we'll make it 100%
 max-width: 100%;
}

About the Author

Developer, Designer, Thinker, Problem Solver, Office Servers and Services MVP, & Collaboration Director @ SoHo Dragon.

View Articles