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 inside 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.

hide quick launch sharepoint 2013
hide quick launch sharepoint 2013

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.

hide quick launch sharepoint 2013 css
hide quick launch sharepoint 2013 css

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

hide quick launch sharepoint 2013 online
Hide quick launch sharepoint 2013 online

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

hide quick launch sharepoint 2013 page
Hide quick launch sharepoint 2013 page

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

<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:

hide quick launch sharepoint online
Hide left quick launch sharepoint 2013

Read some SharePoint tutorials below:

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

  • >