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 purpose, we can also apply this css inside SharePoint Script Editor Web part and check the result as per below screenshot.

You may like following SharePoint customization tutorials below:

• SharePoint 2013 Add Recycle Bin link in the quick launch
• Change default name in Suite Bar in SharePoint 2013/2016 and SharePoint Online
• New Delegate Control additions to the SharePoint 2013
• Accordion Style Left Navigation using JQuery and CSS in SharePoint 2010
• SharePoint Online Image Slider or Carousel Example
• Create Calendar Overlays Using Multiple Calendar Apps in SharePoint 2013 Online
• Create Calendar Overlays Using Single Calendar App in SharePoint 2013 Online
• Hide Edit Links option in SharePoint 2013/2016/Online
• 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

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