Hide Newsfeed, OneDrive and/or Sites from the Waffle for SharePoint 2016

Here’s a quick little snippet of CSS if you are trying to hide the Newsfeed, OneDrive or Sites from the Waffle Menu in SharePoint 2016. If you are looking to do this in the Ribbon for SharePoint 2013 then check out my other posting – https://thomasdaly.net/2016/03/05/hide-newsfeed-onedrive-andor-sites-from-the-suite-bar-ribbon-area-for-sharepoint-2013/

Where do you put this? There are a number of places that you can put it. The best option would be in the Alternate CSS file [I’m going to get around to posting this cause I haven’t found a great article explaining this to newcomers]. You could also just add it to the MasterPage but that’s not the cleanest method.

Hide Newsfeed

Before:

CSS Snippet:

/* Hiding Newsfeed */
.o365cs-nav-appTile[id='O365_AppTile_Newsfeed'] {
	display: none;
}

After:


Hide OneDrive

Before:

CSS Snippet:

/* Hiding OneDrive */
.o365cs-nav-appTile[id='O365_AppTile_Documents'] {
	display: none;
}

After:


Hide Sites

Before:

CSS Snippet:

/* Hiding Sites */
.o365cs-nav-appTile[id='O365_AppTile_Sites'] {
	display: none;
}

After:


Bonus

After you hide 2 items you’ll get a space like this. Add the next line of CSS to tighten it up.

CSS Snippet:

/* To remove the minimum width off the size of the box */
.o365cs-rsp-off.o365cs-newAL-off.o365cs-nav-navMenu {
	min-width: 0;
}

After:


Hide all 3 – Newsfeeds, OneDrive, & Sites + remove the min width of the box

CSS Snippet:

.o365cs-nav-appTile[id='O365_AppTile_Newsfeed'],
.o365cs-nav-appTile[id='O365_AppTile_Documents'],
.o365cs-nav-appTile[id='O365_AppTile_Sites'] {
	display: none;
}

.o365cs-rsp-off.o365cs-newAL-off.o365cs-nav-navMenu {
	min-width: 0;
}

 

Thanks for reading!

 

12 Comments

  1. Nice set of css!
    I have just one cuestion, these Css works nice in the my site but how can I apply them to my content site? the one when you click on “On drive” icon

    Regards
    Americo

    • unfortunately you can’t use this on the ‘modern’ types of pages as there is not a quick way to hook up a css file. you could with an spfx application customizer

  2. You don’t know how long I’ve been waiting for clear cut answers like this! You sir are a gentleman and a scholar! Now if you could tell me how to change the background color of those for custom tiles I’ll buy ya a beer

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.