Toggle navbar active item.

 Hello, I am trying to set active state on navbar item,  The page landed on, is not apart of the navbar structure, but i would still like the “Other views” dropdown navbar item to be highlighted, using the active state on the element. Am I wrong in my js, or is there a mendix specific method to perform this? I don’t think my JS is wrong as the item is highlighted for a brief moment before Home is given an active state by Mendix. How can I get around this, or how can I wait for Mendix to be fully loaded before I run the script.. ​​​​​​Navbar: JS Snipppet:  $(function(){ let toggle = new Promise((res, rej)=>{ res($('.navbar-nav').children('li').each((i)=> { $(this).toggleClass('active'); })); }).then( $('.navbar-nav').children('').eq(2).toggleClass('active') ); }) What I want to achieve: Navbar: ”Active state” of element:
2 answers

Hi Andrew,

A kinda hacky solution I used years ago using css: give this page a custom class, and create css to ‘highlight’ the 3rd child of you navbar (li), style it like active state would do.

It breaks easy though and definitely is not maintainable: adding a menu option in between would for instance require a change in css files.

I am sure a more elegant solution exists or a widget/solution has been developed since I last ran into this problem, but you can keep it in mind as 'plan B’



Opening this back up in hopes of someone knowing a way to implement this cleanly without CSS hacks.