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.
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).
SharePoint Tutorial Contents
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:
Open the SharePoint site using SharePoint designer 2013.
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:
Copy the below code and paste right above that div tag.
// 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.
The output will be as below:
You can see how sharepoint online suite bar looks like after adding a logo into it.
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.
We can write the below script to change suite bar text in SharePoint Online
// 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.
You may like following SharePoint customization tutorials:
- How to hide Notebook and Site contents from quick launch in SharePoint Online
- Change site collection title, description, logo, and site collection administrator in SharePoint
- Left Navigation or Quick Launch Customization or Branding using CSS in SharePoint Online/2013/2016
- SharePoint Online Image Slider or Carousel Example
- SharePoint 2013 Add Recycle Bin link in the quick launch
- Create Calendar Overlays Using Multiple Calendar Apps in SharePoint 2013 Online
- Hide Edit Links option in SharePoint 2013/2016/Online
- SharePoint 2013 Left Navigation or Quick Launch Menu Customization
- Create Page templates in SharePoint Online Modern Experience
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.
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