navbar ssi active

Have you tried Bens jQuery solution?

That code is looking like it is addressing the senario where dropdowns are involved, so I think that will work for highlighting ALL the top-level nav items.

My solution currently only highlights a top-level element where no dropdowns are used.  I'll have to go back to the drawing board on that one, when  I get time, as I didnt take dropdowns into consideration.

As Bootstrap 4 by default uses jQuery you might as well take advantage of the jQuery solution specifically written for Bootstrap, as you are not introducing any extra page weight - the jQuery library is already available to the rest of the Bootstrap framework.

Is that answer correct?

That solution only appears to be for a SPA (Single Page Applications - sections) i.e., it dont do anything apart from highlighting the links IF they are clicked and located on the same page.

Assuming you are using the standard Bootstrap 4 navigation where the main navigation links each have the 'nav-link' class applied the javascript below will do the job (You can include it in your SSI navigation file)

<script>
const url = window.location.pathname;
const pagename = url.substring(url.lastIndexOf('/')+1);
const links = document.querySelectorAll('.nav-link');
links.forEach(function(link, index) {
let current = link.href.substring(link.href.lastIndexOf('/')+1);;
if (current === pagename) {
links[index].classList.add('activeLink')
}
})
</script>

Add the 'activeLink' class to your global css stylesheet:

.activeLink {
color: red!important;
}