Hide left navigation panel without changing Master Page

The left navigation bar makes the page looks very “SharePoint”. And, some valuable space is wasted under it. If you don’t want to customize the Master page (or want to keep the left nav panel in the rest of the site), you can just hide it on the home page. Insert a Content Editor webpart, and edit the source by clicking the “Source Editor…” button, and enter this:

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

That’s right, this is just to override the default style for that section.

Since this web part is just added to the home page, it doesn’t hide the left nav penal for other pages.

Of course you don’t want to show this web part, choose the chrome type to be “None” then its title will not show after you publish it.

Advertisements
This entry was posted in SharePoint. Bookmark the permalink.

22 Responses to Hide left navigation panel without changing Master Page

  1. RubyRuby says:

    Acutally, I just tried it on a custom page in my collection and it works just fine. Thanks for posting this. I’ve had trouble finding a simple solution until now. You saved me much time.

  2. Dan says:

    I noticed this only works on pages where I have a data list that has been converted to an XSLT data view. Do you know why this might be?

  3. eman says:

    I second RubyRuby
    This is fantastic. I’m sure many people in my company would bake a cake if I get rid of this navigation pain, (sorry, I mean, pane) for them πŸ™‚

  4. eman says:

    Yes, this is indeed nice, but I would rather have a toggle button to Show/hide the left navigation pane.

    Sorry but I am a script ignorant.

    Any help would be greatly appreciated.

  5. fisk33 says:

    brilliant! worked like a charm. Thanks for help.

  6. eman says:

    This can be even more interesting.
    This script provides a toggle button to hide/show the left navigation panel.

    function toggle(flag) {
    var el = document.getElementById(“LeftNavigationAreaCell”);
    if ( el.style.display != ‘none’ ) {
    el.style.display = ‘none’;
    }
    else {
    el.style.display = ”;
    }
    }

    AND, if the upper title bar / Logo is also bothering you in some pages or document libraries, you can add this script, to hide it:

    .ms-globalTitleArea {
    display:none}
    .ms-navframe{display:none;}

  7. eman says:

    Sorry, something went wrong when I pasted the toggle script. Let’s try again:

    code:

    function toggle(flag) {
    var el = document.getElementById(“LeftNavigationAreaCell”);
    if ( el.style.display != ‘none’ ) {
    el.style.display = ‘none’;
    }
    else {
    el.style.display = ”;
    }
    }

    end code.

  8. eman says:

    I think I got it now:

    function toggle(flag) {
    var el = document.getElementById(“LeftNavigationAreaCell”);
    if ( el.style.display != ‘none’ ) {
    el.style.display = ‘none’;
    }
    else {
    el.style.display = ”;
    }
    }

  9. Mohammed says:

    Hi,

    I have copied and pasted the below code in Content Editor webpart but its not working.

    can you please help. Thanks in advance
    function toggle(flag) {
    var el = document.getElementById(“LeftNavigationAreaCell”);
    if ( el.style.display != ‘none’ ) {
    el.style.display = ‘none’;
    }
    else {
    el.style.display = ”;
    }
    }

  10. Priya says:

    It worked.. πŸ™‚ Thanks a TON!!!!

  11. Faisal says:

    there is another solution

    Master.FindControl("PlaceHolderLeftNavBar").Visible = false;

  12. Flashdazzler says:

    Hi Priya, how did you go about calling the function?.

    I just copied the function into a content editor and nothing happened. Any help with getting the Navigation to toggle will be appreciated.

    Thanks.

  13. Johnny says:

    Thanks! The pane is hidden on the left. Now how do I make my main area start on the left side of the page? Now I just have a big blank area on the left?
    Thanks.

  14. Eman Fatih says:

    @Johnny
    Try to use SharePoint Designer, which is now downloadable for free from Microsoft. Use it carefully though.
    With SharePoint Designer you have more power to manipulate your page. Just make sure to have a backup copy, in case you make a mistake. Luckily, if you have not closed SharePoint Designer, you can come back and undo even after you have saved/published your changes.

  15. Anonymous says:

    Thank you for the easy to follow instructions — I love when things work…like they are supposed to.

  16. JMQuickLaunch says:

    I have a question i added a content editor web part on my sharepoint portal homepage, and I entered this code:

    .ms-navframe

    {

    display:none;

    }

    howwever after this i choosse to make the content editor web part invisible, so now i no longer have access to any quick launch options, which you need to modify anything on the portal home page….what should i Do?

  17. faisal says:

    Hi,
    I am looking for the solution, to hide the left panel throughout, but only show in the documents..

    I simple use the css (display:none to hide the left panel).

  18. Anonymous says:

    I can’t get this to work… what am I doing wrong… I am looking for a solution that allows me to let a user show or hide web parts based on what they want to do. Any ideas?

  19. Deborah says:

    This doesn’t work for me. I am using SharePoint 2007. It is a team site.

  20. Anand says:

    Brilliant..quick and easy resolution…

  21. Jean says:

    that is a sweet, simple solution! thanks!!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s