Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
Hide SharePoint QuickLaunch when below 1024px
<style type="text/css">
@media screen and (max-width: 1024px){
#sideNavBox {
display: none;
}
#contentBox {
margin-left: 36px;
margin-right: 36px;
}
.ms-fullscreenmode #contentBox
{
margin-left: 0px;
}
div.welcome-content {
display: none;
}
}
</style>
Owner

jamesnotjim commented Feb 28, 2017 edited

What's this, then?

SharePoint's Quick Launch toolbar (i.e. left-hand navigation column) takes up a lot of space, especially on small screens, tablets, and phones. Assuming your page is well designed, it can easily be made redundant. So why not hide it? CSS media queries make that easy. The one above hides the Quick Launch whenever your browser width drops below 1024px.

How do I use it?

Just drop a Script Editor Web Part onto you page (you might want to name it CSS or CSS/Media Queries), then click the Edit Snippet link, paste in the code above, and save your changes.

Other Approaches

If you have no use for the Quick Launch at any viewport size, you can hide it altogether with this bit of code: https://gist.github.com/jamesnotjim/22dc60a3b8618ce74933bd7f12ad4ad2.

Cool! Thanks! Can I buy you a coffee or something?

You're welcome. And, sure. That'd be great: https://Ko-fi.com/A275NOZ

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment