Sean Wallbridge
Don’t mind me. I reach for this enough times that it was worth sharing again. I’m sure there will be dozens of other posts out there with similar CSS but I’m hoping we provide a little twist, at least if you are using the stock Master Pages in 2013 (Oslo/Seattle, etc.) as we find the padding to be a bit much as well on pages where you typically want to remove the quick launch (dashboards/user presentation spaces). Note, I’m not going to cover how to apply this across all of your pages (Master Pages, CSS style sheets, whatever your poison), this is for those “one off” occasions.
Interestingly enough (and yay!) Web Part Page templates (you know, when you create a document library and choose Web Part Page as the content type) now include the Quick Launch by default – previous versions it was pulled out meaning sometimes we had to put it back in … grrr…)
Of course, users can quickly “Focus on Content” on a page as well but that will be just for that browser session.
The focus on Content icon in SharePoint 2013 also does the trick but it doesn’t “stick”.
So here we go…
Straight to the CSS
If you already know how to add a Snippet (yep, way nicer in 2013 than adding a content editor web part (CEWP) and then setting its chrome – this is faster and easier), then here is the straight goods.
Hide the Quick Launch (No Frills)
<style type="text/css">
#sideNavBox {
display: none;
}
#contentBox {
margin-left: 0px;
}
</style>
Hide the Quick Launch (and also remove some of the excess padding)
<style type="text/css">
#sideNavBox {
display: none;
}
#contentBox {
margin-left: 0px;
}
.ms-webpartPage-root {
border-spacing: 5px;
}
.ms-core-tableNoSpace.ms-webpartPage-root > tbody > tr > td > table
{
padding: 5px !important;
border-collapse: collapse;
}
</style>
How to Hide the Quick Launch
- Edit the page
- Add a web part. Choose Script Editor from the Media and Content Category
- Choose Edit Snippet
- Paste in the CSS and watch the magic
And here it is in visuals…
And the result
Good day,
When we were operating on SharePoint 2007 I actually had an easier time doing this. Now with 2013, I follow the steps exactly and it only hides the QL, it doesn’t move the page/list to the left hand side of the browser window.
In fact I am having trouble with a lot of my scripts and formulas from 2007 not working in 2013.
I do not have SharePoint designer, so this is my only option.
What do you think is preventing the page from moving to the left.
Thanks Sean! Works like a charm!
Thanks for the great CSS solution! I had a request from a user to do just this… found your code… got it done.. all before my first cup of coffee ran dry.
Thanks Again!
Man you rock! This is exactly what I needed! Thanks so much!
Dude you are the bomb… I wanted to mention that you can also user #titleAreaBox to remove the Global Navigation links
Your code worked a treat.. ive been reading a lot of scripts people have posted and for one reason or another, they did not work. thanks!
You are the best! Thank you!!
Excellent post – one note though – I found the ‘flush to the left’ makes the page look weird. Make the Content Box margin 25px and it lines right up with the logo!
Thank you very much for this, i dont really comment thanks unless it works well like a charm, so here it goes. Thanks for this buddy.
Hi, I used this CSS and it worked perfectly until I go to save my page. When I save my page, my entire page disappears and it’s just entirely blank except for items outside of the content box. Any thoughts?
Sorry quick change to my comment, I realize now that my page is not blank but that all of my content has been pushed to the very bottom of the page. I can’t seem to get it to go back to the top of the page.
This code works like charm 🙂
Can you tell me a way to add custom Links to the same area instead of the Quick Launch?
Say I want to add Google and Facebook as links in my left navigation which is not in Quick launch.
Thanks a lot , man! works like a charm..