March 28, 2012

SharePoint: Hide left navigation

Task

Hide left navi on a SharePoint site. I keep doing this almost daily and want a quick place to copy&paste the required style sheet from.

Solution for SharePoint 2010

Add this to CQWP, then set Web Part Chrome to None.

<style type="text/css">
body #s4-leftpanel { display: none; }
.s4-ca { margin-left: 0px; }
</style>



Solution for SharePoint 2013+ and SharePoint Online

Add this to Script Editor Web Part.

<style type="text/css">
#sideNavBox { display: none; }
#contentBox { margin-left: 20px; }
</style>



Technorati Tags:

15 comments:

  1. Great!Thank you very much!

    ReplyDelete
  2. This works, but when I do any changes to my page(html) and save the navigation comes back again(the webpart does not appear).

    ReplyDelete
  3. That behavior seems to be a "feature" in SharePoint, sometimes it just messes up the style content within CEWP. You just need to add the style tag again, that's why I created this blog article as I need to keep doing this myself every now and then :D

    ReplyDelete
  4. Thank you very much for this solution. How can i include this in a Feature ? My idea is to create a feature where i can activate and deactive the side navigation.

    ReplyDelete
    Replies
    1. In the feature, you'd upload a custom CSS file to e.g., Style Library, and when activating feature, set that custom CSS as the Alternate CSS file. And vice versa when deactivating.

      Delete
  5. I have tried this script and many others just like it and it just will not execute for me. The QL disappears but the content box or left nav or left margin or left nav box (whatever you want to call it) still remains. Please help.

    ReplyDelete
    Replies
    1. Brian,
      You might want to try #contentBox { margin-left: 0px } to get rid of the 20px left margin. If you have some styles overriding it, you might even want to try #contentBox { margin-left: 0px!important }

      Delete
    2. I have actually tried this as well. I've pretty much tried every blog post or script that comes up when google searching "remove left margin in SharePoint 2013," "remove left navigation in SharePoint 2013," "remove contentbox in SharePoint 2013. Most of them are exactly the same, and even suggest the "!important"command like your suggestion. Don't getme wrong, I appreciate your help, but is there something you can think of that is out of the ordinary? Or a different way around? Or what could be preventing the script from executing?

      Delete
    3. Looks like the script is executing, if you can see the left navi disappear in the first place. Maybe you need to set the width of the left navi container to 0px as well?

      What I'd do, is to open browser debugger tool (F12), and inspect the left navi HTML. There you see what specific CSS class is causing the padding, and you can even edit the styles in the debugger tool to ensure you get rid of the padding. After you know what style you need to override, you can just use the same overrides in the CSS already managing to hide the left navi.

      Delete
  6. I'm mostly self taught on SharePoint so this tip bested me until I figured out I didn't realize all the steps:
    Insert the Content Editor
    Choose "Edit Web Part"
    Click in the box - it may say "Click Here to Add Content"
    Now click on "Format Text", "HTML", "Edit HTML Source" and paste in the code (the HTML box should be empty)

    I was inserting the Content Editor, clicking on (not in) the box and changing the HTML on the page. It kept giving me the same issue - it would execute temporarily but then reappear when I saved the page. I hope this step-by-step saves others some frustration!

    Jussi - thank you for the code - it has been very useful!

    ReplyDelete
  7. thanks for the solution and its working..

    ReplyDelete
  8. This is awesome! thanks. I have question, how can I raise or lower the contentBox?

    ReplyDelete
    Replies
    1. You could set the margin-top value of the #contentBox to positive or negative value, e.g., "margin-top: -10px;" to raise it 10px.

      Delete