SharePoint Online left navigation and top Navigation branding using CSS

This SharePoint tutorial, helps you to customize beautiful global navigation or top navigation menu and current navigation (left navigation) in the SharePoint site within a very few seconds using CSS in SharePoint Online/2013/2016.

We will see how to implement left navigation and top navigation branding using CSS in SharePoint Online or SharePoint 2013/2016.

SharePoint Online top navigation branding using CSS

Now we will see how to branding the SharePoint global navigation in a step by step manner.

Step-1: Create a few terms in the SharePoint Online global navigation.

Here, I have added a few terms in the SharePoint navigation such as “Laptop”, “Mobile”, “Tablet”, “Television”, “Water filter” and “HeadPhone”.

The global navigation page will look like below.

Before going to step 2, I want to tell you one thing. Sometimes the global navigation items are not populating in our SharePoint site so for that what we should do, we will see now.

So for that, we should activate two feature in our SharePoint site.

SharePoint Server Publishing Infrastructure feature: To activate the

“SharePoint Server Publishing Infrastructure feature” first go to the Site Settings -> Site Collection Administration. 

Then click on “Site Collection features” which is present under the “Site Collection Administration”. After that search for the line “SharePoint Server Publishing Infrastructure” in the “Site collection feature” page and activate it.

SharePoint Server Publishing feature: For activate the “SharePoint Server Publishing feature” first go to “Site Actions” -> “Manage Site Features”. Then in the “Site Features” page activate “SharePoint Server Publishing” feature.

After activating both the feature we will see all the navigation term in the SharePoint site.

Step-2: Save the below CSS code and upload it to SharePoint site “Site Assets” document library.

/*** Top Navigaion Menu Items container DIV ***/
.ms-core-listMenu-horizontalBox {
background-color: #04a504;
}
/*** Top Navigaion Static Menu Items ***/
.ms-core-listMenu-horizontalBox li.static {
border: 1px solid transparent;
background: url("https://i0.wp.com/www.spguides.com/_layouts/Images/selbg.png") repeat-x left top;
}
/*** Top Navigaion Static Menu Item Links ***/
.ms-core-listMenu-horizontalBox li.static > .ms-core-listMenu-item {
color: #ffffff;
white-space: nowrap;
border: 1px solid transparent;
padding: 10px;
padding-left: 20px;
margin-right: 1px;
}
/* Top Navigation static Menu Item Links Hover Style */
.ms-core-listMenu-horizontalBox li.static > .ms-core-listMenu-item:hover {
background: url("https://i0.wp.com/www.spguides.com/_layouts/Images/selbg.png") repeat-x left top;
background-color: #048930;
color: #000000;
text-decoration: none;
}
/*** Top Navigaion Static Menu Selected **/ .ms-core-listMenu-horizontalBox li.selected a.selected { / Glass Effect Shade Image / background: url("https://i0.wp.com/www.spguides.com/_layouts/Images/selbg.png") repeat-x left top; / Glass Effect Shade Image */
background-color: #09c451;
color: #fff;
text-decoration: none;
border: 1px #134072 solid;
padding: 10px 10px;
margin: 1px;
}
/*** Sub-Menu/Flyover/Dynamic Menu Container ***/
ul.dynamic {
background-color: #7fe076;
border: 1px solid #fff;
padding: 1px;
margin-top: 5px;
}/*** Sub-Menu Items (HyperLinks) Style ***/
ul.dynamic .ms-core-listMenu-item {
background-color: #3de568;
padding: 10px 20px 10px 20px;
white-space: nowrap;
}/*** Sub-Menu Items (HyperLinks) Hover Style ***/
ul.dynamic .ms-core-listMenu-item:hover {
background-color: #0fd82f;
color: #fff;
}/** Hide "Edit Links" ***/
.ms-listMenu-editLink {
display: none !important;
}

Step-3: Open the “SharePoint designer”. Find the “Seattle.html” in the Master page. Right, click on it. Then click on “Edit in Advanced Mode“.

