SharePoint Left Navigation Branding using CSS

In this SharePoint branding tutorial, we will discuss, SharePoint 2013 left navigation branding or sharepoint left navigation menu customization using css in SharePoint Online/2013/2016.

The default SharePoint left navigation or quick launch does not look attractive. Sometimes, you may need to customize the left navigation for a new look.

SharePoint left navigation customization using CSS in SharePoint

We can customize the left navigation using CSS in SharePoint. Below is the CSS code for SharePoint left navigation branding.

Save the below file in .css extension and you can give the reference through the SharePoint master page like below:

<link rel="stylesheet" type="text/css" href="/sites/Test/Style%20Library/customCss.css">

<Style>
.ms-core-listMenu-verticalBox UL.root > LI > .menu-item{  
  font-weight:bold;  
  background-color:#5482AB;  
  color:#ffffff;  
  border-bottom-color:#ffffff;  
  border-bottom-style:solid;  
  border-bottom-width:1px;  
  min-height:25px;  
  padding-top:5px;  
  padding-left:10px;  
  font-size:12px;  
  font-family:Arial, Helvetica, Sans-Serif !important;  
 }  
 .ms-core-listMenu-verticalBox > ul.root > li.static > ul.static > li.static > a:hover {  
   color: #ffffff !important;  
   background-color:#D95E00 !important;  
   text-decoration:none;  
 }  
 .ms-core-listMenu-verticalBox > ul.root > li.selected > a {  
    background-image:none;  
    background-color:#D95E00;  
   color:#ffffff !important;  
 }  
 .ms-core-listMenu-verticalBox > ul.root > li > a:hover {  
    background-image:none;  
    background-color:#D95E00;  
   color:#ffffff !important;  
   text-decoration:underline;  
 }  
 .ms-core-listMenu-verticalBox > ul.root > li.static > ul.static > li > a {  
  font-size:12px;  
  padding-left:10px;  
  font-family:Arial, Helvetica, Sans-Serif !important;  
 }  
 .ms-core-listMenu-verticalBox > ul.root > li.static > ul.static > li > a.selected {  
   background:none;  
    color: #D95E00 !important;  
   background-color:#ffffff !important;  
    text-decoration: none;  
    border: 1px #fff solid;  
    font-weight:bold;  
 }  
 .ms-core-listMenu-verticalBox a.selected  
 {  
  border: 1px #fff solid !important;  
 }  
 .ms-core-listMenu-verticalBox UL.root UL  
 {  
  margin:0px 0px 10px 0px !important;  
 }  
</Style>

For testing purposes, we can also apply this css inside SharePoint Script Editor Web part and check the result as per the below screenshot.

Hide quick launch in SharePoint Online

Let us see, how to remove or hide quick launch or left navigation in SharePoint Online or SharePoint 2013/2016/2019.

We will see how to use CSS, javascript or jQuery to remove quick launch or left navigation in SharePoint Online/2013/2016/2019.

Quick launch bar is a useful feature in SharePoint where you can navigate to different pages easily, but sometimes the client does not want to see that on the left side of the SharePoint page.

We can remove that by using CSS and also we can remove that by modifying the master page.

If you will modify through CSS code, then this is going to be page-specific, mean which page you want to hide, you need to write the CSS code in that page.

Remove Quick Launch in SharePoint

First, we will see, how to remove the quick launch in SharePoint using CSS. We can write the below CSS code in the page using a script editor web part to hide the quick launch bar.

<style>
#sideNavBox { display: none }
</style>

Here sideNavBox is the <div> id of the SharePoint Quick launch bar or left navigation.

Once you put the above code, it will hide the quick launch from the page.

But the content will be in the same place, means there will be space will come in that place. If you want to move the content box a bit left then you can give some margin-left to the content box like below:

<style>
#sideNavBox { display: none }
#contentBox { margin-left: 25px }
</style>

Here contentBox is the id of the Content box.

On whatever page you want, you can put the above code in the Script editor web part.

Hide Quick Launch in SharePoint (master page)

