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:

  1. Click EDIT (top right of your site)
  2. Click inside the body of your site
  3. Click INSERT (top menu)
  4. Click WEBPART
  5. Click MEDIA AND CONTENT then CONTENT EDITOR
  6. Click the ADD button (bottom right)
  7. 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
    1. If you skip the EDIT WEBPART, it will not work
    2. the small black drop down arrow will not appear (in the top right) until you mouse over the Content Editor box
  8. Click the CLICK HERE TO ADD NEW CONTENT link at the bottom of the CONTENT EDITOR box
  9. Click INSERT (top menu tab)
  10. Click EMBED CODE
  11. 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>

  12. Click the INSERT button
  13. In the CONTENT EDITOR (edit WebPart) box on the right side of the screen click the + to expand the APPEARANCE section
  14. Change the TITLE to something small like a period .
    1. This will effectively hide the code from the viewers
  15. Click OK (right side of screen)

 

There, now wasn’t that easy!  What a pain in the butt.


17 Comments

Avatar

Don · April 19, 2020 at 7:44 pm

Thank you!!

Avatar

MartinN · July 16, 2018 at 7:55 am

Thanks, this solution helped me save time; it worked as explained.

Avatar

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

Avatar

Tim Austin · December 7, 2016 at 11:41 pm

How do you get it to apply to a whole site?

    Ian Matthews

    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. 🙁

Avatar

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.

Avatar

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

    Ian Matthews · December 1, 2016 at 9:54 pm

    The sidebar menu should not come back. Something is not correct.

Avatar

Shariq · October 25, 2016 at 9:51 am

Thanks. It worked.
You don’t often find a SharePoint tip that actually works as described.

Avatar

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.

Avatar

Stephen · July 17, 2015 at 9:23 am

How would I center the page instead of having to use the margin properties?

    Ian Matthews

    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

Avatar

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.

Avatar

Brian · January 9, 2015 at 10:46 am

I couldn’t get this to execute. Followed everything step by step

    Ian Matthews

    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

Avatar

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.

Avatar

Yannick K · March 3, 2014 at 2:07 am

Thanks it has worked.

Questions or Comments?