Create A Responsive Navigation Menu Using Managed Metadata Navigation In SharePoint Server 2013

Let’s follow this post to create and configure metadata service Applications.

Open SharePoint site

Navigate to site settings -> Navigation -> Under look and feel -> Navigation.

On this page, select Managed Navigation.

Under Managed Navigation Term set -> click Create Termset button.

Now, the site navigation has been created successfully.

Open Term store management tool and it will help you to create the terms and term sets for the managed navigation.

On Publishing navigation, click Create Term.

Subsequently, create all the links, which need to be shown in the page.

These are all the term sets, which we are going to create.

Finally, the created term sets looks, as shown below.

Click Save -> Click OK.

Now, the page looks, as shown below.

Let’s do some work to get branding for the navigation menu and make it responsive

HTML responsive navigation menu looks, as shown below.

Browser View

Mobile View

Step 1

Add the scripts and CSS under siteAssets folder.

Step 2

Open SharePoint designer

Open the site collection -> Navigate to the master page -> Open Seattle. Master -> Edit this file in advanced mode.

Add the necessary scripts and CSS into the master page.

<link rel="stylesheet" type="text/css" href="../../SiteAssets/menu/bootstrap.min.css" />
<script type="text/javascript" src="../../SiteAssets/menu/jquery.min.js" />
<script type="text/javascript" src="../../SiteAssets/menu/bootstrap.min.js" />

HTML code looks, as shown below.

CTRL + find the “aspmenu”

Add nav class tag into top of the Sharepoint delegate tag

The code looks, as shown below.

<nav class="navbar navbar-inverse">
<SharePoint:AjaxDelta id="DeltaTopNavigation" BlockElement="true" CssClass="ms-displayInline ms-core-navigation" role="navigation" runat="server">
<SharePoint:DelegateControl runat="server" ControlId="TopNavigationDataSource" Id="topNavigationDelegate">
<Template_Controls>
<asp:SiteMapDataSource
ShowStartingNode="False"
SiteMapProvider="SPNavigationProvider"
id="topSiteMap"
runat="server"
StartingNodeUrl="sid:1002"/>
</Template_Controls>
</SharePoint:DelegateControl>
<asp:ContentPlaceHolder id="PlaceHolderTopNavBar" runat="server">
<SharePoint:AspMenu
ID="TopNavigationMenu"
Runat="server"
EnableViewState="false"
DataSourceID="topSiteMap"
AccessKey="<%$Resources:wss,navigation_accesskey%>"
UseSimpleRendering="true"
UseSeparateCss="false"
Orientation="Horizontal"
StaticDisplayLevels="2"
AdjustForShowStartingNode="true"
MaximumDynamicDisplayLevels="2"
SkipLinkText="" />
</asp:ContentPlaceHolder>
</SharePoint:AjaxDelta>
</nav>

End of the <body> tag adds some scripts to override the default ID and class for SharePoint <ul> and <li> elements.

For SharePoint On-Premise, it is given below.

UI id:

$( "#zz13_RootAspMenu").attr( "id", "myTopNav" );

For anonymous user, it is given below.

$( "#zz2_RootAspMenu").attr( "id", "myTopNav" );

For Sharepoint Online, it is given below.

$( "#zz13_RootAspMenu").attr( "id", "myTopNav" );

In my scenario, I am using SharePoint On-Premise.

Add the script tag to override the ul class.

First step is set the custom id for the <ul> tag.

$( "#zz13_RootAspMenu" ).attr( "id", "main-menu" );

Now, inspect and check the <ul> tag id.

Code

<script type="text/javascript">
// Replace that pesky automatic ul ID
$( "#zz13_RootAspMenu" ).attr( "id", "main-menu" ); // set the replace the id for default sharepoint Id
$("#main-menu"). attr("class","nav navbar-nav"); // set the class for <ul> element replacing the system css
$("#main-menu li").attr("class","");
$("#main-menu a").attr("class","");
</script>

Check-in the masterpage file and refresh the browser. You will be able to see the responsive navigation menu.

Note

It is applicable to all types of navigation. Structural navigation also works well.

Happy learning.