SharePoint 2013 – How to Change the text of the First Link in Global Navigation


If you’re using the global navigation in SharePoint, you noticed that the first link is always named after the name of the site and links to home. There’s no way you can change the text of this link to say for example “Home” or “Homepage” or “Landing” from the UI without changing the name of the site. Problem is that if you change the name of the site to “Homepage” for example, you’ll end up receiving notification e-mails which appear to come from Homepage <noreply@tenant.sharepoint.com> which is weird at least.

What you can do instead is use CSS to hide the name of the site and show whatever text you need.

This is the CSS:

your-css-file.css

/* Change the Home link in Global Navigation*/
#DeltaTopNavigation>div>ul>li:first-of-type>a>span:first-of-type>span:first-of-type {
  font-size: 0px;
}

#DeltaTopNavigation>div>ul>li:first-of-type>a>span:first-of-type>span:first-of-type::after {
  font-size: 13px;
  content: "Homepage";
}

and you can apply it in a feature receiver like this:

using (SPWeb web = properties.Feature.Parent as SPWeb)
{
  string linkBase = web.Url + "/";
  linkBase = linkBase.Substring(linkBase.IndexOf("/", 8));
  // alternate CSS
  web.AlternateCssUrl = linkBase + "SiteAssets/your-css-file.css";
  web.Update();
}