May 16 2017 09:24 AM
May 16 2017 09:24 AM
Hi SharePoint Experts,
I am a business guy that is trying to develop my department's SharePoint Online site. I understand the benefits, and know the basics of the "Quick Launch menu" links (navigation specific to the site) and top "Navigation Menu Bar" links (global navigation visible across all site pages).
I want to keep my Navigation Menu Bar across the top (which I built like a "mega menu," to enable users to jump from site to site). However, on some of my SPO sub sites, I want the ability to completely hide the left side Quick Launch in an effort to maximize my page's horizontal real estate.
If I go to Site Settings --> Navigation Elements --> Uncheck the box for "Enable Quick Launch"......then it removes all of the quick launch links on the sub site with the exception of Site Contents. And given that site contents still shows (despite disabling quick launch), my overall page layout did not shift to the left to cover where the Quick Launch used to be.
Note, I am doing this all out-of-the-box. I am not a code writer and would HUGELY appreciate if you could provide a recommendation for me to 1) completely hide the Quick Launch, 2) have my site layout shift left and use the full horizontal screen, and 3) allow for my Global Navigation Launch to be unaffected.
Thank you in advance!
Doug Doerhoff
May 16 2017 10:09 AM
May 16 2017 10:29 AM
Thanks for the tip @Brent Ellis! Is there a way for me to put that code on my page easily with tools that I have out of the box? If so, can I add and remove it easily; if I want the quick launch back at some point in the future?
Thanks again,
Doug
May 16 2017 11:15 AM
May 18 2017 08:52 AM
#sideNavBox { display:none !important }
#contentBox { margin-left:20px !important; }
It is common for non Front-enders to whack in ``!important`` because they are fighting CSS load order.
But you have now hijacked the DOM elements and no other App or CSS style can easily restore them.
Just increase Specificity so it doesn't matter in which order your CSS is applied
#sideNavBox#sideNavBox { display:none}
#contentBox#contentBox { margin-left:20px}
By adding even more Specificity any other code can still override you changes
After Selectors:
https://code.tutsplus.com/tutorials/the-30-css-selectors-you-must-memorize--net-16048
Specificity is the most powerfull CSS concept:
https://www.smashingmagazine.com/2007/07/css-specificity-things-you-should-know/