Change highlighted item in the navigation pane according to the visited page. - Mendix Forum

Change highlighted item in the navigation pane according to the visited page.

19

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. 

asked
6 answers

Great idea! Also experienced this behaviour. 

Created

Great Idea. This would help us a lot since we now have to mimic this behaviour by giving every page a custom CSS class.

Created

Great suggestion! So many users are complaining about this behaviour...

Created

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;

}

 

Created

Thanks! I will look into it.

Created

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

Created