Custom master page with top navigation

Question

this is the code of TopNavigation:

<nav class="nav" id="navigation">

                                    <!--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 runat="server" CssClass="nav" BlockElement="True" ID="DeltaTopNavigation">-->
                                    <!--PS: Start of READ-ONLY PREVIEW (do not modify)--><!--PE: End of READ-ONLY PREVIEW-->
                                    <!--MS:<SharePoint:DelegateControl runat="server" Id="topNavigationDelegate" ControlId="TopNavigationDataSource">-->
                                    <!--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="False" SiteMapProvider="SPNavigationProvider" ID="topSiteMap" runat="server" >-->
                                    <!--ME:</asp:SiteMapDataSource>-->
                                    <!--ME:</Template_Controls>-->
                                    <!--ME:</SharePoint:DelegateControl>-->
                                    <a name="startNavigation">
                                    </a>
                                    <!--MS:<asp:ContentPlaceHolder ID="PlaceHolderTopNavBar" runat="server">-->
                                    <!--MS:<SharePoint:AspMenu runat="server" UseSeparateCss="false" AdjustForShowStartingNode="True" StaticDisplayLevels="2" AccessKey="1" SkipLinkText="" EnableViewState="False" MaximumDynamicDisplayLevels="5" UseSimpleRendering="True" DataSourceID="topSiteMap" Orientation="Horizontal" Editable="False" ID="TopNavigationMenu" CssClass="s4-tn">-->
                                    <!--PS: Start of READ-ONLY PREVIEW (do not modify)--><link rel="stylesheet" type="text/css" href="http://wtnsolsp001/_layouts/15/1033/styles/menu-21.css" /><div id="zz5_TopNavigationMenu" class=" noindex ms-core-listMenu-horizontalBox"><ul id="zz7_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="Direction Marketing" href="http://wtnsolsp001/sites/qualite/Pages/accueil.aspx" accesskey="1"><span class="additional-background ms-navedit-flyoutArrow"><span class="menu-item-text">Marketing</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="http://wtnsolsp001/sites/qualite/Pages/accueil.aspx"><span class="additional-background ms-navedit-flyoutArrow"><span class="menu-item-text">Accueil</span></span></a></li><li class="static dynamic-children"><span class="static dynamic-children menu-item ms-core-listMenu-item ms-displayInline ms-navedit-linkNode" tabindex="0"><span aria-haspopup="true" class="additional-background ms-navedit-flyoutArrow dynamic-children"><span class="menu-item-text">Produits</span></span></span><ul class="dynamic"><li class="dynamic"><a class="dynamic menu-item ms-core-listMenu-item ms-displayInline ms-navedit-linkNode" tabindex="0" href="http://wtnsolsp001/sites/activia"><span class="additional-background ms-navedit-flyoutArrow"><span class="menu-item-text">Activia</span></span></a></li></ul></li><li class="static"><a class="static menu-item ms-core-listMenu-item ms-displayInline ms-navedit-linkNode" tabindex="0" href="http://wtnsolsp001/sites/qualite/Pages/contact.aspx"><span class="additional-background ms-navedit-flyoutArrow"><span class="menu-item-text">Contact</span></span></a></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-->
                                </nav>

I succefully got the right navigation but not with the right show.It alywas show the StartingNode on the top but the children node are at below like this :

So any idea to get the 2 .

Answer 1

<nav class="nav" id="navigation">
                                <!--MS:<asp:SiteMapDataSource ShowStartingNode="false" StartingNodeUrl="sid:1002" SiteMapProvider="GlobalNavSiteMapProvider" ID="topSiteMapLevel1" runat="server">-->
                                <!--ME:</asp:SiteMapDataSource>-->
                                <!--MS:<SharePoint:AspMenu IncludeStyleBlock="True" AdjustForShowStartingNode="True"  DynamicVerticalOffset="0" ID="TopNavigationMenuLevel1" StaticDisplayLevels="2" MaximumDynamicDisplayLevels="5" runat="server" EnableViewState="true" DataSourceID="topSiteMapLevel1" AccessKey="&#60;%$Resources:wss,navigation_accesskey%&#62;" UseSimpleRendering="true" UseSeparateCss="True" Orientation="Horizontal" SkipLinkText="">-->
                                <!--ME:</SharePoint:AspMenu>-->
                            </nav>

this is the right navigation , I have to add the link of my root site to structural navigation and to change the SiteMapProvider="GlobalNavSiteMapProvider"

Answer 2

I have this markup for the navigation in my master page and it works in the same way as your desired layout for the top navigation. You can enclose this mark up in a div <div class="nav navbar-collapse collapse"> </div> if you are using bootstrap

<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="False" 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="2" SkipLinkText="">-->
    <!--PS: Start of READ-ONLY PREVIEW (do not modify)--><!--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>