In the out of the box installation of SharePoint 2016 there are three options for users to click in the leftmost settings area of the top menu bar. These are: access Yammer online, OneDrive, and access each user’s personal site in SharePoint. In this article I will describe how to individually show or hide each one using simple CSS styling in your site’s master page.
In a previous article (see: https://jwcooney.com/2017/06/30/customizing-the-top-bar-in-sharepoint-2016-on-premesis/) I go over the step-by-step details of how to add custom CSS in SharePoint Designer 2013 to your site master page in order to generally remove all three of these options from the settings area, but here I will review how to toggle each option on and off.
Steps to take:
In the HTML markup for each of the options, each is encapsulated in a div tag with the class name of o365cs-nav-appItem. To simply get rid of all three options, we can apply a blanket style that hides the contents of each div by the CSS class name of the encapsulating divs.
However, if you want more granular control over what option is shown, you’ll have to address each option by the HTML markup inside of each div. Specifically, each div tag is immediately followed by a hyperlink with a unique id. Each hyperlink completely encapsulates its contents, so to hide or show options, you can address each option directly in your CSS by its id. Here is what the id’s are for each of the stock SharePoint options:
Yammer is: O365_AppTile_Yammer
OneDrive is: O365_AppTile_Documents
SharePoint Personal sites are: O365_AppTile_Sites
This makes things pretty straightforward to hide or show each tile. For example, to show the Yammer link but to hide the OneDrive and SharePoint Personal site tiles, you’d add the following CSS to your Master page markup:
<style type="text/css">
#O365_AppTile_Documents
{
display: none;
}
#O365_AppTile_Sites
{
display: none;
}
</style>
Justin Cooney 