Is there a way to set (or force) Nav Bar's MouseOver for a menu on each page?

[bobvoi]

I have a Nav Bar consisting of 5 items, same as the number of pages I have in my project.

Below you see an image of a sample where I currently have selected the Articles-page. Note how the Articles nav bar item automatically selects the MouseOver-image and thus it is easy to see that the page is currently selected.


This probably works this way, because every nav bar menu item links to the defined "Page: xxxx", like this:


I experiment with XT-CMS (https://xt-cms.com) template framework, which uses the Xara pages in a different way. In order to let my web site support friendly URLs like https://blablabla.com/articles, I need to use similar link-logic in my nav bars.
Each nav bar item simply links to "/products", "/services" "/about" etc. like this;


In the latter case, my nav bars do work when I select an item, meaning that the highlighted, MouseOver-image is highlighed when I hover over the menu items. The menu also works, selected the correct page in XT-CMS. However, the nav bar menu does not keep the currently selected page's nav bar item highlighed. Below you see that "all lights are off", after a page has been selected:


Is there a way, for example via some javascript in the Web Page HTML Head, to set that a certain page should also highlight a nav bar item?