In this article I have explained how to create a responsive navigation menu in SharePoint server 2013. Let’s follow this port to create and configure metadata service application.
Managed metadata service in SharePoint 2013.
Open SharePoint site
Navigate to site settings -> Navigation -> Under look and feel -> Navigation
On that page select “Managed Navigation”
Under Managed Navigation Term set -> Click Create Termset button
So now the site navigation has been created successfully “Publishing Navigation”. Open the “Term store management tool” it will help you to create the terms and term sets for managed navigation.
On Publishing navigation click “Create Term”.
Then create all the links have to show in the page
– Home
– About us
– Gallery
– Blog
– Contact us
These are all the term sets we are going to create,
Finally, the created term sets look like this.
Click Save -> Click Ok
Now the page look like this
Let’s gets some work around here to get branding for the navigation menu and make responsive
HTML responsive navigation menu look like this:-
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 master page -> Open Seattle. Master -> Edit this file in advance mode
Add the necessary scripts and css into 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 look like this:
<nav class=”navbar navbar-inverse”>
<ul class=”nav navbar-nav”>
<li class=”active”><a href=”#”>Home</a></li>
<li><a href=”#”>Page 1</a></li>
<li><a href=”#”>Page 2</a></li>
<li><a href=”#”>Page 3</a></li>
</ul>
</nav>
Ctrl + find the “aspmenu”
Add nav class tag into top of the sharepoint delegate tag
Code look like:
<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 add some scripts to override the default ID and Class for sharepoint <ul> and <li> elements
For Sharepoint onpremise:
UI id:
$( “#zz13_RootAspMenu”).attr( “id”, “myTopNav” );
For anonymous user:
$( “#zz2_RootAspMenu”).attr( “id”, “myTopNav” );
For sharepoint online
$( “#zz13_RootAspMenu”).attr( “id”, “myTopNav” );
In my scenario am using sharepoint onpremise
Add the script tag to override the ul class
First step 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 browse you will be able to see the responsive navigation menu
Note:- It is applicable to all type of navigation structural navigation also works well….
Read some SharePoint tutorials below:
- Configure Add-In or app development environment in SharePoint server 2016
- Communication Site Overview in SharePoint online Office 365
- SharePoint Online communication site Hero webpart
- Change the SharePoint List View into JQuery News Ticker Using JS Link CSR
- Promoted links web part in SharePoint online
- How to create and configure metadata navigation and filtering SharePoint Online?
Happy learning!…..
SharePoint Online FREE Training
JOIN a FREE SharePoint Video Course (3 Part Video Series)
