Display the home link in top navigation menu in SharePoint 2010

On my SharePoint 2010 site, I needed to display a home link in the top navigation menu. One way of doing it is to add a heading called “Home” in the navigation list(Site Actions->Site Settings->Look and Feel->Navigation->Navigation Editing and Sorting). After adding this, all the back end pages have a top navigation menu with two Home links. So  I needed to do it in a way that works for both front end and back end.

1. Open the master page in SharePoint Designer 2010.

2. Search for “topSiteMap”. 5 lines after that, change the value of StaticDisplayLevels to 2.  3 lines after that, you should see a tag called asp:SiteMapDataSource. Change the value of ShowStartingNode to True.

Here is all the code for the navigation menu in the master page:

<div id=”s4-topheader2″ style=”border:0;background:transparent;”>
<a name=”startNavigation”></a>
<asp:ContentPlaceHolder id=”PlaceHolderTopNavBar” runat=”server”>
<asp:ContentPlaceHolder id=”PlaceHolderHorizontalNav” runat=”server”>
CssClass=”s4-tn noindex”/>
<asp:SiteMapDataSource ShowStartingNode=”True” SiteMapProvider=”CombinedNavSiteMapProvider” id=”topSiteMap” runat=”server”/>


Top Navigation Customization

Here are some classes that used to style the top navigation. This code are used for one color navigation menu.

.s4-tn{ background-color:#8dc63f; padding:0px; margin:0px!important; width:960px!important; }

/* Global navigation */

.s4-tn li.static > .menu-item{ color:#fff; white-space:nowrap; border:1px solid transparent; padding:10px 15px; line-height:12px; height:15px; font-size:12px; font-weight:bold; }

/* Hover */

.s4-tn li.static > a:hover{ background:url(“/_layouts/Images/selbg.png”) repeat-x left top; color:#000; text-decoration:none; }

/* Selected */

.s4-tn a.selected { background:url(“/_layouts/images/selbg.png”) repeat-x left top; background-color:#8dc63f; color:black!important; text-decoration:none; border:1px transparent solid; padding-right:10px; padding-left:10px; margin:0px; }

/* Selected hover*/

.s4-tn .selected > a:hover{ color:black!important; }

/* Sub items border */

.s4-tn ul.dynamic{background-color:#C8F38C; }

/* Menu Item */

.s4-tn li.dynamic > .menu-item{display:block; padding:4px 10px; background-color:#fff; color:#000; border-bottom:1px solid #ccc;} .s4-tn li.dynamic > a, .s4-tn li.dynamic > a:visited {color:#000;}

/* Menu Item Hover Over */

.s4-tn li.dynamic > a:hover{color:#000; text-decoration:none; background:url(“/_layouts/Images/selbg.png”) repeat-x left top; background-color:#C8F38C; font-weight:bold;}

/*Remove the down arrow next to first level menu items*/

.menu-horizontal A.dynamic-children SPAN.additional-background {  background-image:none!important;  padding-right:0px!important; }