SharePoint Online - Replace top bar text with your own

So you want to replace the Office 365 and SharePoint links on the top bar of SharePoint Online? Here is how you do it with CSS

Add this CSS into your custom style sheet:

/* SharePoint Top Bar Text */
a.o365cs-nav-appTitle{
visibility:hidden;
}
/*Office 365 Text */
a.o365cs-nav-bposLogo{
visibility:hidden;
}
/*Replace the Text by putting your new text before the div
If you put it inside the div, then the links from the old text will apply to your new text*/
div.o365cs-nav-o365Branding:before{
visibility:visible;
content: "My New Text Goes Here";
color:white;
    text-decoration: none;
    font-family:"Calibri Light";
    font-size:40px;
    margin: 10px 10px 10px 10px;
    vertical-align:bottom;
}

If you want to put in an image instead of text, use this in the content part

content: url('myimage.png');

And make sure the image is about 45px in height.

Share on Google Plus

About Tom DeMeulenaere

Highly accomplished information technology professional with extensive knowledge in System Center Configuration Manager, Windows Server, SharePoint, and Office 365.