Step-4: Now the “Seattle.html” page will come. Search for the

<!--PS: Start of READ-ONLY PREVIEW (do not modify)--><link href="https://onlysharepoint2013.sharepoint.com/_layouts/15/1033/styles/corev15.css" type="text/css" rel="stylesheet"/><link href="https://onlysharepoint2013.sharepoint.com/_layouts/15/1033/styles/searchv15.css" type="text/css" rel="stylesheet" /><!--PE:End of READ-ONLY PREVIEW-->

Do not change any things. Just add the following line below it.

<!--SPM:<SharePoint:CssRegistration Name="https://your site/SiteAssets/master.darkgreen.css" runat="server" After="corev15.css" />-->

Now save the seattle.html page in the designer page.

Open the SharePoint site. In the SharePoint global navigation, we will get all the term with branding. The SharePoint site page global navigation will look like below.

SharePoint online left navigation branding using CSS

Now we will see how to customize the SharePoint site quick lunch menu or current navigation menu. Follow the below steps to create quick lunch navigation in SharePoint site.

Create some of the current navigation items in the SharePoint site.

Save and upload the below CSS code to SharePoint “Site Assets” library.

.ms-core-listMenu-verticalBox UL.root > LI > .menu-item{ 
font-weight:bold; 
background-color:#0d9624; 
color:#ffffff; 
border-bottom-color:#41cc58; 
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:#f70419 !important; 
text-decoration:none; 
} 
.ms-core-listMenu-verticalBox > ul.root > li.selected > a { 
background-image:none; 
background-color:#ff021b; 
color:#ffffff !important; 
} 
.ms-core-listMenu-verticalBox > ul.root > li > a:hover { 
background-image:none; 
background-color:#f90212; 
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: #ef0212 !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; 
}

After uploading successfully go to the “SharePoint designer-> Master pages -> Seattle.html. Edit the HTML file in Advanced mode page same as step-3.

Search for the below line in the HTML head section in the “Seattle.html” page.

<!--PS: Start of READ-ONLY PREVIEW (do not modify)--><link href="https://onlysharepoint2013.sharepoint.com/_layouts/15/1033/styles/corev15.css" type="text/css" rel="stylesheet"/><link href="https://onlysharepoint2013.sharepoint.com/_layouts/15/1033/styles/searchv15.css" type="text/css" rel="stylesheet" /><!--PE:End of READ-ONLY PREVIEW-->

Do not change the above line. Add the following line below it. Give the CSS file path which is present in the “Site Assets” library. My css file name is “CurrentNav1.css”

<!--SPM:<SharePoint:CssRegistration Name="https://onlysharepoint2013.sharepoint.com/sites/Raju/SiteAssets/CurrentNav1.css" runat="server" After="corev15.css" />-->

Save and publish the designer page. Directly go to the SharePoint site page. You can notice that the quick lunch customization is reflecting in the SharePoint site. The SharePoint site page will look like the below screenshot.

You may like following SharePoint branding and customization tutorials:

• SharePoint Carousel Example
• SharePoint Branding: Displaying dynamic contents into the page using JavaScript and REST API in SharePoint Online or SharePoint 2016/2013
• SharePoint Online branding: Creating Accordion Widget or Collapsible panel with Bootstrap
• How to Create a Tabbed Menu using Bootstrap and HTML in SharePoint 2016/2013
• SharePoint online branding: Images styling by CSS and HTML for SharePoint Online or SharePoint 2016/2013 sites
• SharePoint Left Navigation or Quick Launch Navigation Menu Customization in SharePoint Online/2016/2013
• How to Make image Map and use in SharePoint Online/2016/2013

I hope, this SharePoint will help us to know about how to add the branding in SharePoint global navigation or top navigation in SharePoint using CSS.

By going through the article we also knew how to branding the SharePoint site current navigation/ quick lunch/left navigation using CSS in SharePoint Online/2013/2016.