Change Office 365 in SharePoint Online

March 15, 2014 — 2 Comments

Everyone is used to seeing this logo right ?

When you’re working with SharePoint 2013 on premises the web application has a property called SuiteBarBrandingElementHTML that you can update with custom HTML to update what is shown in the upper left corner of the page. In office 365, we do not have access to the web application so we have to use a different method. Below is a snippet you can place in your master page to update that area with new text and modify the link. In my demo case I updated it to be a HOME link that brings to the root site collection.

  • You can use SharePoint Designer or any one of your favorite tools to update the master page by mapping a drive to the site.
  • The snippet below must go within the <head> of the master page
  • If you are using the out-of-the-box master page (Seattle.master) you must first make your edits to the Seattle.HTML. This is because the files are linked. (See below)

<script type=”text/javascript” src=””></script&gt;
<script type=”text/javascript”>
     $( document ).ready(function() {

  1. Edit the Seattle.HTML file
  2. Add the snippet into the <Head>
  3. Next, publish the HTML file. This will automatically update the seattle.master page.

If you attempt to update the seattle.master directly you will receive this error:

If you look at the master page after you publish you will se your new code snippet in the <head> tag.

Now we get something like this 🙂

Note: To do this on premises you need to use PowerShell:

$webApp = Get-SPWebapplication <url>
$webApp.SuiteBarBrandingElementHTML = ” <new html> ”

Keep in mind that HTML quotes (“) need to be escaped using ` otherwise POSH thinks they are intended as strings.

Example: $webApp.SuiteBarBrandingElementHTML = “<div class=`”MainLink`”><a href=`”/`”>Home</a></div>”

2 responses to Change Office 365 in SharePoint Online


    Update: If you do not have or do not want to load jQuery in your master page, you can use the Web API to do the same thing but using: document.getElementsByClassName('o365cs-nav-branding o365cs-topnavLink')[1].innerHTML = 'Intranet Home'

    Keep in mind that CSS classes and DOM IDs have been known to change in SPO so be aware of this when troubleshooting.



    Hi Kameron,

    Great article. Thanks! Do you know how to change the MySite suite bar in SharePoint 2016?




Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s