0

I have the global navigation set at Structural Navigation - showing both subsites and pages. But the Top Navigation snippet I used from Snippet Gallery is not displaying the dropdowns at all. I am using a custom master page. I do not understand the customizations in the Snippet Gallery. How do I modify this snippet code to show the dropdowns in the HTML?

<div data-name="TopNavigationNoFlyoutWithStartNode">
<!--CS: Start Top Navigation Snippet-->
<!--SPM:<%@Register Tagprefix="SharePoint" Namespace="Microsoft.SharePoint.WebControls" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c"%>-->
<!--MS:<SharePoint:AjaxDelta ID="DeltaTopNavigation" BlockElement="true" CssClass="ms-displayInline ms-core-navigation ms-dialogHidden" runat="server">-->
<!--PS: Start of READ-ONLY PREVIEW (do not modify)-->
<!--PE: End of READ-ONLY PREVIEW-->
<!--MS:<SharePoint:DelegateControl runat="server" ControlId="TopNavigationDataSource" Id="topNavigationDelegate">-->
<!--PS: Start of READ-ONLY PREVIEW (do not modify)-->
<span style="display:none">
<table cellpadding="4" cellspacing="0" style="font:messagebox;color:buttontext;background-color:buttonface;border: solid 1px;border-top-color:buttonhighlight;border-left-color:buttonhighlight;border-bottom-color:buttonshadow;border-right-color:buttonshadow"><tr><td nowrap="nowrap"><span style="font-weight:bold">PortalSiteMapDataSource</span> - topSiteMap</td></tr><tr><td></td></tr></table></span>
<!--PE: End of READ-ONLY PREVIEW-->
<!--MS:<Template_Controls>-->
<!--MS:<asp:SiteMapDataSource ShowStartingNode="True" SiteMapProvider="SPNavigationProvider" ID="topSiteMap" runat="server" StartingNodeUrl="sid:1002">-->
<!--ME:</asp:SiteMapDataSource>-->
<!--ME:</Template_Controls>-->
<!--ME:</SharePoint:DelegateControl>-->
<a name="startNavigation"></a>
<!--MS:<asp:ContentPlaceHolder ID="PlaceHolderTopNavBar" runat="server">-->
<!--MS:<SharePoint:AspMenu ID="TopNavigationMenu" runat="server" EnableViewState="false" DataSourceID="topSiteMap" AccessKey="&#60;%$Resources:wss,navigation_accesskey%&#62;" UseSimpleRendering="true" UseSeparateCss="false" Orientation="Horizontal" StaticDisplayLevels="2" AdjustForShowStartingNode="false" MaximumDynamicDisplayLevels="0" SkipLinkText="">-->
<!--PS: Start of READ-ONLY PREVIEW (do not modify)--><link rel="stylesheet" type="text/css" href="/_layouts/15/1033/styles/menu-21.css" /><div id="zz7_TopNavigationMenu" class=" noindex ms-core-listMenu-horizontalBox"><ul id="zz9_RootAspMenu" class="root ms-core-listMenu-root static"><li class="static"><a class="static menu-item ms-core-listMenu-item ms-displayInline ms-navedit-linkNode" tabindex="0" title="Home" href="/Pages/default.aspx" accesskey="1"><span class="additional-background ms-navedit-flyoutArrow"><span class="menu-item-text">Wichita.Gov</span></span></a><ul class="static"><li class="static"><a class="static menu-item ms-core-listMenu-item ms-displayInline ms-navedit-linkNode" tabindex="0" href="/Council/Pages/default.aspx"><span class="additional-background ms-navedit-flyoutArrow"><span class="menu-item-text">City Council</span></span></a></li><li class="static"><a class="static menu-item ms-core-listMenu-item ms-displayInline ms-navedit-linkNode" tabindex="0" href="/Government/Pages/default.aspx"><span class="additional-background ms-navedit-flyoutArrow"><span class="menu-item-text">Government</span></span></a></li><li class="static"><a class="static menu-item ms-core-listMenu-item ms-displayInline ms-navedit-linkNode" tabindex="0" href="/News/Pages/default.aspx"><span class="additional-background ms-navedit-flyoutArrow"><span class="menu-item-text">News</span></span></a></li><li class="static"><a class="static menu-item ms-core-listMenu-item ms-displayInline ms-navedit-linkNode" tabindex="0" href="/VisitCityHall/Pages/default.aspx"><span class="additional-background ms-navedit-flyoutArrow"><span class="menu-item-text">Visit City Hall</span></span></a></li><li class="static"><span class="static menu-item ms-core-listMenu-item ms-displayInline ms-navedit-linkNode" tabindex="0"><span class="additional-background ms-navedit-flyoutArrow"><span class="menu-item-text">Heading 1</span></span></span></li></ul></li></ul></div>
<!--PE: End of READ-ONLY PREVIEW-->
<!--ME:</SharePoint:AspMenu>-->
<!--ME:</asp:ContentPlaceHolder>-->
<!--PS: Start of READ-ONLY PREVIEW (do not modify)-->
<!--PE: End of READ-ONLY PREVIEW-->
<!--ME:</SharePoint:AjaxDelta>-->
<!--CE: End Top Navigation Snippet-->
</div>

