Currently, I am in the process of developing an ASP.Net application and have set up a Bootstrap navbar in my Site.Master file as shown below:
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<asp:HyperLink runat="server" AccessKey="1" ToolTip="Go to Home Page" NavigateUrl="~/Home">
Home
</asp:HyperLink>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>
<a runat="server" href="~/Page_1">Page 1</a>
</li>
<li>
<a runat="server" href="~/Page_2">Personal Details</a>
</li>
<li>
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
Page 3 <span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li><a runat="server" href="~/Page_3/Page_3A">Page 3A</a></li>
<li role="separator" class="divider"></li>
<li><a runat="server" href="~/Page_3/Page_3B">Page 3B</a></li>
<li><a runat="server" href="~/Page_3/Page_3C">Page 3C</a></li>
<li><a runat="server" href="~/Page_3/Page_3D">Page 3D</a></li>
<li role="separator" class="divider"></li>
<li><a runat="server" href="~/Page_3/Page_3E">Page 3E</a></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
However, now I have transitioned to using a sitemap while maintaining the Bootstrap layout. The sitemap code and updated master page are as follows:
<?xml version="1.0" encoding="utf-8" ?>
<siteMap xmlns="http://schemas.microsoft.com/AspNet/SiteMap-File-1.0" >
<siteMapNode roles="*">
<siteMapNode url="~/Page_1" title="Page 1" description="Page 1" />
<siteMapNode url="~/Page_2" title="Page 2" description="Page 2" />
<siteMapNode url="~/Page_3/Default" title="Page 3" description="Page 3">
<siteMapNode url="~/Page_3/Page_3A" title="Page 3A" description="Page 3A" />
<siteMapNode url="~/Page_3/Page_3B" title="Page 3B" description="Page 3B" />
<siteMapNode url="~/Page_3/Page_3C" title="Page 3C" description="Page 3C" />
<siteMapNode url="~/Page_3/Page_3D" title="Page 3D" description="Page 3D" />
<siteMapNode url="~/Page_3/Page_3E" title="Page 3E" description="Page 3E" />
</siteMapNode>
</siteMapNode>
</siteMap>
Site.Master
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<asp:HyperLink runat="server" AccessKey="1" ToolTip="Go to Home Page" NavigateUrl="~/Home">
Home
</asp:HyperLink>
</div>
<div class="navbar-collapse collapse">
<asp:Menu ID="mnuMain" Runat="server" DataSourceID="smdsMain"
Orientation="Horizontal"
StaticDisplayLevels="2" >
</asp:Menu>
<asp:SiteMapDataSource ID="smdsMain" runat="server" ShowStartingNode="false" SiteMapProvider="XmlSiteMapProvider" />
</div>
</div>
</div>
After implementing the sitemap, I encountered issues with the layout of my navbar being completely distorted. How can I rectify this problem?
I aim to integrate the traditional Bootstrap navbar with a sitemap seamlessly.