Programming, SharePoint, Software, Technology, Tool

Customizing the Top Bar in SharePoint 2016 (On-Premesis)

There are plenty of reasons why you might want to customize the top SharePoint branding bar that decorates your SharePoint 2016 sites. Rather than going into why this exists and why it is not always/ever desirable, I will go into how to get rid of the least useful features. The key point here is getting rid of something which may add no value to your site and may in fact be annoying your users.

* Note also that this article is for standard SharePoint sites. If you apply the CSS to a SharePoint search site (basic or enterprise), the search will show an error message.

First: Getting rid of the Yammer, OneDrive, Sites links from the top left clickable Square:

In SharePoint 2016 the container that holds each of the items: Yammer, OneDrive, Sites as a CSS class name of o365cs-nav-appItem. Each of these is embedded in what appears to be a speech bubble. For our purposes, we will leave the speech bubble but set each of the items to not be visible.

  1. Open SharePoint Designer 2013
  2. In SharePoint Designer click Open Site
  3. In the popup, enter the URL to your SharePoint site
  4. Click the Open button to open the site
  5. In the left hand Navigation bar, click the Master Pages option
  6. Locate a template to use, for example seattle.master
  7. Click just to the right of seattle.master so it is highlighted but your mouse has not clicked on the text. You just want the row highlighted.
  8. ** You’ll now copy this and create an instance you can play with.
  9. Look under File in the top menu bar
  10. Click on Copy
  11. Now de-select the page you just copied. One way is to click just below welcomelayout2.aspx (the last item in the Nav list)
  12. Now click the paste button (top left corner button)
  13. You’ll see a new copy of the master page you just pasted.
  14. Click on the new copy and click Edit File
  15. Now scroll down to the end header section of the master page (look for </head>)
  16. Paste in the following CSS right above the </head> tag
    
    <style type="text/css">
    .o365cs-nav-appItem
    {
      display: none;
    }
    </style>
    
  17. Click Save and click Ok to the warning message.
  18. Back on the SharePoint Designer left Navigation bar, click Master Pages and find your edited master page and again click right beside it (to the right) so the row is highlighted.
  19. In the top menu ribbon, click Set as Custom
  20. Then click Set as Default
  21. Check that your change took hold by browsing to your site

Second: Getting rid of the Sites link to the right of the word SharePoint

Pretty cool, right? But annoyingly the Sites link still appears right beside the word SharePoint on the top menu. It really doesn’t do much except lead to a person’s profile, which is not necessarily needed, especially since we just disabled the link from the popup. In this case, let’s continue to hide the Sites link by going back into editing our copied over master page (see above).

The Sites link is simply text in a hyperlink. The ID of the hyperlink is: Sites_BrandBar , so let’s hide the hyperlink by id by adding the following style:

<style type="text/css">
#Sites_BrandBar
{
  display: none;
}
</style>

Once you have added this CSS, remember to click the Save button and then reload your SharePoint site to make sure that the Sites link is now gone.

Third: Getting rid of the About Me link that appears in the drop-down list under a User’s Name

I wonder why the same feature (the personal page) appears three different times on the top navigational bar. It really seems to me to be more of a gimmick than an actual feature, although I’m sure the people who built SharePoint would not agree with me.

Again, you’ll need to go into the edit screen of your master page. As with the Sites link on the top bar, the About Me link is a simple hyperlink that we can access by Id. This one goes by the Id of: O365_SubLink_ShellAboutMe . To remove it as an option, we simply add another simple CSS styling that turns the link invisible:

<style type="text/css">
#O365_SubLink_ShellAboutMe
{
  display: none;
}
</style>

Again, remember to click the Save button and then reload your SharePoint site to make sure your changes have been made.

Fourth: Bonus Round – Disable the broken SharePoint help link

I have no idea why the stock installation of SharePoint comes with a very broken help link, at the very least there should be some default help here rather than what actually shows up: a popup window with an error message. Until you get a handle on providing your users with a custom help library, I’d suggest just getting rid of the help button on the top bar.

In this case, I’m talking about the question mark at the top right that is beside each user’s name. In the SharePoint master page markup, this button comes with a custom Id that we can reference from our CSS. In this case, the Id is: O365_MainLink_Help . To make sure this is not there to distract your users with a broken help link, let’s simply go back into editing our custom master page, and add the following CSS:


<style type="text/css">
#O365_MainLink_Help
{
  display: none;
}
</style>

As before, don’t forget to click the Save button and then reload your SharePoint site.

Summary:

I think that cleaning up the SharePoint top menu bar is a pretty good idea and your users will thank you.
If you liked the customizations I made above, here’s the full CSS that you can copy and paste within a single style tag:
<style type="text/css">
 .o365cs-nav-appItem
 {
   display: none;
 }
 #Sites_BrandBar
 {
   display: none;
 }
 #O365_SubLink_ShellAboutMe
 {
   display: none;
 }
 #O365_MainLink_Help
 {
   display: none;
 }
 </style>
Advertisements

1 thought on “Customizing the Top Bar in SharePoint 2016 (On-Premesis)”

Leave a Reply

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

WordPress.com Logo

You are commenting using your WordPress.com 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 )

Google+ photo

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

Connecting to %s