After trying out the solution (StaticDisplayLevels & MaximumDynamicDisplayLevels) my menu ended up like this below. Subsites are "City Council", "Government", "City Council", "News", "Visit City Hall". I was also playing with manual links - Heading 1 (which is a heading) with Link 1 and Link 2 supposed to be a dropdown of Heading 1.

enter image description here

These are the custom styles I am using:

.GlobalMenu {
    background-color: #3F6B90;
}

.GlobalMenu .ms-core-listMenu-item,
.GlobalMenu .ms-core-listMenu-item:link,
.GlobalMenu .ms-core-listMenu-item:visited {
    color:white;
}

/* Default nav item state */
.GlobalMenu .ms-core-listMenu-horizontalBox li.static  > .ms-core-listMenu-item {
    border-left: 1px solid #5e8aaf;
    border-right: 1px solid #265277;
    padding: 10px;
}

/* Hover state for nav items (includes selected nav item) */
.GlobalMenu .ms-core-listMenu-horizontalBox li.static > .ms-core-listMenu-item:hover {
    background-color: #265277;
    color: white;
    padding: 10px;
}

.GlobalMenu .ms-core-listMenu-horizontalBox li.selected a.selected {
    background-color: #265277;
}

.GlobalMenu .ms-core-listMenu-horizontalBox li.static > .ms-core-listMenu-item {
    margin: 0px;
}

This is what the menu looks like with the styles off.

enter image description here

2 Answers 2

0

You can edit the snippet setting in design manager and set two properties

StaticDisplayLevels="3"
MaximumDynamicDisplayLevels="1"
8
  • I went into Snippet Gallery and changed the StaticDisplayLevels from 2 to 3 and then MaximumDynamicDisplayLevels from 0 to 1. The links are now showing up, but not as dropdowns. The page links are showing up in the same row as the subsite links . What am I missing? Sep 1, 2016 at 21:41
  • Can you post a screen shot? Also try playing with MaximumDynamicDisplayLevels Sep 1, 2016 at 21:42
  • Where do I add the screenshot? Don't see how I can do it in comments. Do I post it in my question? Sep 1, 2016 at 21:45
  • Yes edit question and add image Sep 1, 2016 at 21:45
  • Edited my question with screenshot. Sep 1, 2016 at 21:51
0

We were facing similar issues with the horizontal navigation snippet we added on our custom master page. After spending a while this is how we solved it.

1.) Go to site settings-> Navigation

enter image description here

2.) Under Structural Navigation( Screenhot) --> Here you will have to delete all the nodes under Global Navigation and add them again.

PS: Dropdown did show up in our case, hope it works in your case as well.

1
  • The only thing I can delete is the Heading 1, Link 1 and Link 2. The others cannot be deleted because they are sub-sites and pages. The menu works fine on the pages using the System Master Page, but not on the customized Site Master Page. Sep 2, 2016 at 14:03

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.