SharePoint Left Navigation Branding using CSS

by
Leave request management and approval

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.

Complete SharePoint Training Course Just for $199 (Just for Today)

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.

Customize quick launch using css in SharePoint
Customize quick launch using css in SharePoint

You may like following SharePoint customization tutorials below:

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

    • >