We are using Sitefinity 11 and MVC. We are trying to use just one template for the main heading pages that reside just under the root of the site. On that template, we'd intend to use a vertical navbar (using the included Sitefinity navbar widget set to the Vertical view, its Bootstrap 4) which will reside on the left side of the page.
We want the navigation to show the top most page of that section (which we have enabled by turning "ShowParentPage" to True, and display child pages up to 3 levels deep (including the top page...so child and grand child pages). The tricky part is that we'd like for it to stay the same, even when the user navigates into one of the child pages and always show that top level with the two sub levels. There is no built in functionality for this currently, and the closest option to use is to set the widget to always show current page and children. But again, this results in it setting the current page to the top instead.
There are only going to be three or four of these top level pages under the home page, so if push comes to shove, we could create a different template for each section of the site, and then just set the navigation widget to always default to the top page of that section which is another built in option on the navigation widget, but this seems like it would result in duplicated effort.
I've been trying to modify the NavigationView.Vertical razor html view to achieve our desired result, but I am having no luck. My thought, is that if I could check to see if the parent page, or parent of the parent page has a certain page title (which should remain pretty static over time, although yeah I know this can lead to risk of the page name is changed), then set that as the active node, and then have the code do what it is doing already, which is to loop through the child pages and write them to the navigation menu.
This is a snippet of the default code on the view:
@model Telerik.Sitefinity.Frontend.Navigation.Mvc.Models.INavigationModel
<div class="@Model.CssClass">
<nav>
<ul class="nav flex-column navbar-child-custom">
@foreach (var node in Model.Nodes)
{
<li class="nav-item">
<a class="nav-link @GetClass(node)" href="@node.Url" target="@node.LinkTarget">@node.Title</a>
@RenderSubLevelsRecursive(node)
</li>
}
</ul>
</nav>
</div>
If I could somehow set that node in the for-each loop to the top most parent page, then I could just let it do it's thing and it would work, but I don't know of a proper way to do this.
Any help or suggestions are much appreciated!
EDIT: I've attached some images which shows the page hierarchy (which you can see has Members, Retirees, and Employers as the three top level pages I'm referring to), the selection used in the template, and then also the result on the page when you are on the members page, and then what happens to the left nav when you are on the Pensions page which is just under Members. In this case, we want the navigation to remain the same, as if you were on the Members page.
