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.
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);
});