Removing the Quick Launch & Keeping the Global Navigation Bar in SP Online to max Screen Real estate

[Deleted]

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

[#2]

If you are sticking with the classic UI, i'd recommend doing a bit of custom code (specifically CSS either by using the alternate CSS set on the /_layouts/15/ChangeSiteMasterPage.aspx or maybe injecting a usercustomaction)

#sideNavBox { display:none !important }
#contentBox { margin-left:20px !important; }

Those two lines are all you need, you just need a way to get them injected into the entire site.

[#3]

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

[#4]

If you want to do page by page, you can use the "Script Editor Web Part" and just paste those two lines in between a <style></style> tag.

If you use the "Alternate CSS", it should hypothetically apply to all pages.

[#5]

#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/