Kwizcom Forms

Customize suite bar in SharePoint Online/2013/2016

sharepoint 2013 suite bar branding

This SharePoint online tutorial explains how we can customize suite bar sharepoint 2013/2016 or SharePoint online. Here I would like to walk you through one of the important options to change the default name “SharePoint” appear as part of SharePoint Suite Bar control in both SharePoint 2013, SharePoint 2016 and SharePoint Online.

My client doesn’t want to see the look and feel of the SharePoint any place across the application as part of that I need to change the default name/title of the team site. While I was doing that I thought of extending the same to SharePoint Online also.

SharePoint deveopment training course

To maintain the consistency of this change across the site we should make this change in SharePoint MasterPage. Let us see how we can achieve this in both SharePoint on-premise and SharePoint Online (SPO).

Customize suite bar in SharePoint 2013 /2016 on-premise site

You can follow below steps to customize suite bar sharepoint 2013 or SharePoint 2016. We can add text in the SharePoint suite bar and also we can add an image in the suite bar. Please perform the below steps:

SharePoint 2016 change suite bar text

Open the SharePoint site using SharePoint designer 2013.

customize suite bar sharepoint 2016
customize suite bar sharepoint 2016

Navigate to Master page part of All Files -> _catalogs

Identify your custom master page and check out in advanced mode and Look for below tag:

customize suite bar sharepoint online
customize suite bar sharepoint online
<div id="suiteBarRight">

Copy the below code and paste right above that div tag.

sharepoint 2016 change suite bar text
sharepoint 2016 change suite bar text
<script type='text/javascript' src='//code.jquery.com/jquery.min.js'></script>
<script type="text/javascript">
var suitebar = $("#suiteBar");
var branding = suitebar.find(".ms-core-brandingText");
branding.html("<b>EnjoySharePoint Team</b>");
</script>

SharePoint 2016 Add Logo in Suite Bar

// Implementing with a LOGO
Instead of text, if you want to add a logo in the SharePoint suite bar, you can add the below code.

<script type='text/javascript' src='//code.jquery.com/jquery.min.js'></script>
<script type="text/javascript">
var suitebar = $("#suiteBar");
var branding = suitebar.find(".ms-core-brandingText");
branding.html("<a href='/'><img src='/SiteAssets/EnjoySharePointTeam.PNG' height='30px'></a>");
</script>

The output will be as below:

sharepoint online change suite bar text
sharepoint online change suite bar text

You can see how sharepoint online suite bar looks like after adding a logo into it.

sharepoint 2013 change suite bar text
sharepoint 2013 change suite bar text

Customize SharePoint Online site suite bar

Follow the same set of steps like as in SharePoint on-premise apart from the code block. Use the below code block to ensure the change in SharePoint online.

SharePoint Online change suite bar text

We can write the below script to change suite bar text in SharePoint Online

<script type="text/javascript">
var companyLogo=document.getElementById("suiteBrandingBox");
companyLogo.innerHTML = "EnjoySharePOint Team";
</script>

SharePoint Online Add Logo in Suite Bar

// Implementing with a LOGO
Instead of text, if you want to add a logo in the SharePoint online suite bar, you can add the below code.

<script type="text/javascript">
var companyLogo=document.getElementById("suiteBrandingBox");
companyLogo.innerHTML = "<a href='/'><img src='/SiteAssets/EnjoySharePointTeam.PNG' height='30px'></a>";
</script>

You may like following SharePoint customization tutorials:

Hope this SharePoint tutorial explains how to customize suite bar in SharePoint Online/2013/2016. Also, we will discuss how to change suite bar text in Office 365 SharePoint Online and SharePoint 2013/2016.

Check out Best Alternative to InfoPath -> Try Now

free sharepoint training

SharePoint Online FREE Training

JOIN a FREE SharePoint Video Course (3 Part Video Series)

envelope
envelope

About Krishna Vandanapu

I am Krishna.Vandanapu a SharePoint architect working in IT from last 13+ years, I worked in SharePoint 2007, 2010, 2013, 2016 and Office 365. I have extensive hands on experience in customizing SharePoint sites from end to end. Expertise in SharePoint migration tools like Sharegate, Doc Ave and Metalogix. Migrated SharePoint sites from SharePoint 2007 to 2010 and 2010 to 2013 several times seamlessly. Implementing CSOM with Microsoft best practices. Spent quality time in configuring SharePoint application services like User Profile, Search, Managed Meta data services etc. Now exploring SharePoint Framework and SharePoint 2019

View all posts by Krishna Vandanapu →
  • I am using SharePoint 2019, which has the Modern and the Classic page options. This script does not work in the 2019 platform. Do you know if there are changes to the Div ID’s on the 2019 pages? Thanks