Change highlighted item in the navigation pane according to the visited page.
Now the highlighting of navigation items only changes when the actual navigation item is clicked. But when navigating to a page by clicking on a link on a page, the highlighting stays on the last clicked navigation item, thus the highlighted item is not representing the visited page. This possibly confuses the user in navigating the application.
If anyone stumbles across this topic, use the Active Menu Selector widget. Unfortunately not in de Marketplace, but you can find it here. Works in our 9.18.7 projects
this is even worse when you are using multiple navigation menus for if you want to break them up with sub headers
Great idea! Also experienced this behaviour.
Great Idea. This would help us a lot since we now have to mimic this behaviour by giving every page a custom CSS class.
Great suggestion! So many users are complaining about this behaviour...
you can use below css to make selected item highlighted
.mx-navbar ul.nav > li.mx-navbar-item.active{
/* border-bottom: 5px solid red; */
border-bottom: 5px solid white;
}
.region-topbar .mx-navbar ul.nav > .mx-navbar-item.open .dropdown-menu > li.mx-navbar-subitem.active a {
color: red;
background-color: #fff;
}
Thanks! I will look into it.
Not sure if this is what you are looking for however I created this little script that you can throw in an HTML snippet that throws an activeparent class to the parent item of the page you are viewing:
// Top nav highlight parent when level 2 page currently active
$('.nav a').on("click", function () {
setTimeout(function() {
$(".mx-navbar-item").removeClass('activeparent');
$(".mx-navbar-item .mx-navbar-subitem.active").parent().parent().addClass('activeparent');
}, 1);
});