Rather than putting the code in every page, you can put the code on the master page itself. If you put in the master page, then whatever page inherit the master page, will reflect those changes.

By default Team site uses seattle.master page. Ok here is one point, before doing any changes to the master page, please take a backup of the page and then modify on the page.

You can edit the master page using Sharepoint 2013 Designer and then put the below code inside the <body> tag.

<style>
#sideNavBox { display: none }
#contentBox { margin-left: 25px }
</style>

Hide quick launch left navigation from home page in SharePoint using jQuery

Recently I got one requirement to hide the left navigation from the SharePoint site home page, but in other pages, the left navigation quick launch should come. And this should be done without using code by using JavaScript or jQuery.

By default left navigation will appear like the below:

We need to add the code by using a Script editor web part.

Open the page where you want to hide the left navigation, edit the page, and then from the ribbon click on Add web part and from Media and Content and then select Script Editor web part.

Then put the below code:

<script language="javascript" type="text/javascript">
ExecuteOrDelayUntilScriptLoaded(retrieveListItemsInclude,'sp.js'); 
function retrieveListItemsInclude()
{
document.getElementById("sideNavBox").style.display='none';
}
</script> 

Then Save the page, Now the left navigation will not come like below:

This is how to hide quick launch in SharePoint Online or SharePoint 2019/2016/2013.

How to hide Notebook link from SharePoint quick launch

Let us see, how to hide Notebook and Site contents from quick launch in SharePoint Online or in SharePoint 2013/2016/2019.

We will see how by deactivating a feature we can hide Notebook from quick launch in SharePoint Online.

By default, you can see the Notebook option looks like below in a SharePoint Online or SharePoint 2013/2016 site.

Step 1: Login to your SharePoint site -> Site settings page->Site Actions-> Click on Manage site features

Step 2: Next, there is a feature called site Notebook so click the button to deactivate it. Next see your Notebook link will disappear from quick launch.

SharePoint left navigation menu customization example

Let us see another example of sharepoint left navigation menu customization or sharepoint 2013 left navigation menu customization. The same steps are applicable to sharepoint online left navigation menu customization and sharepoint 2016 left navigation menu customization.

Here we will discuss how we can create custom left navigation (quick launch) using out-of-box features without using any custom solution in SharePoint 2013.

As we know that there are a lot of ways of creating left navigation, here you will see a new approach for creating a custom left navigation in SharePoint 2013. This is the same way you can customize a quick launch in SharePoint 2016 and SharePoint 2019.

Scenario: There can be a requirement where we have to create multiple views of the same list and the names of the views are given on the left-hand side like the left navigation. And when clicked on the links on the left navigation we get directed to their respective pages on the site.

SharePoint 2013 left navigation menu customization

Step-1: Creation of lists

1. Here I have created a custom list (Information List) and following three views on the list viz. Personal Information, Project Information, Accounts Information.

Step-2: Creation of Pages

1. Click on the gear at the top right of your site and Add a page, we are creating pages in the Pages library and not Site Pages.

2. Give the Name of the Page (I would recommend that the Name of the page should be the Name of view you created in the Information List) and Create.

3. Create the pages for all the Views in the List whose link you need in the left navigation.

4. Once the page is created, you see a blank page now we need to add a layout “TwoColumnLeft” to the page

5. After Adding the Layout we see two zones Main Zone and a Left Zone.

Step-3: Adding Custom List on created pages as web parts

1. Add Information List as a web part in the Main Zone. Click Add Web part and select the List under Apps Categories.

2. Once the Information List is Added Edit the List web part and Select a default view for the page.

For Example: If you are on a Personal Information page Select the Personal Information view on the web part.

3. In the Toolbar dropdown select No toolbar to give a nice look of just information, as you please, apply the changes and check-in the changes made on the page.

Step-4: Creation of Links List

1. Go to Add an App and select the Links template.

2. Create a Links list (Test Navigation) and added a Link (item) to the list where the URL has the complete URL of the created Page and the Description is the Title of the Left Navigation link which will be displayed on the Left Navigation.

