Change default name in Suite Bar in SharePoint 2013/2016 and SharePoint Online

sharepoint 2013 suite bar branding
Check out Best Alternative to InfoPath


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 option to change the default name “SharePoint” appear as part of SharePoint Suite Bar control in both SharePoint 2013,  SharePoint 2016 and SharePoint Online.

Scenario  Updating Suite Bar title with “EnjoySharePoint Team”

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


Where & Why we should do?

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 SharePoint suite bar and also we can add image in the suite bar. Please perform the below steps:

SharePoint 2016 change suite bar text

  1. Open the SharePoint site using SharePoint designer 2013.

    change suite bar sharepoint 2013
    change suite bar sharepoint 2013
  2.  Navigate to Master page part of All Files -> _catalogs
  3. Identify your custom master page and check out  in advanced mode

    customize suite bar sharepoint 2013
    customize suite bar sharepoint 2013
  4. look for <div id=”suiteBarRight”>
  5. Copy the below code and paste right above that div tag

    add link to suite bar sharepoint 2013
    add link to suite bar sharepoint 2013

<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:

change suite bar Title sharepoint 2013
change suite bar Title sharepoint 2013

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

sharepoint 2013 suite bar branding
sharepoint 2013 suite bar branding

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:

<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>


Hope this helps, happy customization in SharePoint !!!


You May Also like the Following SharePoint Online Tutorials:

About Krishna Vandanapu

I am Krishna.Vandanapu a SharePoint architect working in IT from last 12 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 →