Changing or removing the seemingly unchangeable options in SharePoint 2013 Site Actions

If you get adventuresome in your SharePoint 2013 master page, you can add, edit and delete options from the Site Actions menu. It is a pretty handy thing to do, For example, do you miss the direct access to Site Permissions that SharePoint 2010 provided? It is an easy thing to add with a master page modification.  But there are four Site Action menu items that stubbornly stick around and are seemingly unchangeable. However with a little CSS we can do what we please. 

Editing the Site Actions Menu

If you open a SharePoint 2013 master page and search for <SharePoint:FeatureMenu you will jump to the Site Actions menu. Here you can reorder, edit, add to or delete options from the Site Actions menu.  The following is a screenshot of the regular, OOTB Site Actions menu (for a publishing site):

Publishing site - Site Actions menu

Here is a sample Site Actions menu item tag:

<SharePoint:MenuItemTemplate runat="server" id="MenuItem_EditPage" 
Text="<%$Resources:wss,siteactions_editpage15%>" 
Description="<%$Resources:wss,siteactions_editpagedescriptionv4%>" 
ImageUrl="/_layouts/15/images/ActionsEditPage.png?rev=23" 
MenuGroupId="200" 
Sequence="210" 
PermissionsString="EditListItems" 
ClientOnClickNavigateUrl="javascript:ChangeLayoutMode(false);" />
Property Purpose
Text Item label. Currently pulling from the localization resource file; this can be hard coded instead.
Description Tooltip. Currently pulling from the localization resource file; this can be hard coded instead.
ImageUrl Throwback to previous versions of SharePoint that displayed an icon. Currently being hidden from UI.
MenuGroupId Which sub group the item is in. Sub groups are separated by horizontal rules.
Sequence Order within the sub group in relationship to other menu items.
PermissionsString Who has access to the item. Use the same values that you would for a Security Trimmed Control.
ClientOnClickNavigateUrl Target URL for the menu item; can be hard coded.

If you delete out all of the contents of the <SharePoint:FeatureMenu> tag (leaving the actual tag in place, just get rid of everything inside of it, you will end up with this:

Site Actions menu after removal of items in master page
Publishing site
Site Actions menu after removal of items in master page
Team site

Even though your master page is void of any options, Edit Page, Add a page and Design Manager still appear for a publishing site, and Getting Started still appears for a team site.

I will save you the hassle of experimenting with leaving the code in place and changing the label text… it doesn’t work.  In fact for team sites “Getting Started” isn’t even listed as a Site Actions menu item in the code. So if you want to edit the menu item text or completely remove the item(s) from the Site Actions menu, one option available to you is CSS.

Editing the Menu Item Text

This solution is for SharePoint 2013 on-premises. For SharePoint Online, please check out this companion blog post

The source code for the menu is multi-layered, in true SharePoint fashion.  However this can be used to our advantage. The text is wrapped in a SPAN tag, which is then wrapped in a DIV tag which is finally wrapped in the anchor (A) tag. Here is the source code for Edit Page:

<a class="ms-core-menu-link" id="mp1_0_0_Anchor" href="javascript:;" onclick="return false;" title="Edit page">
	<div class="ms-hide">
		<img src="/_layouts/15/images/ActionsEditPage.gif?rev=23" alt="" title="" id="mp1_0_0_ICON">
	</div>
	<div class="ms-core-menu-label" id="ctl00_SiteActionsMenuMain_ctl00_wsaEditPage">
		<span class="ms-core-menu-title">Edit page</span>
		<span></span>
	</div>
	<span class="ms-accessible"></span>
	<div></div>
</a>

The DIV tag has a unique ID, which can be used to target the text. Since I don’t like referencing IDs with a bajillion characters as seen in this case, I usually turn to an attribute selector to do the job. After hiding the text, using a :before pseudo element we can enter in custom text (or icon or image or whatever your heart desires):

div[id$="EditPage"] span {
  display: none;
}

div[id$="EditPage"]:before {
  content: "Modify this page";
}

Once I do it for all three, I end up with this:

Use CSS to update the menu item labels

Hiding the Menu Item

To completely hide the menu item, we need to look further up in the source code.  The DIV that we targeted is wrapped in a list item (LI) and while it shares the same class name with all the other menu list items, it does have some unique properties.  So back to another attribute selector:

li[text="Edit page"] {
  display: none;
}

If we didn’t target the list item (or alternatively the anchor in the list item) and instead targeted the DIV, we would end up with a funky leftover space in the UI.

Code Bits for Each Menu Item

This solution is for SharePoint 2013 on-premises. For SharePoint Online, please check out this companion blog post

Here are the code bits to do both of these actions for all four stubborn Site Actions menu items. Note that the code for team site’s “Getting Started” is slightly different due to ID clashes with the Edit Page option in the Site Actions menu.

/* --- Edit Page --- */
	/* Hide default label */
	div[id$="EditPage"] span {
	  display: none;
	}
	/* Insert new label text - does not support localization */
	div[id$="EditPage"]:before {
	  content: "Modify this page";
	}

	/*  --  OR -- */

	/* Hide menu item */
	li[text="Edit page"] {
	  display: none;
	}

/* --- Add a Page --- */
	/* Hide default label */
	div[id$="CreatePage"] span {
	  display: none;
	}
	/* Insert new label text - does not support localization */
	div[id$="CreatePage"]:before {
	  content: "Add new web page";
	}

	/*  --  OR -- */

	/* Hide menu item*/
	li[text="Add a page"] {
	  display: none;
	}

/* --- Design Manager --- */
	/* Hide default label */
	div[id$="DesignEditor"] span {
	  display: none;
	}
	/* Insert new label text - does not support localization */
	div[id$="DesignEditor"]:before {
	  content: "Edit site branding";
	}

	/*  --  OR -- */

	/* Hide menu item */
	li[text="Design Manager"] {
	  display: none;
	}

/* --- Getting Started --- */
	/* Hide default label */
	a[title="Getting started"] .ms-core-menu-label span {
	  display: none;
	}
	/* Insert new label text - does not support localization */
	a[title="Getting started"] .ms-core-menu-label:before {
	  content: "Customize this site";
	}

	/*  --  OR -- */

	/* Hide menu item */
	li[text="Getting started"] {
	  display: none;
	}

One Catch with “Getting Started”

Since “Getting Started” is last on the list and doesn’t have anything else in its sub group, if you hide the text, you are left with a separator bar:

Left over separator bar from hiding Getting Started

This can be handled with the following style statement:

/* Hide separator bar */
.ms-core-menu-list li:nth-last-of-type(2) {
  display: none;
}

Check out the :nth-last-of-type browser support. Short summary, you are clear to use it everywhere except IE8 and older.

An alternative solution is the following, it just may need to be tweaked depending on what else you are doing with the Site Actions menu. This statement depends on the last menu option being “Site Settings”. If that isn’t present, due to your edits or permission level of the user, then the separator bar will still appear. My advice is stick with the :nth-last-of-type and be OK with no IE8 or older support.

li[text="Site settings"] + li {
  display: none;
}