Hide the Quick Launch in SharePoint 2010
There is no way out of the box to hide the Quick Launch and the Tree View navigation in SharePoint 2010. Let´s say you have a team site and you really want to use the full width of the home page of this team site. How to do this?
The easiest way is to use the old school CEWP trick that worked even back in 2003, just add a the Web Part that now has the name Content Editor and add the following text in the HTML Source mode:
/*--Hide Quick Launch --*/
#s4-leftpanel{
display:none
}
.s4-ca{
margin-left:0px
}
You can also download and import this as a .dwp from here if you like.
The Master page that includes this navigation control does not longer have a table structure as it had in SharePoint 2007, which gives a cleaner and a well-formed markup HTML. The DIV elements in the master are floated to each other and have their positions defined by margins or a width, this is why I had to set the margin to zero for the s4-ca class, the wrapper for the content in the page. The value for the left panel ID can be set to not be displayed.
Trackbacks & Pingbacks
- Removing the left-hand navigation in SharePoint 2010 « Virtualize SharePoint, SharePoint Virtualization, Virtualization Tips
- Sharepoint 2007 - Page 3
- How to hide the Quick Launch Bar and recycle bin using a Content Editor Web Part | Inside the Oscillating Cranium of Sean Wallbridge
- Nilesh Rathod
- SP « ShowMeTheData
- The 10 Worst Mistakes in SharePoint Branding and UI Design « Branding « Sharepoint « The SharePoint Muse
- Hiding the Quick Launch Bar in SharePoint 2010 « Paul's Blog
- Quick and easy way to hide a SharePoint Quick Launch
- HueDesigner – Top 10 Mistakes in SharePoint 2010 Branding and UI Design
You are the man – I imported your .dwp and it worked perfectly. You saved my bacon
Thank you, thank you so much. I tried the html code but sharepoint would just add the code as text. However, the dwt worked!
Hi, Thanks heaps for this. Same with JCruz, copy and pasting the code didn’t work. I wonder why? But uploading the webpart worked. Cheers!
Hi guys, glad that you like my post.
The easiest way is to use my webpart for this, but if you need to copy & paste the code, you have to surround this with start and end, like this:
<style type="text/css"> /*--Hide Quick Launch --*/ #s4-leftpanel{ display:none } .s4-ca{ margin-left:0px } </style>In the editmode: Place the cursor in the content area and use the format text tab and click at edit HTML source.
Another alternative is to store the CSS or script in a text file in some library and just link the Content Editor.
Thanks a lot. You saved my day!
hi,
how shoul i do to hide the second level?
i have
site
page
page
page
site
page
page
and i just want
site
site
thanks so much!
Hi Maria, if you are using the ‘Night and day master’, you can use this:
.nightanday-menu ul.root ul.static a{
display:none
}
To not display for exampel Shared Documents under libraries and you are using the V4.master use this:
.s4-ql ul.root ul{
display:none
}
Cheers, Christian
Thank you so much… your .dwp saved my time…. Thanks alot
thanks for this, I spent 2 hours trying to figure this out
Alternatively,
Create a New Web Part Page
Select Full Page Vertical, this hides the Quick Launch.
Then add any web parts you need to the page.
I get a huge blank space on the top of the page after following these instructions. Yes the quick launch bar is gone and thats good – but does anyone have an idea on how to avoid that blank space on top?
Stupid question, what do I do with the .dwp file(how to upload to SP 2010 site)? Will this remove the Recycle Bin from sub-sites too?
Hi Dean, one way is to upload this web part to one specific page in SharePoint, like the startpage of a teamsite. The quicklaunch at this page will be hidden including the recycle bin. The quicklauch will be visible a other pages in this site. It will not remove it from sub-sites. Download the webpart and unzip. Go to the page, click at site action > edit page. Click insert web part in the ribbon and then upload. Add this web part on the page.
If you need to hide the quick launch at every pages in every sites on the web app you can include the CSS (see above) in a custom Css that are referenced from the masterpage that runs. It can also be included per page layouts, but how do this is another story (a bit longer story).
/ Christian
Thank you, thank you, thank you, thank you, thank you, thank you, thank you, thank you, thank you, thank you, thank you, thank you, thank you, thank you, thank you, thank you, thank you, thank you, thank you, thank you, thank you, thank you, thank you, thank you, thank you, thank you, thank you, thank you, thank you, thank you, thank you, thank you, thank you, thank you, thank you, thank you, thank you, thank you, thank you, thank you, thank you, thank you, thank you, thank you, thank you, thank you, thank you, thank you!!!! Life saver.
That´s a lot of thanks! Well back to Elins questions about a blank space. I have not seen this myself and would like to ask you what kind of page that you have this issue with and a bit more description when this happens? The CSS above would make the quicklaunch to disapear in common pages in SharePoint 2010.
/ Christian
I was getting the blank space but resolved the problem by using your code in the master page.
http://virtualizesharepoint.com/2011/03/31/removing-the-left-hand-navigation-in-sharepoint-2010/
Thanks alot, its really working. Actually I did the downloading and uploading of .dwp file. Thank you
I have been trying to find a solution to this FOR WEEKS!! I highly recommend uploading Christian’s custom webpart (the .dwp file) and follow the instructions above that Christian gave to Dean for uploading the new web part. It worked like a charm when I was having trouble with every other recommended solution!!!
Thanks for this CS! This works great for public sites for example.
Thank you Sir
Thank you!
Thank you Chris for this work around. I have a further requirement of only displaying a document library and its items (mostly folder structure) in a treeview, rest can all be hidden – is there a easy way to acheive this. I know there is a code-project webpart which can do this – but we want to refrain from using 3rd party codes.
Any help will be much appreciated. Thanks!
Sabs
Thanks! Your dwp file worked perfectly for me.
Awesome! Thank you! The margin-left part was the part I needed. Also to toggle the menu back on I then set margin-left to “”.
thanks a lot
Hi Chris,
Thanks for this post.
With your posts, I learn more and more of corev4.css. I am pretty sure once I make clear each part, I can customize it all.
Cheers.
Awesome, thanks.
Hi
I used this approach in mycorev4Override.css. I understand I could of also completed the task after enabling the publishing features on my site. I just wondered if anyone had tried this approach? The thing with .css is it gets a bit addictive. I was asked to hide the social features by a client in master page template and guess what, this is very easly done through .css.
Thanx
Ok, so I hide the Recycle Bin and All Site Content, etc. etc..
Now my question is: How do I undo this? If I wanted to bring it back for some reason… what are the steps to make them visible again?
Thanks for your help.
Or go to Site Settings, TreeView and untick the Show Quick Launch – you will still see the View All Site content link.
Thanks.
If I want to remove the web part to show the quick launch again how is that done as the webpart is not shown?
I utilized the css approach by including it into my style sheet override file and linking it to a master page. Now am wondering if I there is a way to remove the quick launch bar on selected pages.
Help would be greatly, greatly appreciated. Merci!
Thierry.
Thanks for the info, noticed that the css only works on a global level, if you wish to localize individual pages then definitely go with the web part.
Thanks
Thanks Cuzzy Bro
YAY! Thanks from me too!!
Any advice on doing the opposite? I want to display the left nav on pages.
This doesn’t work for me… I can upload the web part, but it doesn’t show. I can add a content editor webpart, paste the text in, and the left side disappears…until you save it. I get message saying the html might have been modified, which of course it is.
Okay, I made it work by uploading a text file with the code and linking to it in the web content part editor…
This was a huge help, thanks for saving me time!
Thanks for the tip! I tried doing it manually with a Content Editor, and uploading your pre-made file.
Both successfully hide the Quick Launch.. but both also remove the “List Tools” on the top ribbon (“Items” and “List”) and also removes the View selector along the top navigation hierarchy (“Site>Page>Current View”) so I can no longer switch between views or access any of the Item or List menus on the top ribbon.
I need to hide the Quick Launch only on this one page, but need those options (especially the ability to change views) still available.
Any suggestions?
Thanks!!