Last active
February 28, 2017 21:31
-
-
Save jamesnotjim/bb3abd85985b3f1dacec81c90784bdbb to your computer and use it in GitHub Desktop.
Hide SharePoint QuickLaunch when below 1024px
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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