Hiding left navigation in SharePoint 2010 with CSS

       Even though the left navigation in SharePoint 2010 is very useful, most of the customers doesn't like to have it for all the pages. To hide the left navigation of the page forever, one has to make some changes in the Master page. But if the requirement is to hide left navigation in a particular page, it is always a better idea to use styles. In this post we will transform the page as in figure 1 with left navigation to look like figure 7 without left navigation.

Figure 1

Step 1: Create a dedicated Document library to host the site scripts and styles as mentioned in the post here.

Step 2: Open notepad on your computer and paste the below code and save as plain text file. Add this text file to the library created in step 1. Unless the Masterpage is modified, the below code works. 

Step 3: In the page where you want to hide the left navigation, from Site Actions menu select edit page.

Figure 2

Step 4: Once in edit mode, click at the beginning of the page, in my case I have clicked in the beginning of "Welcome to you site!". Now, from the top banner select "Insert" and then click on "WebPart". 

Figure 3

Step 5: Scroll down and select "Media and Content" and then click on "Content Editor" and click Add

Figure 4

Step 6: Now, click on the little arrow located towards the right of content editor webpart and select "Edit Webpart".

Figure 5

Step 7: After the previous step a small options toolbox is displayed towards the right side of the page. Copy the link of the file that is created and saved in steps 1 & 2 as showed in figure 6.1, and paste it in the first box located towards the right of the page as shown in figure 6.2. Change the "Chrome Type" to "None" and click Apply and then "Save & Close" the page.

Figure 6.1

Figure 6.2

8. After Completion of the above step, the left navigation of the site will be hidden as shown in figure below.

Figure 7