It is not difficult to remove the left menu bar from Sharepoint 2013 but unfortuately it is not as simple as clicking a checkbox and the steps are tedious:
- Click EDIT (top right of your site)
- Click inside the body of your site
- Click INSERT (top menu)
- Click WEBPART
- Click MEDIA AND CONTENT then CONTENT EDITOR
- Click the ADD button (bottom right)
- Click the CONTENT EDITOR box that just appeared then select the drop down in the top right of that box and select EDIT WEB PART
- If you skip the EDIT WEBPART, it will not work
- the small black drop down arrow will not appear (in the top right) until you mouse over the Content Editor box
- Click the CLICK HERE TO ADD NEW CONTENT link at the bottom of the CONTENT EDITOR box
- Click INSERT (top menu tab)
- Click EMBED CODE
- Paste the following into the box (and make sure it is plain text when you paste it… i.e. it looks just like what you see below):
.<style unselectable=”on”>
/* hide left menu bar */
#sideNavBox
{
display: none;
}
/* adjust position of content */
#contentBox
{
margin-left:20px!important;
}
</style>
- Click the INSERT button
- In the CONTENT EDITOR (edit WebPart) box on the right side of the screen click the + to expand the APPEARANCE section
- Change the TITLE to something small like a period .
- This will effectively hide the code from the viewers
- Click OK (right side of screen)
There, now wasn’t that easy! What a pain in the butt.
17 Comments
Don · April 19, 2020 at 7:44 pm
Thank you!!
MartinN · July 16, 2018 at 7:55 am
Thanks, this solution helped me save time; it worked as explained.
Khanya · March 14, 2018 at 2:12 am
Thank you .. it worked wonders. been doing it another way around yesterday. And Everytime I clicked save it posted back the navigation panel with the “Site Content”. Your step did the trick. thanks
Tim Austin · December 7, 2016 at 11:41 pm
How do you get it to apply to a whole site?
Ian Matthews · December 13, 2016 at 6:48 pm
Remember that SharePoint considers each tab a SITE so you will have to add this to each page/tab. 🙁
EdB · December 7, 2016 at 3:46 am
Thanks, didn’t work for me initially. I instead pasted the CSS into a .txt document and uploaded it to sharepoint. I then linked to this in the web part properties content editor. Works great and more reusable this way.
Deepak · November 30, 2016 at 1:35 am
Unfortunately it works in editable mode but once i save it, sidebar comes back again.
Ian Matthews · December 1, 2016 at 9:54 pm
The sidebar menu should not come back. Something is not correct.
Shariq · October 25, 2016 at 9:51 am
Thanks. It worked.
You don’t often find a SharePoint tip that actually works as described.
Steve@hotmail.com · December 6, 2015 at 8:12 pm
No, you don’t need sharepoint designer to do this.
I seem to recall that the code you use varies by the version of sharepoint you are using. Some of the CSS tag names vary.
I get most of my answers through sharepoint stackexchange.
Stephen · July 17, 2015 at 9:23 am
How would I center the page instead of having to use the margin properties?
Ian Matthews · July 28, 2015 at 7:35 pm
I am sorry to say that I do not know for sure but it is likely handled through the SHAREPOINT DESIGNER which you can source http://www.microsoft.com/en-ca/download/details.aspx?id=35491
Sherise Loper · April 1, 2015 at 4:47 am
I am a big fan of these updates! I’ve used this method and it works very well. Good ideas here. Wonderful update! Thank you.
Brian · January 9, 2015 at 10:46 am
I couldn’t get this to execute. Followed everything step by step
Ian Matthews · March 22, 2015 at 12:57 am
Hi Brian; It is tedious. You may find these screen shots helpful:
http://108.163.210.10/~angsarap/macaalay.com/wp-content/uploads/2014/01/1-script-editor.jpg
http://108.163.210.10/~angsarap/macaalay.com/wp-content/uploads/2014/01/2-codes-to-remove-menu.jpg
Colin · March 12, 2014 at 10:41 am
That worked a treat. One slight variation is, rather than use a . as the title change the chrome type in appearance to none. Anyway thanks again.
Yannick K · March 3, 2014 at 2:07 am
Thanks it has worked.