Hide quick launch bar in SharePoint Online using CSS

Hey, folks, we will discuss here how to hide the quick launch bar (appears on the left side) in SharePoint online using CSS. The same code can be used to hide the quick launch in SharePoint 2016/2013.

Hide quick launch bar in SharePoint online

We can hide using CSS by using a script editor web part in SharePoint. But if you want to hide it for all the pages, you can put the CSS code on the master page or you can put in a different CSS file and refer to the master page in SharePoint Online or in SharePoint 2016/2013.

By default, you can see the quick launch bar appear like below in SharePoint.

Here I have a list known as “MyTestList”, and I want to hide the quick launch in that page only. So open the page where you want to hide quick launch. Then click on the Settings icon and then click on Edit page.

Then in the page Edit mode, click on “Add a web part” and then choose Script Editor web part from the “Media and Content” Category like below:

Then click on the “EDIT SNIPPET” button and paste the below code like below:

Below is the CSS code to hide quick launch bar in SharePoint Online or SharePoint 2013/2016/2019.

<style type="text/css">
#sideNavBox
 {
 display: none!important;
}
</style>

Then once you Save the page you can see the left navigation is hidden from the page like below:

Read some SharePoint tutorials below:

• SharePoint Online left navigation and top Navigation branding using CSS
• SharePoint online branding : Images styling by CSS and HTML for SharePoint Online or ShrePoint 2016/2013 sites
• Hide page title in sharepoint 2013 or SharePoint online using jQuery or css
• SharePoint Left Navigation or Quick Launch Navigation Menu Customization in SharePoint
• Create and Deploy a custom theme in SharePoint Online
• SharePoint Carousel Example
• How to create alerts in SharePoint document library or list

In this SharePoint tutorial, we have learned how to hide quick launch in sharepoint using CSS.