3. Do this for all the links you want to show in the left navigation and complete the creation of the Navigation Links.

Step-5: Adding Links List on created pages as web parts

1. As we added the Information list on the Main Zone of the pages add Test Navigation to the Left Zone of all the pages.

2. After Adding Test Navigation in the Left Zone and checking in the changes on the page the page will look like this

Step-6: Giving References of .js and .css files

1. The Left Navigation is ready now we have a .js file and a .css file whose reference we need to give on the Test Navigation Web part to Make it appear like left navigation.

2. Go to Test Navigation web part and edit Web part.

3. Add the JS reference in the JS link section of the window and the CSS is referred from within the JS file.

3. Add the following JS link in the JS Link section “~sitecollection/SiteAssets/LeftNavigation.js”

4. Make sure the hierarchy of the site collection and web is correct in the JS reference.

5. Apply the Changes and your Test Navigation links.

6. Follow the same steps for the remaining pages you created and you will see the Information List’s Views will appear as follows

7. Note the .aspx page in the address bar.

This creates your Custom Left Navigation or customizes quick launch in SharePoint 2013 or SharePoint 2016.

Download Code Here

I hope this SharePoint 2013 customization tutorial explains how to customize SharePoint 2013 left navigation or quick navigation in SharePoint 2013/2016/Online.

Add Recycle Bin link in quick launch in SharePoint

Let us see, how to add recycle bin link in the quick launch or left navigation in SharePoint 2013.

We will enhance the branding and customization of SharePoint master page by adding Recycle bin as part of left navigation across the site.

The same approach we can follow to add recycle bin to quick launch in SharePoint Online or SharePoint 2016.

In SharePoint 2013 we don’t see Recycle bin as part Left Navigation if the user wants to see the deleted item, he/she needs to perform below steps:

• Click SharePoint Site setting gear icon
• Select Site content
• Click on Recycle bin on site content page

This process involves 4 mouse clicks and it is a tedious process if the portal is a dedicated content management portal.

Add Recycle Bin link in quick launch in SharePoint 2013

Here we will add the code inside a master page in SharePoint. Either you can create a new custom master page or you can modify the existing master page.

Follow the below steps to add Recycle bin in SharePoint 2013 left navigation:

• Open the SharePoint site in SharePoint Designer 2013

• Navigate to Master page part of All Files -> _catalogs
• Identify your custom master page and check out in advanced mode

Look for <asp:ContentPlaceHolder id=”PlaceHolderQuickLaunchBottom” runat=”server”>
Copy the below code and paste right above that div tag

<SharePoint:SPSecurityTrimmedControl PermissionsString="ManageWeb" runat="server">
<style type="text/css">
.recDivTopMargin
{
margin-top:-45px;
}
</style>
<script type="text/javascript">
document.getElementsByClassName('root ms-core-listMenu-root static’)[1].innerHTML += '<li class="static recDivTopMargin"><a class="static menu-item ms-core-listMenu-item ms-displayInline ms-navedit-linkNode" href="/_layouts/15/RecycleBin.aspx"><span class="additional-background ms-navedit-flyoutArrow"><span class="menu-item-text">Recycle Bin Data</span></span></a></li>’;
</script>
</SharePoint:SPSecurityTrimmedControl>

Once you save the page output will be as follows:

Before adding the code block:

After Adding code block:

In the above code block we are identifying the element “root ms-core-listMenu-root static” and then we are adding a new element to redirect the user on to Recycle bin data page.

Advantages:

• This reduces the no.of click to user.
• By adding this code block in a master page a user can navigate easily on to recycle bin data page.
• A master page can be maintained by any developer.

I hope this SharePoint tutorial helps to learn how to customize quick launch or left navigation using css in SharePoint Online or SharePoint 2013/2016.

You may like the following SharePoint customization tutorials below:

• SharePoint Online Image Slider or Carousel Example
• Different ways to show/hide SharePoint List form fields
• SharePoint 2013 Left Navigation or Quick Launch Menu Customization
• Change Column Order in List Forms (new/edit/display) in SharePoint 2013/2016/Online without using Code