Company News

Hiding the Quick Launch in SharePoint 2013 on a single page

March 22, 2013

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.

image

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.

image

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

  1. Edit the page
  2. Add a web part.  Choose Script Editor from the Media and Content Category
  3. Choose Edit Snippet
  4. Paste in the CSS and watch the magic

And here it is in visuals…

image

image

image

And the result

image

9 Responses

  1. Brian says:

    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.

  2. Janani says:

    Thanks Sean! Works like a charm!

  3. Donnie says:

    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!

  4. Hector says:

    Man you rock! This is exactly what I needed! Thanks so much!

  5. Darrell G says:

    Dude you are the bomb… I wanted to mention that you can also user #titleAreaBox to remove the Global Navigation links

  6. […] Hiding the Quick Launch in SharePoint 2013 on a single page […]

  7. Sergio says:

    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!

  8. Karen says:

    You are the best! Thank you!!

  9. 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!

Leave a Reply

Sean Wallbridge

Sean Wallbridge-square-150x150

Beer Me!

Subscribe via Email

Categories

Powered by...

itgroove Corporate Profile
Connect With Us